2020-12-30 JavaScript基本概念总结6：查找节点 6个方法，操作行内style属性，非行内样式，节点遍历，元素遍历，节点操作，点击按钮创建li，窗口位置，增删项目步骤

1.查找节点 6个方法

document.getElmentById()
document.getElementsByTagName()
document.getElementsByClassName()
document.getElementsByName()
document.querySelector()
document.querySelectorAll()

2.操作行内style属性

节点对象.style.属性 = ‘属性值’

3.非行内样式

非ie浏览器取行外样式 所有样式window.getComputedStyle(节点对象, null);找某个样式style.属性
ie浏览器取行外样式 所有样式节点对象.currentStyle 找某个样式style.属性

4.节点遍历(元素、文本、注释)

childNodes 返回NodeList 类数组 获取所有的子元素集合
firstChild获取第一个子节点
lastChild获取最后一个子节点
parentNode 返回的是父节点
previousSibling 返回兄弟上一个节点
nextSibling 返回兄弟下一个节点
任何一个节点 .ownerDocument 都能取到根节点

5.元素遍历（标签）

children 取所有子标签 返回HTMLCollection 类数组
firstElementChild获取第一个子标签
lastElementChild获取最后一个子标签
parentElement返回的是父标签
previousElementSibling返回兄弟上一个标签
nextElementSibling返回兄弟下一个标签
元素遍历 都是只找标签

6.节点操作

document.createElement() 创建标签
document.createTextNode()创建文本
appendChild(节点对象)在内部 末尾添加一个元素
append(节点对象,节点对象)在内部 末尾添加多个元素
insertBefore(新元素，目标元素）在内部 目标元素前面添加
removeChild(子元素对象)删除子元素
remove()删除自己 本身调用
replaceChild(新元素，目标元素)替换
cloneNode（deep）克隆，复制 true 深度克隆–包含子元素 /false–浅克隆–不会包含子元素

7.点击按钮创建li

第一步获取页面上放li的标签
第二步在button按钮上创建onclick点击事件函数
第三步在函数中创建li标签，text文本
第四步把text文本添加到li标签中，li添加到获取的页面标签中
注意：创建的标签 在内存中 要跟页面节点进行关联
onclick的函数名 和下面函数名 一定一样
2.点击按钮创建li并且可以删除节点
第一步定义一个标记序号的变量
第二步获取页面上放li的标签
第三步在button按钮上创建onclick点击事件函数
第四步在函数中创建li标签，text文本
第五步创建删除按钮的容器标签，给标签加内容为按钮
第六步把text文本和按钮容器添加到li标签中，li添加到获取的页面标签中
第七步每点击一次变量++
第八步给按钮添加onclick点击事件，通过this确定当前按钮
第九步创建删除函数，传入this的按钮
第十步在函数中删除按钮的父元素的父元素，即整行元素
其他方法实现
第五步创建一个button按钮，创建文本元素，把文本添加到button按钮中
第八步给button按钮创建onclick点击事件函数
第十步在函数中删除this的父元素，即整行元素

8.窗口位置

原点 左上角
offsetLeft左偏移量 offsetTop上偏移量
clientHeight可视高度 clientWidth可视宽度，可视区 不包括边框，外边距，滚动条
scrollHeight返回整个元素的高度scrollWidth返回整个元素的宽度scrollLeft左边缘和左边缘之间的距离scrollTop顶部边缘和顶部边缘之间的距离

9.增删项目步骤

1.获取页面中两个输入框，获取验证码按钮，tbody元素
2.创建函数–确认按钮
3.判断如果手机号或验证码输入框值为空时提示信息
4.提交确认按钮后，将信息添加到底下的列表
5.在tbody里添加内容，其中手机号和验证码为动态值，删除链接添加点击事件
6.点击发送验证码后，自己随机生成一个6位验证码
7.把随机数添加到验证码输入框中
8.点击发送验证码后，发送验证码按钮，将不可点(禁用状态)，且有5S倒计时效果，5S后，按钮里变为初始状态即发送验证码按钮，变为可点
9.将按钮禁用
10.设置一个变量显示倒计时数字
11.把变量赋值给验证码按钮显示数字
12.判断如果i==0时，按钮变为初始状态
13.删除整行数据