DOM,全称“Document Object Model(文档对象模型)”,它是由W3C定义的一个标准。
1、HTML DOM 节点
在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点:
文档是一个文档节点 所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。
注释是注释节点。
2.DOM结构
DOM用的是“树形结构”,用“树节点”的形式来表示页面中的每一个元素。
例 :DOM树,HTML可看为树根,也叫根元素。
每一个元素就是一个节点,而每一个节点就是一个对象。
3.节点类型
在JavaScript中 ,节点分为很多类型。DOM节点共有12种类型,但是常见的只有下面3种。
(1)元素节点
(2)属性节点
(3)文本节点
看一下下面这句代码有多少个节点。
<div class="hello>文本</div>
很多人看到上面这句代码后,都以为只有一个节点,因为只有一个div一个元素,但这里有3个节点。
· <div class="hello>文本</div> 元素节点 · id="hello" 属性节点 ·文本 文本节点
一个元素就是一个节点,这个节点称为”元素节点“。
只有元素节点可以拥有子节点,属性节点和文本节点都无法拥有子节点。
4.获取元素
获取元素,准确地说,就是获取”元素节点“。对于一个页面,我们想要对某一个元素进行操作,就必须通过一定的方式来获取元素,获取元素后,才能对它进行操作。
Document常用方法
方法 | 描述 |
document.getElementById() | 返回对拥有指定 id 的第一个对象的引用。 |
document.getElementsByClassName() | 返回文档中所有指定类名的元素集合,作为 NodeList 对象。 |
document.getElementsByTagName() | 返回带有指定标签名的对象集合。 |
document.getElementsByName() | 返回带有指定名称的对象集合。 |
document.querySelector() | 返回文档中匹配指定的CSS选择器的第一元素。 |
document.querySelectorAll() | document.querySelectorAll()是 HTML5中引入的新方法,返回文档中匹配的CSS选择器的所有元素节点列表 |
document.renameNode() | 重命名元素或者属性节点。 |
document.write() | 向文档写 HTML表达式 或 JavaScript代码。 |
document.writeln() | 等同于 write()方法,不同的是在每个表达式之后写一个换行符。 |
document.createComment() | createComment()方法可创建注释节点。 |
document.createElement() | 创建元素节点。 |
document.createTextNode() | 创建文本节点。 |
5.创建元素(节点)
在JavaScript中,我们可以使用createElement()来创建一个元素节点,也可以使用createTextNode()来创建一个文本节点,然后可以将元素节点”组建“成我们同时看到的”有文本内容的元素“。
var om1 = document.creatElement("元素名");//创建元素节点
var on2 = document.createTextNode("文本内容");//创建文本节点
om1.appendChid(txt);//把文本节点插入元素节点中
on2.appendChid(om1);//把组建好的元素插入已有点元素中
说明:om1表示JavaScript动态创建的元素节点,txt表示JavaScript动态创建的文本节点,on2表示HTML中已经创建了的元素节点。
(1)创建元素节点createElement
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
语法:document.createElement(tagName)
参数:
tagName:字符串值,这个字符串用来指明创建元素的类型。
注意:要与appendChild() 或 insertBefore()方法联合使用,将元素显示在页面中。
(2)创建文本节点createTextNode
createTextNode() 方法创建新的文本节点,返回新创建的 Text 节点。
语法:document.createTextNode(data)
参数:data : 字符串值,可规定此节点的文本。
6. 插入节点
(1)在指定节点的最后一个子节点列表之后添加一个新的子节点
语法:appendChild(newnode)
参数: newnode:指定追加的节点。
var parentnode = document.getElementById("test");
var newnode = document.createElement("li");
newnode.innerHTML = "css";
parentnode.appendChild(newnode);
(2)insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法:insertBefore(newnode,node);
参数:newnode: 要插入的新节点。 node: 指定此节点前插入节点。
var parentNode = document.getElementById("test");
var node = document.getElementById("liJS");
var newNode = document.createElement("li");
newNode.innerHTML = "jQuery";
parentNode.insertBefore(newNode,node);
7.删除节点
removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。
语法:nodeObject.removeChild(node)
参数:
node :必需,指定需要删除的节点。
var parentNode = document.getElementById("test");
console.log(parentNode.childNodes);
var node = parentNode.childNodes[3];
var x = parentNode.removeChild(node);
document.write("删除节点的内容:" + x.innerHTML);
8.替换元素节点
(1)removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。
语法:nodeObject.removeChild(node)
参数:
node :必需,指定需要删除的节点。
var parentNode = document.getElementById("test");
console.log(parentNode.childNodes);
var node = parentNode.childNodes[3];
var x = parentNode.removeChild(node);
document.write("删除节点的内容:" + x.innerHTML);