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支持。