Dom引用-CSDN博客

本文链接：https://blog.csdn.net/luobotoutou123/article/details/64130785

Dom(document object model):文档对象模型：

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

（1）。dom节点树：

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点

（2）.

HTML DOM 对象 - 方法和属性

一些常用的 HTML DOM 方法：

getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

dom的一些对象方法：

getElementById()

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

（3）。以下是测试添加和删除的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
	 <meta charset="utf-8"/>
    <script type="text/javascript">
		
        function insert() {
		//创建一个一个节点li
			var e = document.createElement("li");
		//获取文本框的值
            var str = document.getElementById("txt").value; 
	    //创建一个文本节点，将文本框内的值传进去
            var txt = document.createTextNode(str);
		//往li节点内添加文本节点txt
            e.appendChild(txt);   //<li>内容</li>
		//得到id为list的ul内的li节点集合
			var list = document.getElementById("list");
		//在集合下标为零出添加新建的li节点
            list.insertBefore(e,list.childNodes[0]);
        }
		
		function deletes(){
			var list = document.getElementById("list");
			if(list.hasChildNodes){
				list.removeChild(list.lastChild);
			}
		}
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>     
    列项文本：<input id="txt" type="text"/><br />
    <input type="button" value="插入新项" οnclick="insert()" />
	
	 <input type="button" value="删除最后一项" οnclick="deletes()" />
</body>
</html>