JS(五)--JavaScript 中的 DOM 操作

JavaScript 中的 DOM 操作

1.1.、什么是 DOM？
1.2、JavaScript 中 DOM 节点操作
1.3、JavaScript 的 DOM 方法

1.3.1一些常用的 HTML DOM 方法：
1.3.2一些常用的 HTML DOM 属性：

1.4、访问 HTML 元素（节点）
1.5、对于元素节点的操作
1.6、对于节点属性及内容的操作
1.7、常用的 HTML DOM 属性

1.1.、什么是 DOM？

DOM 是 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允
许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

注：DOM 是 Document Object Model（文档对象模型）的缩写

1.2、JavaScript 中 DOM 节点操作

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

HTML 文档中的所有内容都是节点
注释是注释节点
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
节点父、子和同胞,节点树中的节点彼此拥有层级关系。
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子节点
同胞是拥有相同父节点的节点.

下面的代码展示了节点树的一部分，以及节点之间的关系:

<html>
<head>
 <title>DOM 教程</title>
</head>
<body>
 <h1>DOM 第一课</h1>
 <p>Hello world!</p>
</body>
</html>

1.3、JavaScript 的 DOM 方法

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

HTML DOM 对象 - 方法和属性

1.3.1一些常用的 HTML DOM 方法：

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

1.3.2一些常用的 HTML DOM 属性：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
nodeName -节点的名称
nodeValue -节点的值
nodeType -节点的类型
HTML DOM 操作元素

1.4、访问 HTML 元素（节点）

常用的访问 HTML 元素的方法：

通过使用 getElementById() 方法

getElementById() 方法返回带有指定 ID 的元素。语法：
document.getElementById("id 值") ；

通过使用 getElementsByTagName() 方法

getElementsByTagName() 返回带有指定标签名的所有元
素。语法：元素.getElementsByTagName("标签名称");

通过使用 getElementsByClassName() 方法

getElementsByClassName() 返回带有指定 class 的元
素。语法：元素.getElementsByTagName("class 值");

通过使用 getElementsByName() 方法

getElementsByName() 返回带有指定 name 的元素。语
法：元素.getElementsByTagName("name 值");

1.5、对于元素节点的操作

常用的操作元素节点的增、删、改、及重置所在位置的方法：

使用 appendChild()方法

功能：把新的子节点添加到指定节点。
语法：node.appendChild(node) body:
 <span id="sp1">span</span>
 <div id="div1">div
 <p id="p1">段落</p>
 </div>
JS：
var p1=document.getElementById("p1"); 
var sp1=document.getElementById("sp1");
var div1=document.getElementById("div1"); 
div1.appendChild(sp1);

使用 removeChild()方法

功能：删除子节点。
语法：node.removeChild(node) body:
 <div id="div1">div
 <span id="sp1">span</span>
 </div> 
JS :
var sp1=document.getElementById("sp1");
var div1=document.getElementById("div1");
div1.removeChild(sp1);

使用 replaceChild()方法

功能：替换子节点。
语 法 ：node.replaceChild(newnode,oldnode) 
body：
 <ul id="myList">
 <li>one</li>
 <li>two</li>
 <li>three</li>
 </ul>
JS：
var textnode=document.createTextNode("NEW");
var item1=document.getElementById("myList").childNodes[0]; 
item1.replaceChild(textnode,item1.childNodes[0]);

使用 insertBefore()方法

功能：在指定的子节点前面插入新的子节点。
语 法 ：node.insertBefore(newnode,existingnode) 
body:
 <span id="sp1">span</span>
 <div id="div1">div
 <p id="p1">段落</p>
 </div> 
Js:
var p1=document.getElementById("p1"); 
var sp1=document.getElementById("sp1"); 
var div1=document.getElementById("div1"); 
div1.insertBefore(sp1,p1);

1.6、对于节点属性及内容的操作

常用的创建元素属性、节点、文本及获取、修改属性值方法：

通过使用 createElement()方法

功能：创建元素节点。
语法：createElement(name) 
body:
 <div id="div1">div</div> 
JS:
var div1=document.getElementById("div");
var nodeP1=document.createElement("p");
div1.appendChild(nodeP1);

通过使用 createTextNode()方法

功能：创建文本节点。
语法：createTextNode(data) 
body:
 <div id="div1"></div>
JS：
var div1=document.getElementById("div1");
var txtDiv=document.createTextNode("新创建的 文本内容");
div1.appendChild(txtDiv);

通过使用 createAttribute()方法

功能：创建属性节点。
语 法 ：document.createAttribute(attributename) 
body:
<style type="text/css">
 .democlass{color:red}
</style>
<h1>Hello World</h1>
JS:
var h1=document.getElementsByTagName("H1")[0]; 
var att=document.createAttribute("class");
att.value="democlass"; 
h1.setAttributeNode(att);

通过使用 getAttribute()方法

功能：返回指定的属性值。
语法： element.getAttribute(attributename) 
body:
 <a href="#" target="_blank">Attr 对象</a>，
 <p id="demo">显示上面链接的 target 属性值</p>
JS:
var a=document.getElementsByTagName("a")[0];
var demo=document.getElementById("demo");
demo.innerHTML=a.getAttribute("target");

通过使用 setAttribute()方法

功能：把指定属性设置或修改为指定的值。
语 法 ：element.setAttribute(attributename,attributevalue)
body:
 <input type="text" value="OK">
 <p id="demo">点击按钮来设置按钮的 type 属性。</p>
 <button onclick="myFunction()">试一下</button> 
JS:
 function myFunction() 
 {
 var txtInput=document.getElementsByTagName("input")[0]; 
 txtInput.setAttribute("type","button");
 }

1.7、常用的 HTML DOM 属性

innerHTML 属性

功能： 设置或返回表格行的开始和结束标签之间的 HTML 
语法：tablerowObject.innerHTML=HTML
body:
 <div id="divAll">
 divAll 
 <p>段落</p>
 </div>
JS:
//返回 div 里面的内容 alert(document.getElementById("divAll").innerHT
//设置内容
document.getElementById("divAll").innerHTML="span";

parentNode 属性

功能： 以 Node 对象的形式返回指定节点的父节点;如果指定节点没
有父节点，则返回 null。
语法：node.parentNode 
body:
 <ul>
 <li>Coffee</li>
 <li>Tea</li>
 </ul>
 <p id="demo">获得列表中首个列表项的父节点节点名。</p>
JS:
var x=document.getElementById("demo");
var y=document.getElementsByTagName("LI")[0];
x.innerHTML=y.parentNode.nodeName;

childNodes 属性

功能：返回节点的子节点集合，以 NodeList 对象
语法：element.childNodes
body:
 <div> div
 <p>
 p 标签文本
 <span>span 文本</span>
 </p>
 </div>
 div 的子节点集合：<p id="demo">结果</p> 
JS:
 var txt="";
 var c=document.getElementsByTagName("div")[0].childNodes
 for (i=0; i<c.length; i++)
 {
 txt=txt + c[i].nodeName + "<br>";
 };
 var x=document.getElementById("demo"); 
 x.innerHTML=txt;

attributes 属性

功能： 返回指定节点的属性集合，即 NamedNodeMap 
语法：node.attributes
body:
 <p>点击按钮来查看 button 元素拥有多少属性。</p>
 <button id="myBtn" onclick="myFunction()">试一下</button>
 <p id="demo"></p> 
JS:
function myFunction() {
 var x = document.getElementById("myBtn").attributes.length; 
document.getElementById("demo").innerHTML = x;
}

nodeName 属性

功能： nodeName 属性指定节点的节点名称。
如果节点是元素节点，则 nodeName 属性返回标签名。
入股节点是属性节点，则 nodeName 属性返回属性的名称。
对于其他节点类型，nodeName 属性返回不同节点类型的不同名称。
语法：node.nodeName(示例同 2 parentNode 讲解)

nodeValue 属性

功能： 设置或返回指定节点的节点值
语法：设置节点值：node.nodeValue=value
返回节点值：node.nodeValue
body:
 <p id="demo">请点击按钮来获得 button 元素的节点值。</p>
 <button onclick="myFunction()">试一下</button>
JS:
function myFunction()
{
 var c=document.getElementsByTagName("BUTTON")[0]; 
 var x=document.getElementById("demo"); 
 x.innerHTML=c.childNodes[0].nodeValue;
}