javascript dom 基础

dom 即文档对象模型，是操作 html/xml 文档的一套方法。通过 dom 操作节点，使页面发生改变，是动态文档技术的核心内容

dom 的含义

1. dom 即 document object model，文档对象模型

2. javascript 中有三类对象

   本地对象 native object

   object function string number boolean
   error evalerror syntaxerror typeerror rageerror referenceerror urierror
   date regexp
   

   内置对象 built-in object

   global: 一类对象的统称，是虚拟的，代表全局
   任何方法和属性都在对象之下
   如 isnan()、parseint、number()、decodeurl() 等都是 global 下的方法
   如 math、infinity、nan、undefined 等都是 global 下的属性
   本地对象、内置对象是 ecmascript 的内部对象
   

   宿主对象 host object

   执行 js 的环境提供的对象，即浏览器对象
   window 对象 -> bom，不同浏览器间没有固定规范
   document 对象 -> dom，遵从 w3c 规范
   document 是 window 下的对象，即 bom 包含 dom
   

3. dom 是通过浏览器提供的一套方法来操作 html 和 xml 文档

元素和节点

1. 节点包含元素，元素是节点的一部分，即元素节点

2. 节点分类

   元素节点、属性节点、文本节点、注释节点、文档节点等

3. 元素即元素对象，有 htmldivelement、htmlinputelement、htmlhtmlelement，继承自构造方法 htmlelement，htmlelement 继承自 node，node 即节点对象

4. document 继承自构造方法 htmldocument 的原型，htmldocument 继承自 document 的原型

   document.__proto__ -> htmldocument.prototype 
   htmldocument.prototype.__proto__ -> document.prototype
   

获取元素

1. 通过 id 获取元素

   document.getelementbyid(); // 返回对应的 htmlelement 
   // 对于 getelementbyid()，ie8 及以下不区分大小写并且可以匹配 name
   

2. 通过类名获取元素集合

   document.getelementsbyclassname(); // 返回元素集合 htmlcollection
   // 兼容 ie8 及以上
   

3. 通过标签名获取元素集合

   document.getelementsbytagname(); // 返回元素集合 htmlcollection
   // 兼容 ie8 及以上
   

4. 通过 name 获取元素

   document.getelementsbyname(); // 返回元素集合 htmlcollection
   // 常用于表单元素
   

5. 通过选择器获取对象

   // 兼容 ie6 及以上，是 html5 新加入的 web api，但早就存在了
   document.queryselector(); // 返回选择器选中的第一个节点对象 node
   document.queryselectorall(); // 返回选择器选中的节点列表 nodelist
   // queryselector、queryselectorall 性能低
   // 使用 queryselectorall 返回节点列表，删除节点后，节点列表不变，不具有实时性
   

遍历节点树

1. parentnode

   获取父节点

   document.getelementsbytagname("html")[0].parentnode -> document
   // html 标签元素的 parentnode 是 document
   // *节点是 document，document 的父节点是 null
   

2. childnodes

   获取子节点集合

   document.getelementbyid("box").childnodes 
   // 包括元素节点、文本节点、注释节点在内
   

3. firstchild、lastchild

   获取第一个或最后一个子节点

   document.getelementbyid("box").firstchild // 第一个子节点
   document.getelementbyid("box").lastchild // 第二个子节点
   

4. nextsibling、previoussibling

   获取上一个或下一个兄弟节点

   document.getelementbyid("box").nextsibling // 上一个兄弟节点
   document.getelementbyid("box").previoussibling // 下一个兄弟节点
   

5. getattributenode()

   获取属性节点

   document.getelementbyid("box").getattributenode("id") // 获取属性节点 id
   

遍历元素节点

1. parentelement

   获取父元素节点，兼容 ie9 及以上

   document.getelementsbytagname("html")[0].parentelement -> null
   // html 标签元素的 parentelement 是 null
   

2. children

   获取子元素集合，兼容 ie8 及以上

   document.getelementbyid("box").children // 只包含元素节点
   document.getelementbyid("box").chilelementcount // children.length
   

3. firstelementchild、lastelementchild

   获取第或最后一个子元素节点，兼容 ie9 及以上

   document.getelementbyid("box").firstelementchild // 第一个子元素节点
   document.getelementbyid("box").lastelementchild // 第二个子元素节点
   

4. nextelementsibling、previouselementsibling

   获取下一个或上一个兄弟元素节点，兼容 ie9 及以上

   document.getelementbyid("box").nextelementsibling // 上一个兄弟元素节点
   document.getelementbyid("box").previouselementsibling // 下一个兄弟元素节点
   

节点的属性

1. nodename

   返回节点名称、只读
   元素节点，元素名称大写

   document.getelementbyid("box").nodename // div
   // 文本节点 -> #text
   // 注释节点 -> #comment
   document.nodename // #document
   // 文档节点 -> #document
   

2. nodevalue

   返回节点内容，可读写
   属性节点、文本节点、注释节点可用

   document.getelementbyid("box").getattributenode('id').nodevalue // box
   document.getelementbyid("box").getattributenode('id').value // 效果相同
   

3. nodetype

   返回节点类型对应数字，只读

   元素节点 1
   属性节点 2
   文本节点 3
   注释节点 8
   document 9
   documentfragment 11
   

   通过 nodetype 封装 childnodes，筛选出元素节点

   function childelementarray(node) {
       var arr = [],
           nodes = node.childnodes;
       for (var i = 0; i < nodes.length; i++) {
           var item = nodes[i];
           if (item.nodetype === 1) {
               arr.push(item);
           }
       }
       return arr;
   }
   

4. attibutes

   返回元素节点的属性节点组成的类数组

   document.getelementbyid("box").attributes[0].nodevalue // 获取第一个属性节点的 nodevalue
   

5. haschildnodes

   返回是否有子节点的布尔值

dom 结构树

graph tb a(node) --> b(document) a --> c(element) a --> d(characterdata) a --> e(attributes) b --> f(htmldocument) d --> g(text) d --> h(comment) c --> i(htmlelement) i --> j(htmlhtmlelement) i --> k(htmlheadelement) i --> l(htmldivelement) i --> m(html...element)

1. dom 结构树显示了构造方法的继承关系与原型链的走向

2. document 的原型被 htmldocument 继承，同样被 xmldocument 继承

3. characterdata 的原型是文本节点和注释节点的祖先

4. htmlelement 下有与标签对应的多种 html...element，用于构造元素节点

5. 需要注意的方法

   getelementbyid、getelementsbyname 只在 document 的原型上，只有 document 可以使用

   queryselector、queryselectorall、getelementsbyclassname、getelementsbytagname 在 document 和 element 的原型上都有，即 document 和元素节点对象都可以使用

   var box = document.getelementbyid("box");
   box.getelementbyid("list"); // 报错
   

6. 需要注意的属性

   document.bady 、document.head、document.title 继承自 htmldocoment 的原型

   document.documentelement 继承自 document 的原型

   document.bady; // body 标签元素
   document.head; // head 标签元素
   document.title; // title 元素内文字节点
   document.documentelement; // html 标签元素
   

节点相关操作

1. document.createelement()

   创建元素节点

   var div = document.createelement("div"); // 传入标签名
   

2. document.createtextnode()

   创建文本节点

3. document.createcomment()

   创建注释节点

4. document.createdocumentfragment()

   创建一个文档碎片，向其中添加节点，再将文档碎片插入文档中，可以提高性能

5. appendchild()

   在节点内部的最后添加子节点，并且具有剪切节点功能

   var div = document.createelement("div"),
       text = document.creaettextnode("文本");
   div.appendchild(text);
   document.body.appendchild(div);
   

6. insertbefore(a, b)

   在节点内部 a 节点之前插入 b 节点

   元素节点没有 insertafter 方法，可以进行封装

   element.prototype.insertafter = function (target, origin) {
       var after = origin.nextelementsibling;
       if (after) {
           this.insertbefore(target, after);
       } else this.appendchild(target);
   }
   // 兼容 ie9 及以上
   

7. removechild()

   从文档中删除子节点，但内存中依然保留空间占用

8. remove()

   节点调用，删除自身，可以释放内存

9. replacechild(a, b)

   用 a 节点替换子节点 b

10. innerhtml

    可以取值，可以赋值，并且赋值可以解析 html 代码

11. innertext

    可以取值，可以赋值，并且将赋值解析成文本节点，标签符号会被转码成字符实体

    firefox 老版本不支持，可使用功能相同的 textcontent

12. setattribute()，getattribute()

    设置、获取属性

    var div = document.createelement("div");
    div.setattribute('id', 'box');
    div.getattribute('id'); // 返回 box
    

13. dataset

    html5 中以命名 data- 开头的属性，可以通过 dataset 方法访问

    // <p data-name="jett" data-age="22"></p>
    document.getelementsbytagname("p")[0].dateset // {name: 'jett', age: '22'}
    // 兼容 ie9 及以上