JavaScript的DOM操做

时间 2019-12-09

标签 javascript dom 栏目 JavaScript 繁體版

原文原文链接

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。html

HTML文档能够说由节点构成的集合，DOM节点有:node

1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。数组

2. 文本节点:向用户展现的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。app

3. 属性节点:元素属性，如<a>标签的连接属性href="http://www.imooc.com"。函数

节点属性：spa

在文档对象模型 (DOM) 中，每一个节点都是一个对象。DOM 节点有三个重要的属性：code

1. nodeName : 节点的名称htm

2. nodeValue ：节点的值对象

3. nodeType ：节点的类型ip

1、nodeName 属性: 节点的名称，是只读的。

1. 元素节点的 nodeName 与标签名相同

2. 属性节点的 nodeName 是属性的名称

3. 文本节点的 nodeName 永远是 #text

4. 文档节点的 nodeName 永远是 #document

2、nodeValue 属性：节点的值

1. 元素节点的 nodeValue 是 undefined 或 null

2. 文本节点的 nodeValue 是文本自身

3. 属性节点的 nodeValue 是属性的值

3、nodeType 属性: 节点的类型，是只读的。如下经常使用的几种结点类型:

元素类型节点类型

元素 1

属性 2

文本 3

注释 8

文档 9

1、getElementsByName()方法

返回带有指定名称的节点对象的集合。

语法：

document.getElementsByName(name)

与getElementById() 方法不一样的是，经过元素的 name 属性查询元素，而不是经过 id 属性。

注意:

1. 由于文档中的 name 属性可能不惟一，全部 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

2. 和数组相似也有length属性，能够和访问数组同样的方法来访问，从0开始。

2、getElementsByTagName()方法

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

语法:

getElementsByTagName(Tagname)

说明:

1. Tagname是标签的名称，如p、a、img等标签名。

2. 和数组相似也有length属性，能够和访问数组同样的方法来访问，因此从0开始。

3、getAttribute()方法

经过元素节点的属性名称获取属性的值。

语法:

elementNode.getAttribute(name)

说明:

1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。

2. name：要想查询的元素节点的属性名字

4、setAttribute()方法

setAttribute() 方法增长一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

语法：

elementNode.setAttribute(name,value)

说明：

1.name: 要设置的属性名。

2.value: 要设置的属性值。

注意：

1.把指定的属性设置为指定的值。若是不存在具备指定名称的属性，该方法将建立一个新属性。

2.相似于getAttribute()方法，setAttribute()方法只能经过元素节点对象调用的函数。

5、插入节点appendChild()

在指定节点的最后一个子节点列表以后添加一个新的子节点。

语法:

appendChild(newnode)

参数:

newnode：指定追加的节点。

6、插入节点insertBefore()

insertBefore() 方法可在已有的子节点前插入一个新的子节点。

语法:

insertBefore(newnode,node);

参数:

newnode: 要插入的新节点。

node: 指定此节点前插入节点。

7、删除节点removeChild()

removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

语法:

nodeObject.removeChild(node)

参数:

node ：必需，指定须要删除的节点。