DOM操作

一、DOM以及DOM是哪种数据结构

　　文档对象模型（DOM）是 HTML 和 XML 文档的编程接口，提供了文档的结构化的表述

　　文档对象模型DOM是树结构（DOM树）

二、DOM操作常用API

　　1.DOM节点操作

　　　　1）获取DOM节点：

document.getElementById('id属性值');返回拥有指定id的对象的引用
document.getElementsByClassName('class属性值');返回拥有指定class的对象集合
document.getElementsByTagName('标签名');返回拥有指定标签名的对象集合
document.getElementsByName('name属性值'); 返回拥有指定名称的对象结合
document/element.querySelector('CSS选择器');  仅返回第一个匹配的元素
document/element.querySelectorAll('CSS选择器');   返回所有匹配的元素
document.documentElement;  获取页面中的HTML标签
document.body; 获取页面中的BODY标签
document.all[''];  获取页面中的所有元素节点的对象集合型

　　　　2）获取和修改DOM属性：

　property：通过property 修改和获取DOM的属性

const pList = document.querySelectorAll('p')
const p1 = pList[0]
p1.style.width = '100px'
console.log(p1.style.width)

 attribute：通过setAttribute 修改 和 getAttribute 获取 DOM属性

p1.setAttribute('style','font-size:50px')
p1.setAttribute('data-name','imook')
console.log(p1.getAttribute('data-name'))

　　2.DOM结构操作

　　　　1.创建节点

//创建一个元素节点
const div = document.createElement('div')
//创建一个文本节点
const content = document.createTextNode('content')
//创建文档碎片节点,是一种轻量级的文档，主要用来存储临时节点，然后一次性添加到DOM中
const fragment = document.createDocumentFragment()

　　2.获取节点

document.getElementById('id属性值') //返回指定id的对象引用
document.getElementsByClassName('class属性值') //返回指定class 对象集合
document.getElementsByTagName('标签名') // 返回拥有制定标签名的对象集合
document.getElementsByName('name 属性值') //返回拥有制定名称的对象集合
document/element.querySelector('css选择器') // 返回第一个匹配的元素
document/element.querySelectorAll('css选择器') //返回所有匹配的元素集合
element.childNodes() //返回所有子元素
element.parentNode() // 返回父元素
document.documentElement  //获取页面中的HTML 标签
document.body  //获取页面中 body标签
document.all  // 获取页面中所有元素节点的对象集合

　　3. 添加节点 appendChild

const list = document.getElementById('list')
const li = document.createElement('li')
li.innerText = 'hello'
list.appendChild(li) // 将子元素添加到父节点的最后一个子节点中

　　4. 插入节点 insertBefore

parentElement.insertBefore(newEl,referrenceEl) // 将子节点newEl 插入到referrenceEl 元素之前

　　5. 移动节点 

const p1 = document.getElementById('p) //已存在的元素节点
const div2 = document.getElementById('div2')

div2.appendChild(p1) // 将元位置p1元素删除，并将其添加到div2元素中

　　6.删除节点 parentEl.removeChild()

const img = document.getElementById('img')
const div = document.getElementById('div')

div.removeChild(img[0]) //将div的字元素img删除

三、attribute 和 property 的区别

• property：只能获取或修改 DOM对象自身的属性

• attribute：即可以获取和修改DOM对象自身的属性，也可以获取和修改自定义属性

四、一次插入多个节点，考虑性能

const listnode = document.getElementById('list')

//创建一个代码判断，此时还没有插入到DOM树中
 const frag = document.createDocumentFragment()

for(let i = 0; i < 10; i++){
     const li = document.createElement('li')
     li.innerTHML = 'list item' + i
     frag.appendChild(li)        
}

//都完成之后，在插入到DOM树中
listnode.appendChild(frag)