DOM对象

45 阅读2分钟

DOM,全称“Document Object Model(文档对象模型)”,它是由W3C组织定义的一个标准。

一、DOM节点属性

属性说明
parentNode获取当前节点的父节点
childNodes获取当前节点的子节点集合
firstChild获取当前节点的第一个子节点
lastChild获取当前节点的最后一个子节点
previousSibling获取当前节点的前一个兄弟节点
nextSibling获取当前节点的后一个兄弟节点
attributes元素的属性列表

二、DOM节点操作

在JavaScript中,可以通过以下2种方式来选中指定元素:

(1)getElementById();

在JavaScript中,如果想通过id来选中元素,我们可以使用document对象的getElementById()方法。

getElementById()方法类似于CSS中的id选择器。

语法:

document.getElementById("元素id")

(2)getElementByName();

在JavaScript中,如果想通过name来选中元素,我们可以使用document对象的getElementsByName()方法。

语法:

document.getElementByName("表单元素name值”)

除了getElementById()和getElementsByName()这两种方法,JavaScript还提供另外一种getElementByTagName()方法,这个方法类似于CSS中的元素选择器。但是getElementByTagName()方法有个很大缺点,它会把整个页面中相同的元素都选中。用起来也比较麻烦,实际开发中很少用到。

1.创建节点

在JavaScript中,创建新节点都是先用document对象中的createElement()和createTextNode()这2种方法创建一个元素节点,然后再通过appendChild()、insertBefore()等方法把新元素节点插入现有的元素节点中去。

语法:

var e =document.creatElement("元素名”);
var txt = document.creatTextNode("元素内容");
e.appendChild(t);

2.插入节点

在JavaScript中,插入节点有2种方法:appendChild()和insertBefore()。

(1)appendChild()

在JavaScript中,我们可以使用appenChild()方法把新的节点插入到当前节点的“内部”。

语法:

obj.appendChild(new)

(2)insertBefore()

在JavaScript中,我们可以使用insertBefore()方法将新的子节点添加到当前节点的“末尾”。

语法:

obj.insertBefore(new,ref)

3.删除节点

在JavaScript中,我们可以使用removeChild()方法来删除当前节点下的某个子节点。

语法:

obj.removeChild(oldChild);

4、复制节点

在JavaScript中,我们可以使用cloneNode()方法来实现复制节点。

语法:

obj.cloneNode(bool)

说明:

参数obj表示被复制的节点,而参数bool是一个布尔值,取值如下:

(1)1或true:表示复制节点本身以及复制该节点下的所有子节点;

(2)0或false:表示仅仅复制节点本身,不复制该节点下的子节点;

5.替换节点

语法:

obj.replaceChild(new,old)

6、innerHTML和innerText

在JavaScript中,我们可以使用innerHTML和innerText这2个属性很方便地获取和设置某一个元素内部子元素或文本。

innerHTML属性被多数浏览器所支持,而innerText只能被IE、chrome等支持而不被Firefox支持。