HTML DOM节点：
一、DOM节点简介：
1.在HTML DOM中，所有事物都是节点。DOM是被视为节点树的HTML。
2.根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点：
<1>整个文档是一个文档节点。
<2>每个HTML元素是元素节点。
<3>HTML元素内的文本是文本节点。
<4>每个HTML属性是属性节点。
<5>注释是注释节点。
3.通过HTML DOM，节点树中的所有节点均可通过javascript进行访问。所有HTML元素（节点）均可被创建或删除节点。
[警告]：DOM处理中的常见错误是希望元素节点包含文本。例如：<title>DOM教程</title>
元素节点<title>,包含值为“DOM教程”的文本节点。可通过节点的innerHTML属性
来访问文本节点的值。
举例：
<html>
<head>
<title>DOM教程</title>
</head>
<body>
<h1>DOM第一课</h1>
<p>Hello World!</p>
</body>
</html>
在上面的HTML中：
<1><html>节点没有父节点；它是根节点
<2><head>和<body>的父节点是<html>节点
<3>文本节点“Hello World!”的父节点是<p>节点
<4><html>节点拥有两个子节点：<head>和<body>
<5><head>拥有一个子节点：<title>节点
<6><title>节点也拥有一个子节点：文本节点“DOM教程”
<7><h1>和<p>节点是同胞节点，同时也是<body>的子节点
-
有关DOM节点的案例：
1.创建新的HTML元素（即节点）：
提示： 如果需要向HTML DOM添加新元素，你必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
举例：
<html>
<head>
<meta charset="utf-8">
<title>创建新节点</title>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");//创建新的<p>元素
var node=document.createTextNode("这是新段落。")//创建文本节点
para.appendChild(node);//向<p>元素追加这个文本节点
var element=document.getElementById("div1");//找到一个已有的元素
element.appendChild(para);//向这个已有的元素追加新元素
</script>
</body>
</html>
-
删除已有的HTML元素：
提示：如需删除HTML元素，你必须首先获得该元素的父元素。如果能够在不引用父元素的情况下删除某个元素，就太好的。不过很遗憾。DOM需要清楚你需要删除的元素，以及它的父元素。
这是常用的解决方案：找到你希望删除的子元素，然后使用其parentNode属性来找到父元素 ：
var child =document.getElementById(“p1”);
child.parentNode.removeChild(child);//找到它的父元素然后通过父元素来删除这个子元素。+
举例：
<html>
<head>
<meta charset="utf-8">
<title>删除节点</title>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");//找到id="div1"的元素
var child=document.getElementById("p1");//找到id="p1"的<p>元素
parent.removeChild(child);//从父元素中删除子元素
</script>
</body>
</html>
250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
