节点属性

nodeName

  1. 元素节点的nodeName 是大写

  2. 只读不可修改

    1. var div =  document.getElementByTagName('div')[0]
    2. console.log(div);

    image.png

    nodeValue

  3. 文本节点

  4. 属性节点
  5. 注释节点
  6. 元素节点没有nodeValue
  7. 可修改

  8. image.png

    nodeType

  9. 元素节点 1

  10. 属性节点 2
  11. 文本节点 3
  12. 注释节点 8
  13. documen 9
  14. DocumeFragment 11
  15. 只读

  16. image.png

    attributes,getAttributes

  17. 可修改

  18. image.png

    hasChildNodes

  19. 有没有子节点

  20. 文本节点包含在内，换行在内
  21. 返回值 布尔值

    封装

    1. //获取某个节点下的所有子节点 
    2. //遍历节点的节点类型
    3. function elemChild(node){
    4. var arr = [],//存放数组
    5.     children =node.childNodes;//节点下的所有子节点
    6. for(var i = 0;i < children.length; i++){
    7.   if(children[i].nodeType === 1){
    8.       //如果节点下的字节点是元素节点就push到arr;
    9.       arr.push(children[i]);
    10.   }
    11. }
    12. return arr;
    13. }

    类数组

    1. //类数组
    2. function elemChildren(node){
    3.   var temp = {
    4.       'length':0,//长度初始化为0
    5.       'push':Array.prototype.push,//添加一个数组原型上的push方法
    6.       'splice':Array.prototype.splice// 添加一个数组原型上的splice方法
    7.   },
    8.       len = node.childNodes.length;
    9.   for(var i = 0; i<len; i++){
    10.       var children =  node.childNodes[i];
    11.           if(children.nodeType === 1){
    12.               // temp[temp['length']] = children
    13.               // temp['length']++;
    14.               // 使用push的时候 length会自动++
    15.               temp.push(children);
    16.           }
    17.   }
    18.   return temp;
    19. }

Document

  1. 构造函数

  2. document 的构造函数HTMLDocuemnt

    DOM 树结构

    Document

    1. HTMLDocument

    2. XMLDocument

      Charactor

    3. Text

    4. Comment

      Element

    5. HTMLElement

    6. XMLElement

      DOM 操作

      getElementById

    7. 定义在Document.prototype上

    8. XML 它也可以使用

      getElementByName

    9. 定义在Document.prototype上

      getElementByClassName,getElementByTagName,querySelector querySelectorAll

    10. Document.prototype有

    11. Element.prototype 也有

      通配符 *

      head,body

    12. HTMLDocument.prototype->body,head

    13. 可以通过document直接访问

    14. document.title -> 获取文本

      document.documentElement

    15. Document.prototype->documentElement

    16. 获取整个html文档