原生javascript中的Dom操作中的增删改查

查找

1. 已经站在一个节点上，找周围相邻的元素 遍历节点父子关系
   parentNode
   parentElement
   childNodes
   children
   都返回动态集合
   firstChild
   firstElementChild
   lastChild
   lastElementChild
   兄弟关系
   previousSibling
   previousElementSibling
   nextSibling
   nextElementSibling
   强调:
   节点树
   缺：
   会受到空文本的干扰
   优:
   包含所有网页内容
   没有兼容性问题
   元素树
   优:
   不受空文本的干扰
   缺:
   只包含元素节点
   除children外，都有兼容性问题。
   2.在整个页面或在指定父元素下，根据html或选择器查找元素
   如果通过标签或一个属性即可获得想要的元素时 按HTML查找
   按Id
   var elem=document.getElementById("id");
   按TagName
   var elems=parent.getElementsByTagName("标签名");
   按Name
   var elems=parent.getElementsByName("name");
   按ClassName
   var elems=parent.getElementsByClassName("class")
   除ById外，都返回动态集合
   不仅查找直接子元素，而且查找所有子代元素
   如果经过复杂的选择逻辑，才能获得想要的元素时
   按选择器查找
   仅找一个元素
   var elem=parent.querySelector("选择器");
   可能找到多个元素
   var elems=parent.querySelectorAll("选择器")
   返回非动态集合
2. 可直接获取的节点
   html
   document.documentElement
   head
   document.head
   body
   document.body 修改

操作节点内容html原代码innerHTML没有兼容性问题
去掉标签后的纯文本textContent
DOM
IE8
innerText
操作节点属性
标准属性
attribute特性 在开始标签中显式定义的
核心DOM
getAttribute("属性名")
setAttribute("属性名","值")
HTML DOM
elem.属性名
property属性
内存中元素对象的属性
elem.属性名
自定义属性
核心DOM
getAttribute("属性名")
setAttribute("属性名","值")
HTML5
定义属性时
data-属性名="值"
访问
elem.dataset.属性名
操作节点样式
内联样式
elem.style.属性名
今后只要修改一个元素的样式都要用style
计算后的样式var style=getComputedStyle(elem); style.属性名
只读
只要获得一个元素完整样式，就用getComputedStyle
样式表中的样式
var sheet=document.styleSheets[i]
var rule=sheet.cssRules[i]
rule.style.属性名

添加和删除节点

添加元素
3步

1. 创建空元素对象
   var a=document.createElement("a")
2. 设置关键属性
   a.href="http://imooc.con" a.innerHTML="go to imooc";
3. 将新元素添加到指定父元素下
   追加
   parent.appendChild(child)
   插入
   parent.insertBefore(child,oldElem)
   替换节点
   parent.replaceChild(child,oldElem);
   优化
   尽量少操作DOM树
4. 如果同时添加父元素和子元素
   在内存中先将子元素添加到父元素，再将父元素整体挂到页面
5. 如果父元素已经在页面上，需要添加多个平级子元素时
   3步
   1. 创建文档片段
      var frag=document.createDocumentFragment();
   2. 将子元素添加到文档片段
      frag.appendChild(child);
   3. 将文档片段添加到页面父元素下
      parent.appendChild(frag)
      删除
      parent.removeChild(child);
      child.parentNode.removeChild(child)