原生javascript DOM操作

原生javascript DOM操作

1.创建元素

创建元素：document.createElement()
创建文本节点 ：document.createTextNode()
创建文档碎片：document.createDocumentFragment() ,所有的操作是在内存中进行的
 
  为了避免重绘和回流：咱们插入dom时可采用createDocumentFragment，最后一次性的再添加到页面的dom中

    //先创建li，然后插入到ul中
    var oul=document.querySelector('.list')
    //先创建一个文档碎片
    var fragment=document.createDocumentFragment();
   for(var i=0;i<100;i++) {
        var newLi=document.createElement('li');
        newLi.textContent=`项目${i+1}` 
        fragment.appendChild(newLi)  //已经将100个li添加到fragment上了

   }

   oul.appendChild(fragment);

2.删除元素

removeChild
removeAttributeNode
parent.removeChild  有返回值，其返回值未被完全删除还* 能进行其他操作（如插入操作）
ele.remove    完全删除

3.修改元素

父节点.appendChild(子节点)  尾追加
父节点.insertBefore(新节点,参考节点) 前追加
父级节点.removeChild(要删除的子级节点) 移除节点
replaceChild(新节点，旧节点)  替换节点

4.查找元素

getElementById()  获取id ，如果页面上有多个相同id，只返回第一个
getElementsByTagName() 获取标签名 返回是类数组
getElementsByName()  获取表单中name名称  返回类数组
getElementsByClassName  只能获取class名称  返回类数组
querySelector  只获取匹配的第一个css选择器  //特别适合移动端
querySelectorAll  获取匹配的css选择器类数组 //特别适合移动端

//封装一个$
function $(selector) {
    return typeof selector==='string' ? document.querySelector(selector) : selector
}

节点关系

1、父节点：parentNode：是指定节点的父节点.一个元素节点的父节点可能是一个元素(Element )节点,也可能是一个文档(Document )节点,或者是个文档碎片(DocumentFragment)节点.

2、子节点：childNodes：childNodes 返回包含指定节点的子节点的集合

3、兄弟节点：nextSibling，previousSibling：nextSibling返回某节点的下一个兄弟节点，previousSibling返回某节点的上一个兄弟节点，没有的话返回null。

4、第一个或最后一个子节点：firstChild、lastChild

• firstChild返回node的子节点中的第一个节点的引用，没有返回null
• lastChild返回node的子节点中的最后一个节点的引用，没有返回null

@ cc