js第十一章 扩展DOM

1.选择符API

querySelector()

• 可以通过document 对象调用 document.querySelector() 会在文档范文内查找匹配元素
• 通过元素调用 document.body.querySelector() 会在元素范围内查找皮牌的元素

querySelectorAll()

• 调用的方式与querySelector()相同
• 返回的是nodeList实例

2.元素遍历

<ul>
     </li></li>
     <li></li>
</ul>

• 因为ie浏览器中ul的childNodes会显示2个子节点 其他浏览器会显示4个子节点 （两个空白文本节点）
• 所以新增dom元素的属性

  childElementCount  子元素节点的数量
   firstElementChild  第一个子元素节点
   lastElementChild最后一个元素节点
   previourElementSibing 前一个同胞元素
   nextElementSibling 下一个同胞元素

之前需要遍历元素

var child=element.firstChild;
while(child!==element.lastChild)
{
      if( child.nodeType===1)
      {
           操作元素
      }
      child=element.nextSibling;
}

现在遍历元素

var child=element.firstElementChild;
while(child!==element.lastElementChild){
    操作元素
    child=element.nextElementSibling;
}

3.插入标记

innerHtml属性
读取操作：返回的是所有子节点（包括元素节点 解释节点 文本节点）
写操作：写的节点会替换原来所有子节点

listone.innerHTML='<p>hello</p>'
现在变成
<li>
  <p> hello</P>
</li>

outerHtml属性
读操作：该节点 和所有子节点（包括元素节点 解释节点 文本节点）
写操作：写的节点会替换该节点及所有子节点
内存与性能

var str="";
for(var i=0;i<list.length;i++)
{
  str+="<li>"+i+"</li>"
}
ul.innerHtml=str;

innerText属性
读操作：返回的是所有文本节点
写操作：新的文本节点 替换所有文本子节点
outerText属性
读操作：返回的是该文本节点及所有子文本子节点
写操作：新文本节点替换所有子节点及该节点