DOM常用API

DOMAPI

节点查询型api

• document.getElementById();

// 根据id获取元素
let parent = document.getElementById('parent')

• document.getElementByTagName();

// 根据标签名获取元素
let divs = document.getElementsByTagName('div')

• document.getElementsByClassName();

let elements = document.getElementsByClassName('classname')

• document.querySelector() 与 document.querySelectorAll()

// 获取第一个匹配的元素
let elements = document.querySelector('.classname') 
// 获取多个匹配的元素
let elements = document.querySelectorAll('li')
// 元素如果是类名要在前面加. 是id要在前面加#

节点关系型api

节点有三个属性：nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)

节点关系型api拿到的节点有三种，包含元素节点：nodeType为1；属性节点：nodeType为2；文本节点：nodeType为3（包含文字、空格、换行等）

由于我们一般都是用元素节点，所以在每次操作前要判断.nodeType===1

父关系

• element.parentNode获取元素最近的父节点（亲爹），找不到返回null

let parentNode = node.parentNode

• element.parentElement与parentNode的区别在于，其父元素必须是一个Element，如果不是，返回null

子关系

• element.children获取所有子元素节点
• 实际开发中使用element.children[0]取第一个，element.children[element.children.length-1]取最后一个
• element.childNodes获取所有子元素节点，得到的节点包含元素、文本节点等
• element.firstChild和element.lastChild获取第一个子节点和获取最后一个子节点，得到的节点包含元素、文本节点等

兄弟关系

• nextElementSibling下一个兄弟元素节点（IE9以上）

• previouElementSibling上一个兄弟元素节点（IE9以上）

• nextSibling返回当前元素的下一个兄弟节点，会包含文本等节点类型

• previousSibling返回当一个兄弟节点，同样包含所有节点类型

节点创建型api

• createElement：创建元素

let div = document.createElement('div')

• cloneNode：克隆元素

// cloneNode内参数为布尔值，默认false代表浅拷贝
let parent2 = parent.cloneNode(true)
parent2.id = "parent2"

页面修改型api

增加节点

• node.appendChild()：节点的子元素末尾添加指定节点

parent.appendChild(child)   // 在 parent 元素的子元素末尾添加 child 元素。

• node.insertBefore(新节点,指定元素)：在指定元素前添加元素

删除节点

• node.removeChild(child)删除子节点

替换节点

• node.replaceChild(新节点, 旧节点)用于使用新节点替换旧节点

元素属性api

获取属性值

• element.属性：获取内置属性
• element.getAttribute(‘属性’); 获取自定义属性

设置属性值

• element.属性=‘值’
• element.setAttribute(‘属性’,值);

注意，class属性特殊，使用第一种方式修改时，应为div.className；使用第二种时，应为element.setAttribute(‘class’,‘值’);

移除属性值

• element.removeAttribute(‘属性’)