HTML DOM

一.什么是htmlDOM！

DOM 是 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”    核心 DOM - 针对任何结构化文档的标准模型
    XML DOM - 针对 XML 文档的标准模型
    HTML DOM - 针对 HTML 文档的标准模型
    HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法
    HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准

 二.DOM节点

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

a.在节点树中，顶端节点被称为根（root)

b.每个节点都有父节点、除了根（它没有父节点）

c. 一个节点可拥有任意数量的子

d. 同胞是拥有相同父节点的节点

编程接口：
可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。
所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。
方法是您能够执行的动作（比如添加或修改元素）。
属性是您能够获取或设置的值（比如节点的名称或内容）。

三.DOM方法

getElementById()     返回带有指定 ID 的元素。
getElementsByTagName()     返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()     返回包含带有指定类名的所有元素的节点列表。
appendChild()     把新的子节点添加到指定节点。
removeChild()     删除子节点。
replaceChild()     替换子节点。
insertBefore()     在指定的子节点前面插入新的子节点。
createAttribute()     创建属性节点。
createElement()     创建元素节点。
createTextNode()     创建文本节点。
getAttribute()     返回指定的属性值。
setAttribute()     把指定属性设置或修改为指定的值。

四 .DOM属性

innerHTML    属性对于获取或替换 HTML 元素的内容很有用。
nodeName 属性规定节点的名称。
nodeValue 属性规定节点的值。
nodeType 属性返回节点的类型。

	<p id="english">Engilis is very good</p>
		<script type="text/javascript">
			var ele=document.getElementById("english").innerHTML;
			var ele1=document.getElementById("english").nodeName;
			var ele2=document.getElementById("english").nodeValue;
			var ele3=document.getElementById("english").nodeType;
			

			console.log(ele3);
			console.log(ele2);
			console.log(ele1);
			console.log(ele);
		</script>

下面是运行结果

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

 nodeName 是只读的
 元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document
获取元素内容的最简单方法是使用 innerHTML 属性。
//
innerHTML 属性对于获取或替换 HTML 元素的内容很有用
nodeType 属性
//
nodeType 属性返回节点的类型。nodeType 是只读的。

 

五.DOM访问

下面是四种访问元素的例子

<div id="baba" class="1">
			<div id="erzi" name="erzi1">
				
			</div>
			<div id="child" name="erzi1" class="1">
				
			</div>
		</div>

通过使用 getElementById() 方法

var a=document.getElementById("erzi");
console.log(a);//获取的是元素;

通过使用 getElementsByName() 方法

ar b=document.getElementsByName("erzi1");
			console.log(b);//返回的是所有的具有name="erzi1"的标签以Nodelist（节点列表）返回;

通过使用getElementsByTagName()方法

var c=document.getElementsByTagName("div");
			console.log(c);//返回带有指定标签名称的所有标签元素的集合htmlcollection()

通过使用 getElementsByClassName() 方法

var d=document.getElementsByClassName("1");// 返回带有所有类名元素的节点列表
			console.log(d)

六.html修改

1.创建和改写HTMl内容

2.修改html样式属性

3.创建新的html元素

<p id="love">我喜欢 </p>
		<script type="text/javascript">
			document.getElementById("love").innerHTML="随缘";
			document.getElementById("love").style.color="blue";
			var newp=document.createElement("p");
			var node=document.createTextNode("吧");
			newp.appendChild(node);
			var element=document.getElementById("body");
			element.appendChild(newp);
		</script>

七.html元素内容的修改

1.改变元素内容

<p id="p1">十年生死两茫茫</p>
		<script type="text/javascript">
			document.getElementById("p1").innerHTML="不思量，自难忘";
		</script>

 2.改变元素样式

<p id="p1">十年生死两茫茫</p>
		<script type="text/javascript">
			//document.getElementById("p1").innerHTML="不思量，自难忘";
			document.getElementById("p1").style.color="blue";
		</script>

3.使用事件

 

<p id="p1">十年生死两茫茫</p>
		<button type="button" id="dianji">点击</button>
		<script type="text/javascript">
			var a=document.getElementById("dianji");
			a.onclick=function(){
						document.getElementById("p1").innerHTML="不思量，自难忘";
			}
		</script>

八.DOM元素

.添加、删除和替换 HTML 元素

	<div id="div1">
			<p id="p1">This is paragraph</p>
			<p id="p2">This is paragraph</p>
		</div>
		<script type="text/javascript">
			var para=document.createElement("p");//创建p元素
			var node=document.createTextNode("我爱你");//创建内容节点
			para.appendChild(node);//将内容给p元素;
			var element=document.getElementById("div1");
			// element.appendChild(para);//将p元素设为div的子节点;
			var child=document.getElementById("p2")//获取p2的元素
// 			element.insertBefore(para,child);//将新元素插入到p2之前
			// element.removeChild(child);//删除子节点
			element.replaceChild(para,child);
		</script>

 九.DOM导航

通过 HTML DOM，您能够使用节点关系在节点树中导航。
getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。
length 属性定义节点列表中节点的数量
parentNode、firstChild 以及 lastChild ，在文档结构中进行导航。
DOM 根节点
document.documentElement - 全部文档
document.body - 文档的主体
可以使用 childNodes 和 nodeValue 属性来获取元素的内容。

十.DOM事件

当事件发生时，可以执行 JavaScript
如需向 HTML 元素分配事件，您可以使用事件属性。
当用户进入或离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。
onload 和 onunload 事件可用于处理 cookies。
onchange 事件常用于输入字段的验证。
onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。
onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。
首先当某个鼠标按钮被点击时，触发 onmousedown 事件，
然后，当鼠标按钮被松开时，会触发 onmouseup 事件，
最后，当鼠标点击完成时，触发 onclick 事件。