【笔记】查漏补缺进阶：WebAPIs操作

操作元素

1. 获取属性值

1. 内置属性：element.属性
2. 自定义属性：element.getAttribute(“属性”)

2. 设置元素属性值

1. element.属性 = 值，eg：element.className = 值
2. element.setAttribute(“属性”, 值)，eg：element.setAttribute(“class”, 值)
3. H5规定自定义属性data-属性名(IE11支持)：element.dataset.属性名；element.dataset[“属性名”]

3. 移除属性

方法：element.removeAttribute(属性)

4. 注意：

自定义属性中含有多个-连接时，使用驼峰命名法

节点操作

1. 利用节点层级关系获取元素

1. 利用父子兄节点关系获取元素
2. 逻辑性强，兼容性稍差

2. 节点node：网页中所有内容都是节点

1. 基本属性：节点类型nodeType、节点名称nodeName、节点值nodeValue
2. nodeType：元素为1，属性为2，文本(文字、空格、换行等)为

3. 父节点：node.parentNode

4. 子节点：

1. 包含元素节点、文本节点等：parentNode.childNodes()
2. 非标准，只返回元素节点：parentNode.children
3. 第一个(最后一个)子节点：parentNode.firstChild / parentNode.lastChild
4. 第一个(最后一个)元素节点（IE9支持）：parentNode.firstElementChild / parentNode.lastElementChild
5. 实际开发：document.querySelector(“ol”).children[0/ol.chilldren.length]
6. 下拉菜单的js实现：
   

5. 兄弟节点

1. 下/上 一个兄弟节点（包含元素节点、文本节点等）：node.nextSibling / node.previousSibling
2. 下/上 一个兄弟元素节点（IE9支持）：node.nextElementSibling / node.previousElementSibling
3. 封装兼容性函数：
   

6. 创建节点

1. 创建元素：document.creatElement(“tagName”)
2. 节点赋值：node.innerHtml
3. 添加节点：
   i. 末尾追加：node.appendChild(child)
   ii. 头部追加：node.insertBefore(child, 指定元素)
   iii. 字符串拼接内容：li.innerHtml = text.value + “删除”

7. 删除节点

node.removeChild(child)

8. 复制(克隆、拷贝)节点

node.cloneNode()

1. 浅拷贝：括号内参数为空/false，即只克隆节点本身，不克隆内容
2. 深拷贝：node.cloneNode(true)

9. 创建元素的三种方式

1. document.write("
   </div")，导致页面全部重绘
2. document.innerHtml("
   ")
   i. 缺点：由于使用拼接字符串，效率低
   ii. 改进：使用数组拼接(attr.json(" "))，效率更高，但结构较复杂
3. document.creatElement(“div”)