JavaScript(二十三) DOM继承树，DOM基本操作

上节讲到的节点类型也被用为查找的基本操作

IE不支持全说的是IE9及以下，IE10以上全部遵循W3C标准

1. DOM继承树

代表的就是一系列的继承关系

1. 大写的Document，你可以理解成构造函数（函数里只有构造函数需要首字母大写），但是你不能new它，它是留给系统留给自己new的

作用：大的Document可以作为小的document的原型，在大的上填一个属性，从小的里可以访问

但是大的Document，不是直接构造小的document的，正经说小的document的原型是HTMLDocument

 

两者关系：Document.prototype是HTMLDocument.prototype的原型

HTMLElement下面的那一系列分支，相当于里面标签的原型，例：在HTMLBodyElement里面添加一些东西，都能在Body里面显示，别的标签如Head里就不会显示

2. DOM基本操作

2.1 还是查（与前面链接）

 补充 ：括号里面可以填*，按通配符选择器看，选出所有标签

4.下面两个里头分别存的就是body和head标签

 5.

 例：封装函数，返回元素e的第n层祖先元素节点

 例2：编辑函数，封装myChildren功能，解决以前部分浏览器的兼容性问题

从子节点里挑出元素节点（如何区分元素节点和其他节点）

 例3：自己封装hasChildren()方法，不可用children属性

 例4：

 for循环和if可以没有执行体，加分号就行，下面是为了解决IE兼容问题加的

if后面加的0强制程序走到else，加0是为了解释清楚，正经完整代码如下，不加0，如果是IE9以下的直接跳到else里面了

for里加e是为了不报错，往下走3个的时候没有元素节点了，null.nodeType会报错，加e为了容错，看e是否还有意义

 2.2 增

1.  括号里面填啥创建啥（创建元素节点的）重点

appendChild在我这个容器里面加入一个东西

 2. 创建文本节点 

3. 创建注释节点

 2.3 插

 1.appendChild()；重点

任何一个元素节点都有这个appendChild方法，可以理解成push，在数组的最后一位插入新东西，一个意思

如上 ，span就会出现在文字的后面

把一个页面里已有的部分放到另一个已有的里面就是剪切了

示例1：

 示例2：span和div本来是兄弟关系，下面的操作把span放div里面去了，再次说明剪切操作

 2. insertBefore(a,b)；重点

一定要父级调用，往父级自己里头插入元素

这么读：insert  a  Before  b 

例：刚开始html里面只有div和span，第三行创建了一个strong，下图的var都是把div和span选出来（万一有很多的话，选出来第几个要进行插入操作的）

结果strong应该出现在span前面

 2.4 删（两种：别人谋杀和自杀）

第一种：父节点删除自己的子节点，把这个child写里头就完事了

例：把div里面的i标签删除，其实是剪切出去了

第二种：这个节点自己调用了一个方法删除自己，这个是真销毁

 

 2.5 替换

 

 2.6 元素节点一些属性

 例：div.innerHTML,把div里面的内容取出来，往div里面添加内容直接覆盖原来的

下面+=是追加 

innerText把里面的文本内容取出来，不取里面的标签，还可以赋值（把里头的所有东西（包括标签）全覆盖了）

 2.7 元素节点的一些方法

想给div设置一个行间属性

 

 取行间属性的值

例题：

最简单的方法，创建一个div，然后div.innerHTML“   全手写进去”

补充：下面这东西可以直接改变class