DOM选择器，节点类型（学习笔记）

DOM的基本操作

1.对节点的增删改查

查

查看元素节点

document代表整个文档 // 单独的写document代表整个文档在js显示形式（html却不是，只是html文档的根标签）

docuemnt.getElementById() // 元素id在IE8以下的浏览器，不区分大小写，而且也返回匹配的name属性元素尽量少用

.getElementsByTagName() // 标签名兼容性比较强

.getElementsByName() // 需注意，只有部分标签name可生效（表单，表单元素，img，iframe）获取类似数组的数据

.getElementsByClassName() // 类型->ie8和ie8以下的ie版本中没有，可以多个class一起

.querySelector() // css选择器，（在ie7和ie7以下的版本中没有，取出来的值不是实时的）选择出来的值是一个

.querySelectorAll() // css选择器，（在ie7和ie7以下的版本中没有，取出来的值不是实时的）选择出来的值是一组

注意：

1）. 实时性问题

var div = document.getElementsByTagName('div');

var demo = document.getElementByClassName('demo')[0];

var newDiv = document.createElement('div');

document.body.appendChild(newDiv);

***************************************************************************

var div = document.querySelectorAll('div'); // 不是实时的,静态的，取出来的是副本（queryselector,querySelectorAll）就是说，在查询之后，将它的其中一个值删除，但是在短时间内div中还是原来的元素，不能够及时的看到被删除掉

var demo = document.getElementsByClassName('demo')[0]; // demo.remove()之后，div内仍是原来的个数有点类似镜像的感觉

1.1.遍历节点树（兼容性比较强）

parentNode ->父节点（最顶端的是parentNode为#document） // 一个元素只有一个父节点

childNodes ->子节点们 // 一个元素可以有多个子节点（类数组，直系子元素）

firstChild ->第一个子节点

lastChild->最后一个子节点

nextSibling->后一个兄弟节点

preiousSibling->前一个兄弟节点

注意：遍历节点树(参照后面的节点类型)

<div>

12343534

<strong></strong>
       <span></span>
   </div>

==>var oDiv = document.getElementsByTagName('div')[0];

oDiv.childNodes.length; // 7个子节点

1>.开始标签与注释之间都属于文本节点（ ‘12343534’属于文本内内容，即使‘12343534’没有，二者之间也有是文本节点,（空格文本，回车文本，文本））。

2>.注释是属于注释节点

3>.注释与<strong>标签之间属于文本节点

4>.<strong></strong>属于元素节点

5>.</strong>与<span>开始标签之间属于文本节点

6>.<span></span>属于元素节点

7>.</span>尾标签与</div>之间是文本节点

1.2.基于元素节点树的遍历（灵活性比较强）

parentElement->返回当前元素的父元素节点（IE不兼容）

children ->只返回当前元素的元素子节点(元素节点树除了这个以外，IE9以下都不兼容)

node.childElementCount ===node.children.length 当前元素节点的字元素长度

firstElementChild ->返回的是第一个元素节点（IE不兼容）

lastElementChild ->返回的是最后一个元素节点（IE不兼容）

nextElementSibling/previousElementSibling ->返回后一个/前一个兄弟元素节点

注意：跟节点不一样，这个是不包含文本节点的。

1.3.节点的类型

元素节点------>1

属性节点------>2

文本节点------>3

注释节点------->8

document------>9

DocumentFragment------>11

1.4节点的四个属性

nodeName

元素的标签名，以大写形式表示，只读

nodeValue

text(文本节点)节点或Comment(注释节点)节点的文本内容，可读写

nodeType

该节点的类型，只读（参照上面1.3）返回值是（1，2，3，8，9，11）

attributes

element节点的属性集合

1.5节点的一个方法 Node.hasChildNodes();

（http://www.w3school.com.cn/xmldom/index.asp）

DOM选择器，节点类型（学习笔记）

猜你喜欢