DOM学习笔记（二）

使用DOM

DOM中的每个元素都有一组属性和方法，它们提供有关它们在DOM中的关系的信息：

element.childNodes 返回一个元素的子节点的数组。

element.firstChild 返回元素的第一个子节点。

element.lastChild 返回元素的最后一个子节点。

element.hasChildNodes 如果元素有任何子节点，则返回 true，否则为 false 。

element.nextSibling 返回相同树级别的下一个节点。

element.previousSibling 返回在同一树级别的上一个节点。

element.parentNode 返回元素的父节点。

例如，我们可以选择元素的所有子节点并更改其内容：

首先先写出页面原有的东西，如下

    

一些文本

    

另一些文本

随后用DOM来更改页面内容，如下：

var a = document.getElementById("demo");

var arr = a.childNodes;

    for(var x=0;x

        arr[x].innerHTML = "新的文本";

    }

现在你可以在页面上看见原先的文字都被替换成立新的文本这四个字了

改变属性

选择要使用的元素后，您可以更改其属性。

正如我们在以前的课程中看到的，我们可以使用 innerHTML 属性更改元素的文本内容。

同样，我们可以改变元素的属性。

例如，我们可以更改图像的 src 属性：

实际上，可以使用JavaScript更改元素的所有属性。

更改样式

注：这个类型本小白经常用到的终于学到了

HTML元素的样式也可以使用JavaScript进行更改。

可以使用元素的 style 对象来访问所有样式属性。

例如:

一些文本

这部分改变了文本的颜色和宽度。

提示: 所有CSS属性都可以使用JavaScript进行设置和修改。请记住，您不能在属性名称中使用破折号（ - ）：这些替换为驼峰写法，其中复合词以大写字母开头 比如: background-color属性应该被写为 backgroundColor。

添加和移除元素

使用以下方法创建新节点：

element.cloneNode() 克隆元素并返回结果节点。

document.createElement(element) 创建一个新的元素节点。

document.createTextNode(text)创建一个新的文本节点。

例如:

var node = document.createTextNode("一些新的文本");

这将创建一个新的文本节点，但它将不会出现在文档中，直到您使用以下方法之一将其附加到现有元素：

element.appendChild(newNode)将一个新的子节点添加到元素作为最后一个子节点。

element.insertBefore(node1, node2)在节点2之前插入node1作为子节点。

例如:

一些文本

要删除HTML元素，您必须选择元素的父项并使用removeChild(node)方法。

例如:   要从从页面中删除 id ="p1" 的段落。

        

这是一个段落.

        

这是另外一个段落.

提示: 实现相同结果的另一种方法是使用 parentNode 属性来获取要删除的元素的父项：

var child = document.getElementById("p1");

child.parentNode.removeChild(child);

替换元素

要替换HTML元素，使用 element.replaceChild(newNode,oldNode)方法。

例如:        下面的代码创建一个替换现有 p1 段落的新段落元素。

        

这是一个段落

        

这是另一个段落