JS之DOM基础知识总结

最新推荐文章于 2021-06-04 05:34:45 发布

转载最新推荐文章于 2021-06-04 05:34:45 发布 · 539 阅读

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了 HTML DOM 的基本概念及常用方法与属性，包括选择、修改、创建和删除元素的操作技巧，以及如何利用 DOM 进行事件处理和节点关系导航。

[html] view plain copy

print ?

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。
所有 HTML 元素被定义为对象，其包含对象方法和对象属性。
方法是能够执行的动作（比如添加或修改元素）。
属性是能够获取或设置的值（比如节点的名称或内容）。
HTML DOM 对象 - 方法和属性
一些常用的 HTML DOM 方法：
getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）
方法
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
insertBefore() 在指定的子节点前面插入新的子节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。
一些常用的 HTML DOM 属性：
innerHTML - 节点（元素）的文本值。获取元素内容的最简单方法是使用 innerHTML 属性，innerHTML 属性对于获取或替换 HTML 元素的内容很有用。
<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值
<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
nodeType 属性返回节点的类型。nodeType 是只读的。
元素类型 NodeType
元素 1
属性 2
文本 3
注释 8
文档 9
访问 HTML 元素（节点）等同于访问节点：
能够以不同的方式来访问 HTML 元素：
通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法
通过使用 getElementsByClassName() 方法
document.getElementById("main").getElementsByTagName("p"); //返回包含文档中所有 <p> 元素的节点列表，并且这些 <p> 元素应该是 id="main" 的元素的后代（子、孙等等）：
getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。可以通过下标号访问这些节点（下标号从 0 开始）。如需访问第二个 <p>，您可以这么写：y=x[1];
length 属性定义节点列表中节点的数量，使用 length 属性来循环节点列表：
x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}
查找带有相同类名的所有 HTML 元素，请使用这个方法：document.getElementsByClassName("intro");
注释：getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。
修改 HTML DOM 意味着许多不同的方面：
改变 HTML 内容--->document.getElementById("p1").innerHTML="New text!";
改变 CSS 样式--->document.getElementById("p2").style.color="blue";
改变 HTML 属性---->document.getElementById("p1").setAttribute('abc2','abc2')；获取-->e.getAttribute('className');
创建新的 HTML 元素---->先创建该元素（元素节点），然后追加到已有的元素上。
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>
删除已有的 HTML 元素---->document.body.removeChild('div');父节点删除其子节点;
找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
替换已有的元素-------->parent.replaceChild(para,child);
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);
</script>
改变事件（处理程序）----> <h1 onclick="this.innerHTML='hello!'">请点击这段文本！</h1>
<html>
<body>
<input type="button" onclick="document.body.style.backgroundColor='lavender';"
value="Change background color" />
</body>
</html>
导航节点关系：
使用三个节点属性：parentNode、firstChild 以及 lastChild ，在文档结构中进行导航,还有：
childNodes(返回当前元素的所有子元素的数组);
nextSibling(返回紧跟当前元素后面的元素);
previousSibling(返回紧跟当前元素之前的元素);
hasChildNodes() 返回一个Boolean，指示元素是否有子元素;
<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM 很有用!</p>
<p>本例演示节点关系。</p>
</div>
</body>
</html>
首个 <p> 元素是 <body> 元素的首个子元素（firstChild）
<div> 元素是 <body> 元素的最后一个子元素（lastChild）
<body> 元素是首个 <p> 元素和 <div> 元素的父节点（parentNode）
firstChild 属性可用于访问元素的文本：
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
childNodes 和 nodeValue：除了 innerHTML 属性，也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。
<html>
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。
所有 HTML 元素被定义为对象，其包含对象方法和对象属性。
方法是能够执行的动作（比如添加或修改元素）。
属性是能够获取或设置的值（比如节点的名称或内容）。


HTML DOM 对象 - 方法和属性
一些常用的 HTML DOM 方法：
getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）


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




一些常用的 HTML DOM 属性：
innerHTML - 节点（元素）的文本值。获取元素内容的最简单方法是使用 innerHTML 属性，innerHTML 属性对于获取或替换 HTML 元素的内容很有用。
<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>


parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点


nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值
<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>


nodeType 属性返回节点的类型。nodeType 是只读的。
元素类型	NodeType
元素	1
属性	2
文本	3
注释	8
文档	9




访问 HTML 元素（节点）等同于访问节点：
能够以不同的方式来访问 HTML 元素：
通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法
通过使用 getElementsByClassName() 方法


document.getElementById("main").getElementsByTagName("p"); //返回包含文档中所有 <p> 元素的节点列表，并且这些 <p> 元素应该是 id="main" 的元素的后代（子、孙等等）：
getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。可以通过下标号访问这些节点（下标号从 0 开始）。如需访问第二个 <p>，您可以这么写：y=x[1];
length 属性定义节点列表中节点的数量，使用 length 属性来循环节点列表：
x=document.getElementsByTagName("p");


for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}


查找带有相同类名的所有 HTML 元素，请使用这个方法：document.getElementsByClassName("intro");
注释：getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。


修改 HTML DOM 意味着许多不同的方面：
改变 HTML 内容--->document.getElementById("p1").innerHTML="New text!";
改变 CSS 样式--->document.getElementById("p2").style.color="blue";
改变 HTML 属性---->document.getElementById("p1").setAttribute('abc2','abc2')；获取-->e.getAttribute('className');
创建新的 HTML 元素---->先创建该元素（元素节点），然后追加到已有的元素上。
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);


var element=document.getElementById("d1");
element.appendChild(para);
</script>


删除已有的 HTML 元素---->document.body.removeChild('div');父节点删除其子节点;
找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);


替换已有的元素-------->parent.replaceChild(para,child);
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>


<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);


var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);
</script>




改变事件（处理程序）----> <h1 onclick="this.innerHTML='hello!'">请点击这段文本！</h1>
<html>
<body>
<input type="button" onclick="document.body.style.backgroundColor='lavender';"
value="Change background color" />
</body>
</html>




导航节点关系：
使用三个节点属性：parentNode、firstChild 以及 lastChild ，在文档结构中进行导航,还有：
childNodes(返回当前元素的所有子元素的数组);
nextSibling(返回紧跟当前元素后面的元素);
previousSibling(返回紧跟当前元素之前的元素);
hasChildNodes() 返回一个Boolean，指示元素是否有子元素;
<html>
<body>
<p>Hello World!</p>
<div>
  <p>DOM 很有用!</p>
  <p>本例演示节点关系。</p>
</div>
</body>
</html>
首个 <p> 元素是 <body> 元素的首个子元素（firstChild）
<div> 元素是 <body> 元素的最后一个子元素（lastChild）
<body> 元素是首个 <p> 元素和 <div> 元素的父节点（parentNode）
firstChild 属性可用于访问元素的文本：
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>


childNodes 和 nodeValue：除了 innerHTML 属性，也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。
<html>
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>