DOM的概念及子节点类型-1

昨天同事给了我一份JS题目练练,其实都是一些基础题,然而我都不会啊 大哭
有一道题印象比较深刻:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function A() {
var a;
}

function B(a) {
this.a = a;
}
function C(a) {
if (a) {
thia.a = a;
}
}
A.prototype.a = 1;
B.prototype.a = 1;
C.prototype.a = 1;
console.log(new A());
console.log(new B());
console.log(new C(2));

看到这个 prototype 我直接就懵逼了
于是,得恶补下JS基础知识了
这个就算是我的一个笔记吧!笔记! 笔记! 笔记! 看不懂的勿喷 大哭
今天开始学习点DOM的东西,虽然之前看过,然而却不扎实,所以,你懂的

前面巴拉巴拉了一大堆,主题开始了!!!

先说下概念吧

DOM:document object Model 文档对象模型
文档:html页面
文档对象:页面中的元素
文档对象模型:一套标准,定义,为了能够让程序(JS)去操作页面的元素
DOM会把文档看成是一棵树,同时定义了很多方法来操作这棵树中的每一个元素(节点)
getElementById()
getElementsByTagName()
document
document.body

1
2
3
4
5
6
7
8
9
10
11
<body>
<div>
<p>1111111</p>
<ul>
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>
</div>
</body>

DOM树 每一个标签称之为节点
那么来,举个例子

1
2
3
4
5
6
7
8
<body>
<ul id="ul1" style="background: #ccc;">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var oUl = document.getElementById('ul1');
/*
childNodes: 属性,不需要加括号,属性,肯定是某个对象底下的,所以写的时候不能只写 childNodes,要写 元素.childNodes
childNodes: 子节点列表(只读),这个单词 可以采用分开记的方法 child 孩子,node节点,并且带了个s,代表有多个节点,子节点列表集合,跟数组一样,要加下标[]

DOM节点的类型有很多种,总共有12种

在DOM定义当中,有一种叫做文本节点,回车换行也是一种文本节点
在标准浏览器中:包含了文本和元素类型的节点
非标准浏览器下:只包含元素类型的节点
*/

alert(oUl.childNodes.length); // 在标准浏览器下弹出9,非标准浏览器弹出4,有兼容性问题

// 如果要给li加背景色,那么这样在标准浏览器下是有问题的。直接就报错了。
for(var i=0;i<oUl.childNodes.length;i++){
this.style.background = '#ccc';
}
// 那么在DOM中有一个方法叫 nodeType,元素.nodeType: 只读属性 -- 当前元素的节点类型
alert(oUl.nodeType);
// 在W3C里面提到:元素节点代表1,属性节点代表2,文本节点代表3
// 还有一个叫 属性节点
// 元素.attribute: 只读 属性,属性列表的集合
alert(oUl.attributes[0].name) // 弹出id
alert(oUl.attributes[0].nodeType) // 弹出2

那么如果要解决给li添加背景色的兼容问题的话,可以利用nodeType来判断是否元素节点

1
2
3
4
5
for(var i=0;i<oUl.childNodes.length;i++){
if(oUl.childNodes[i].nodeType == 1){
oUl.childNodes[i].background = '#ccc';
}
}

咱们接着改造下代码

1
2
3
4
5
6
7
8
<body>
<ul id="ul1" style="background: #ccc;">
<li>11111<span>哈哈哈哈</span></li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>
</body>

1
2
var oUl = document.getElementById('ul1');
alert(oUl.childNodes.length;); // 弹出9

由此可以说明,childNodes只包含一级子节点,不包含孙子节点
继续改造代码

1
2
3
4
5
6
7
8
9
<body>
<ul id="ul1" style="background: #ccc;">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<p>555555</p>
</ul>
</body>

1
2
var oUl = document.getElementById('ul1');
alert(oUl.childNodes.length;); // 标准浏览器下弹出11,IE8弹出5,IE7弹出4

所以,得出一个结论:
在标准浏览器中:包含了文本和元素类型的节点,也会包含非法嵌套的子节点
非标准浏览器下:只包含元素类型的节点,IE7下不会包含非法嵌套的子节点
当然说了这么多,其实是不推荐大家使用这个属性,因为这个东西兼容性太多。在正式使用会使用另一个属性:children

元素.children: 只读属性,子节点列表集合
标准下:只包含元素类型的节点
非标准下:只包含元素类型的节点

1
2
3
4
5
6
7
8
9
<body>
<ul id="ul1" style="background: #ccc;">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<p>555555</p>
</ul>
</body>
1
2
var oUl = document.getElementById('ul1');
alert(oUl.children.length;); // 标准浏览器下弹出4,IE7弹出4(跟IE7的渲染有关)

以上就是childNodes和children的一些概念~~
未完待续……
子节点和兄弟节点的操作