js操作DOM

DOM

JavaScript操作网页的接口，全称为“文档对象模型(Document Object Model)。 有这几个概念：文档、元素、节点
整个文档是一个文档节点
每个标签是一个元素节点
包含在元素中的文本是文本节点
元素上的属性是属性节点
文档中的注释是注释节点

DOM本质 DOM树：

DOM树是结构，树是由DOM元素和属性节点组成的，DOM的本质是把html结构化成js可以识别的树模型；

有了树模型，就有了层级结构，层级结构是指元素和元素之间的关系父子，兄弟。

下图为html文档：

DOM树形如一颗倒长的树。

它很容易表明家族成员之间的关系，把复杂的关系简明地表示出来

DOM 节点操作

1. dom获取 (6种方法)

  // 通过id获取到的是单个元素
  let oBox=document.getElementById('box');
  console.log(oBox)//<div id='box' class="item">abcdefg</div>
  // 通过class获取到的是一组元素，不是数组， 
  let oBox2=document.getElementsByClassName('item');
  console.log(oBox2)//HTMLCollection [div#box.item, box: div#box.item]

  console.log(oBox2[0]==oBox)
  // 通过TagName获取到的是一组元素，与上面相同
  let oBox3=document.getElementsByTagName('div')[0];
  console.log(oBox3)
  //通过name后去到的是NodeList [div#box.item],也是集合
  let oBox4=document.getElementsByName('mybox');
  console.log(oBox4)//NodeList [div#box.item]



  // h5新加两种
  //获取单个
  let item=document.querySelector('.item')
  //获取组合
  let items=document.querySelectorAll('.item')

  console.log(item,items)

  // body
  let body=document.body;
  //html
  let html=document.documentElement;
 

2. 增添加节点

  let fa=document.querySelectorAll('.father')[0];
  // fa.appendChild('hello')

  // fa.innerHTML='<h1>hello</h1>'
  // fa.innerText='<h1>hello</h1>'
  // fa.innerHTML=fa.innerHTML+'hello'
  // console.log(fa.innerHTML)

  // 创建文本节点
  let text=document.createTextNode('hello')
  // 创建元素节点
  let tag=document.createElement('H1');

  tag.appendChild(text)

  fa.appendChild(tag)

3.删除

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  // 现获取父
  let oUl=document.querySelector('ul')

  // 再获取子
  let oLi=document.querySelectorAll('li')[1]

  oUl.removeChild(oLi)

4. 替换

  // 现获取父
  let oUl=document.querySelector('ul')

  // 再获取子
  let oLi=document.querySelectorAll('li');

  // 必须是同一个父
  oUl.replaceChild(oLi[1],oLi[0])

5. 插入 inserBefore()

  // 现获取父
  let oUl=document.querySelector('ul')

  // 再获取子
  let oLi=document.querySelectorAll('li');

  let other=document.createElement('a')
  other.innerText='百度'

  // 必须是同一个父

  oUl.insertBefore(other,oLi[1])

6. 文档碎片 (优化)

  // 创建文档碎片

  let frag=document.createDocumentFragment();


  for(var i=0;i<3;i++){
    let dot=document.createElement('li');
    dot.innerHTML=`${i+4}`
    frag.appendChild(dot)
  }

  oUl.appendChild(frag)

• 新增节点
• 查询子节点
• 查询父节点
• 删除节点

7. 创建新节点  （document调用）

createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

2. 添加、移除、替换、插入  （父元素调用）
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入

3. 查找 （document调用）
getElementsByTagName() //通过标签名称 一组元素
getElementsByName() //通过元素的Name属性的值 一组元素
getElementById() //通过元素Id，唯一性单个元素
getElementByClassName()//通过c元素lass获取  一组元素
qurySelectorAll('选择器') // 通过选择器获取一组元素
querySelector("选择器") // 通过选择器获取单个元素

4. 关系  （元素调用前三个父元素调用 ）
 
childNodes // 获取所有的子节点
children  // 获取所有的子元素节点 (常用)
firstElementChild   获取第一个元素
lastElementChild  获取最后一个元素
parentNode	获取当前节点的父节点
previousElementSibling	获取当前节点的前一个兄弟元素
nextElementSibling 获取当前节点的后一个兄弟元素       

Dom节点的Attribute和Property有和区别？

---

DOM性能

如何提高Dom性能，优化页面？

DOM相关面试题

问题1、dom是哪种基本的数据结构？ 
树结构
问题2、Dom操作的常用API有哪些？ 
①获取DOM节点，以及节点的property和Attribute 
②获取父节点，获取子节点  childNodes/ parentNode
③新增节点，删除节点 
问题3、Dom节点的Attribute和Property有和区别？ 
①property只是一个JS对象的属性的修改 
②Attribute是对html标签属性的修改
问题4、DOM性能优化。
将频繁的操作改为一次性操作，通过创建文档碎片，最后一次性加入文档碎片。