DOM节点 整个文档是一个文档节点 整个文档是一个文档节点 每个HTML元素是元素节点 每个HTML元素是元素节点 HTML元素内的文本是文本节点 HTML元素内的文本是文本节点 每个HTML属性是属性节点 每个HTML属性是属性节点 注释是注释节点 注释是注释节点 HTML DOM节点数 HTML ......
DOM节点
HTML DOM将HTML文档视为数结构，这种结构被称为节点数
通过HTML DOM，树中的所有节点均可通过JavaScript进行访问，所有HTML元素(节点)均可被修改，也可以创建或删除节点
在节点数中，顶端节点被称为根元素(root)
每个节点都有父节点，除了根
一个节点可拥有任意数量的子节点
同胞拥有相同的父节点
<html>
<head>
<title>标题</title>
</head>
<body>
<h1>题目</h1>
<p>内容</p>
</body>
</html>
<html>节点没有父节点，所以他是根节点
<head>和<body>的父节点是<html>节点
文本节点"内容"的父节点是<p>节点
<html>拥有两个子节点：<head>和<body>
<head>节点拥有一个子节点：<title>节点
<title>节点拥有一个子节点：文本节点"标题"
<h1>和<p>节点是同胞节点，同时也是<body>的子节点
<head>元素是<html>元素的首个子节点
<body>元素是<html>元素最后一个子节点
<h1>元素是<body>元素的首个子节点
<p>元素是<body>元素最后一个子节点
HTML DOM方法
- insertBefore()在指定的子节点前面插入新的子节点
- setAttribute()把指定属性设置或修改为指定的值
HTML DOM属性
innerHTML属性对于获取或替换HTML元素的内容很有用
<p id="p" name="kang">内容</p>
元素节点
var d = document.getElementById("p")
d.nodeType //1
d.nodeName //P
d.nodeValue //null
属性节点
var d = document.getElementById("p").getAttributeNode("name")
d.nodeType //2
d.nodeName //name
d.nodeValue //kang
文本节点
var d = document.getElementById("p").firstChild
d.nodeType //3
d.nodeName //#text
d.nodeValue //内容
HTML DOM访问
- getElementById()获取指定ID的元素
<p id="xiu">文本</p>
docuemt.getElementById("xiu")
- getElementsByTagName()获取指定标签名称的所有元素
<p>文本</p>
document.getElementsByTagName("p")
- getElementsByClassName()获取指定类名的所有元素
<p class="xiu">文本</p>
document.getElementsByClassName("xiu")[0]
HTML DOM 修改
<p id="p">内容</p>
document.getElementById("p").innertHTML = "修改内容"
<p id="p">内容</p>
document.getElementById("p").style.color = "red"
var xiu = document.createElement("p") //创建p标签
var kang = document.createTextNode("内容") //创建文本内容
xiu.appendChild(kang) //将文本内容添加到p标签