HTML DOM 学习笔记

一.HTML DOM定义了所有HTML元素的对象和属性，以及访问他们的方法
即：HTML DOM是关于如何获取，修改，添加，删除HTML元素的标准
二.DOM节点
1.分类
整个文档是一个文档节点
每个HTML元素是元素节点
HTML元素内的文本是文本节点
每个HTML属性是属性节点
注释是注释节点
2.节点树中的节点彼此拥有层级关系
父节点，子节点，同胞
3.
<title>DOM 教程</title>，元素节点 <title>，包含值为 "DOM 教程" 的文本节点。
可通过节点的 innerHTML 属性来访问文本节点的值
三.DOM方法
DOM方法是我们可以在节点(html元素)上执行的动作  比如：添加或修改元素
DOM属性是我们可以在节点(html元素)设置和修改的值  比如：节点名和内容
1.getElementById(id) - 获取带有指定 id 的节点（元素）
getElementsByTagName()/getElementsByClassName()
2.appendChild(node) - 插入新的子节点（元素）
3.removeChild(node) - 删除子节点（元素）
四.DOM属性
DOM属性是我们可以在节点(html元素)设置和修改的值  比如：节点名和内容
1.innerHTML属性   获取元素内容的最简单方法是使用 innerHTML 属性
2.DOM节点有三个重要的属性
(1).nodeName属性:节点的名称
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
(2).nodeValue属性:节点的值
元素节点的nodeValue是undefined或null
文本节点的nodeValue是文本本身
属性节点的nodeValue是属性的值
(3).nodeType:节点的类型,以下为常用节点类型
元素类型    节点类型
  元素          1
  属性          2
  文本          3
  注释          8
  文档          9

五.DOM访问
1.访问HTML元素(节点)
 通过使用 getElementById() 方法
 通过使用 getElementsByTagName() 方法
 通过使用 getElementsByClassName() 方法
六.DOM修改
1.改变HTML内容
document.getElementById("p1").innerHTML="新文本!";
2.改变 CSS 样式
document.getElementById("p2").style.color="blue";
3.创建新的 HTML 元素
例如：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
首先必须创建该元素（元素节点），然后把它追加到已有的元素上
七.DOM元素
1.创建新的HTML元素  createElement()
2.创建新的HTML元素  insertBefore()
3.删除已有的HTML元素
例如：

<div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
如需删除 HTML 元素，您必须清楚该元素的父元素
------------------------------------------
能否在不引用父元素的情况下删除某个元素？
解决：找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素，然后删除
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
4.替换HTML元素  replaceChild();

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
var para=document.createElement("p");
var node=document.createTextNode("这是一个新的段落。");
para.appendChild(node);
parent.replaceChild(para,child);
</script>