JS之DOM *** 作

DOM： Document Object Model，文档对象模型；js提供了丰富的api来 *** 作文档内容。

DOM树： html文档中的内容是以树形结构排布，html是DOM树根，html下只有两个子标签head、body

节点： DOM将所有的分支端都成为节点。节点有很多类型，常见的节点类型有：文本节点、元素节点。

可以通过 nodeType查看节点类型 ： 1元素节点、3文本节点

特殊的元素节点：

1、html元素

2、body元素

3、head元素

节点 *** 作的api（属性和方法）

1、nodeName：只读属性，可以读取节点名称

2、nodeType：只读属性，读取节点类型

3、 hasChildNodes()：判断调用方法的节点是否存在子节点，存在返回true，不存在返回false。

主流浏览器会将换行符、制表符、空格当做文本节点处理，IE9以下会忽略它们。

4、childNodes：只读属性，获得节点的子节点集合，子节点集合是一个类数组结构，有数组特点无数组方法

5、firstChild：获得节点的第一个子节点

6、lastChild：获得节点的最后一个子节点

7、querySelector()：

参数：string类型，css选择器

作用：获得文档中第一个符合选择器条件的节点

兼容：在IE9以下不支持

8、 querySelectorAll()： // 获得的都是静态集合

参数：string类型，css选择器

作用：获得文档中所有符合选择器条件的节点集合（类数组结构）

兼容：在IE9以下不支持

注意： querySelector() 和 querySelectorAll() 得到的都是元素节点。

9、previousSibling：获取节点的前一个兄弟节点

10、nextSibling：获取节点的后一个兄弟节点

11、parentNode：获得节点的父节点（父节点一定是元素节点）

12、removeChild()：节点删除它的指定子节点

DOM *** 作元素：暂时不用的隐藏、一定不用的删除。

13、cloneNode()：克隆一个节点

参数：boolean类型，true深克隆，false浅克隆，默认浅克隆

深克隆：不仅克隆节点和节点的属性，还会克隆节点的子节点

浅克隆：只克隆节点和节点的属性，不会克隆节点的子节点

14、areplaceChild(b,c)：用b替换c

其中a是c的父节点，c是文档上已经存在的节点，b可以是节点也可以是已存在节点，被替换的节点会从文档结构中删除。

15、areplaceWith(b)：用b替换a

a已存在的节点，b可以是新节点也可以是已存在节点，被替换的节点从DOM树删除。

16、ainsertBefore(b,c)：在c前面插入b

其中，a是c的父节点，c是已经存在的节点，b是新节点

17、aappendChild(b)：在a末尾追加b

a是父节点，b是a的子节点, c是子节点

元素节点的相关api

1、getElementsByTagName()：根据标签名获得元素集合（类数组结构）

区别：HTMLCollection 是动态集合，NodeList 是静态集合。

2、createElement()：根据标签名创建新元素

3、id：读写属性，可以读取或设置元素的id值

4、className：读写属性，可以读取或设置元素的class值

5、classList：读取标签的类名集合（类数组结构）

add()：为元素新增类名，如果类名已存在不会重复添加

remove()：删除元素指定类名，如果类名不存在不会执行 *** 作

元素的属性分为两类：

一类是元素本里就拥有的属性，例如：id、class、style、src、herf、target、alt、title、type、value等等，这些属性可以在js中直接通过语法读取或设置。

再一类是我们为了解决问题给元素添加的自定义属性，这些属性在js中无法直接通过语法读取，需要通过 *** 作方法访问。

6、setAttribute(name,value)

参数：name表示要设置的属性名，value要为属性设置的值

无返回值

7、getAttribute(name)

参数：name表示要读取的属性名

返回值：返回属性的值，如果属性不存在会返回null

8、removeAttribute(name)

参数：name表示要删除的属性名

无返回值

说明：setAttribute()、getAttribute()、removeAttribute()都可以 *** 作元素的本地属性和自定义属性。

element拓展：

兼容：以下属性、方法在IE9以下不支持。

1、children：读取元素的所有元素子节点集合（类数组）

2、parentElement：读取元素的父元素节点

3、previousElementSibling：读取前一个元素兄弟节点

4、nextElementSibling：读取后一个元素兄弟节点

5、firstElementChild：读取第一个元素子节点

6、lastElementChild：读取最后一个元素子节点

7、remove(): 将调用方法的元素从DOM结构中删除

通过IntegervalueOf(String)方法把string转换成int方法。

例如：

<%

String str = "13";//定义一个字符串str

int a = IntegervalueOf(str);//把字符串转换成整型a

%>

解释：

valueOf方法将传入的参数String转化为int型值

返回该值,如果String并不是纯粹由数字构成即无法转化为数字,则抛出NumberFormatException

1 可以拷贝

2 因为Javascript提供了cloneNode()方法，可以用于复制一个节点及其所有后代节点，并返回复制后的节点。

3 使用cloneNode()方法可以实现DOM树的拷贝，同时也可以进行一些其他的 *** 作，例如可以将拷贝的节点插入到指定位置等。

需要注意的是，cloneNode()方法只能复制节点的内容，但不能复制节点的事件处理程序等其他属性。

以上就是关于JS之DOM *** 作全部的内容，包括:JS之DOM *** 作、jsp里如何用强制类型转换把string类型转换成int型、js可以将dom树拷贝下来吗等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！