document对象

  1. document.getElementsByClassName ie8以及一下版本都不支持
  2. document.getElementsByTagName  所有版本都支持
  3. document.getElementsByName  不常用 <input type='text' name='username'>
  5. querySelector和querySelectorAll的缺点不是兼容性问题,性能不是很好，不实时
  6. var div1=document.querySelector('div>p') ie7一下不兼容
  7. div1.style.color='red'
  8. 如果有多个，querySelector只会选择一个，直接返回的就是一个对象
  9. docuemnt.querySelectorAll(css选择器) 返回一个类数组
  11. var divs=document.querySelectorAll('div')
  12. console.log(divs)
  13. divs[0].remove();
  14. console.log(divs);//打印的div数组长度并未减少，用getElementsByTagName长度则会减少

节点

image.png

  1.  <ul>
  2.        <li>
  3.             <h2>我是标题标签</h2>
  4.             <a href="">超链接</a>
  5.             <p>我是段落标签</p>
  6.         </li>
  7.    </ul>
  8.     var a=document.getElementsByTagName('a')[0]
  9.   console.log(a, a.parentNode)

image.png

childNodes firstChild lastChild nextSibling previousSibling

  1. childNodes返回的结果有
  2. 1.文本节点=1
  3. 2.属性节点=2
  4. 3.文本节点=3
  5. 4.注释节点 comment=8
  6. 5.document=9
  7. 6.documentFragment=11
  8.  <ul>
  9.        <li>
  10.                       /*注释*/
  11.             <h2>我是标题标签</h2>
  12.             <a href="">超链接</a>
  13.             <p>我是段落标签</p>
  14.         </li>
  15.    </ul>
  16.     var li=document.getElementsByTagName('li')[0];
  17.     console.log(li.childNodes)
  18.     console.log(li.firstChild)
  19.     console.log(li.lastChild)
  20.     console.log(li.nextSibling) li下一个节点
  21.     console.log(li.previousSibling) li上一个节点

image.png

parentElement 父元素 children

  1. parentElement和parentNode的区别是html标签 <html>.parentNode是document，parentElement是null
  2.  console.log(li.children)
  3. childElementCount=children.length

image.png
image.png
image.png

  1. parentElement IE9及一下不支持 所以一下基本上都不怎么用
  2. children IE7及一下不支持
  3. IE9及以下不支持
  4. childElementCount=children.length 
  5. firstElementChild lastElementSibling
  6. previousElementSiblingnextElementSibling