DOM继承树，基本操作(精简版)

对节点进行查询

• doaument代表整个文档

• document.getElemnetByID();
  var div = document.getElemnetByID();//元素id在IE8以下的浏览器不区分大小写，而且返回匹配name值的元素

• document.getElementsByTagName();//通过标签名查找 实时的
  var div = document.getElementsByTagName("div");//类数组（DOM所生成的大多为类数组）

• document.getElementsByName();//返回带有给定name特性的所有元素。常用来取得单选按钮。

  非实时：css选择器。IE7及以下版本没有。选择出来的元素不是实时的，是副本。

• document.querySelector();

var strong = document.querySelector("div>span strong.demo");//选择div直属span下class名为demo的strong标签

• document.querySelectorAll();//css选择器。IE7及以下版本没有。选择出来的元素不是实时的，是副本。

遍历节点树

• parentNode：父节点（最顶端parentNode为”#document”）
• childNode: 子节点

        <div>
            123
            <!-- comment-->
            <strong></strong>
            <span></span>
        </div>

        <script>
        var div = document.getElementsByTagName("div")[0];
        console.log(div.childNodes.length); //7个节点
        </script>

• firstChild:第一个子节点；lastChild:最后一个子节点
• nextSibling：后一个兄弟节点 previousSilbing:前一个兄弟节点

遍历元素节点树（除children，IE9以下不兼容）

• parentElement：返回当前元素的父元素节点
• children：只返回当前元素的元素子节点
• firstElementChild:第一个子元素
• lastElementChild:最后一个子元素
• previousElementSibling:指向前一个同辈元素
• nextElementSibling:指向后一个同辈元素

节点四个属性

• nodeName 元素标签名，大写形式，只读
• nodeValue:text节点或Comment节点的文本内容，可读写
• nodeType:该节点的类型，只读
• attributes:Element节点属性集合
• hasChildNodes:返回true或false

DOM结构树

DOM基本操作

• getElementById方法定义在Document.prototype上，即Element节点上不能使用。
• getElementsByName方法定义在HTMLDocument.prototype上，即非html中的document不能使用（xml document,Element）
• getElementsByTagName方法定义在Document.prototype和Element.prototype上
• HTMLDocument.prototype定义了一些常用属性，body，head分别指HTML文档中的标签
• Document.prototype上定义了documentElement属性，指代文档的根元素，在HTML文档中，它总指代元素
  document.documentElement代表html
• getElementsByClassName、querySelectorAll、querySelectorAll在Document.prototype,Element.prototype类中均有定义

增

• document.createElement();//创建元素节点
  var div = document.createElement('');
• document.createTextNode();//创建文本节点
• document.createComment();//创建注释
• document.createDocumentFragment();

插

• PARENTNODE.appendChild();
• PARENTNODE.insertBefore();//插在前面
  div.insertBefore(a,b);//在div下的a插入在b之前

删

• parentNode.removeChild();//剪切式删除,返回删除的标签
• child.remove();//销毁，无返回值

替换

• parentNode.replace(new,orgin);

Element节点属性

• innerHTML

<div></div>
var div = getElementByTagName('div')[0];
div.innerHTML = "123";//div的内容变为123
div.innerHTML += "456";//div的内容变为123456
div.innerHTML = "<span style='background-color:red;'>123</span>";//可写样式

• innerText
  可赋值，但会覆盖结构和文本；可取文本内容

Element节点上的方法

• setAttribute(“属性名”，”属性值”)；//添加行间属性（可以自定义属性）
• getAttribute(‘属性名’)；//读取行间属性值

DOM基础知识（详细）