JS之DOM基础知识总结
2016-06-25 20:39
651 查看
[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>
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AJAX之JSON
- js基础知识总结
- JavaScript检测之basevalidate.js
- JavaScript检测之basevalidate.js
- JS制作一个跳转提示页面
- JavaScript利用数组、对象和迭代实现高效率fibonacci数列
- 使用JS构建简单的虚拟小键盘
- js对字符串的操作和对数组的管理
- JS学习中遇到的问题
- 【译】唯快不破：Web 应用的 13 个优化步骤
- js学习（一）
- JavaScript-------寄生组合式继承
- js中的hasOwnProperty和isPrototypeOf方法使用实例
- JS获取当月第一天和最后一天
- javascript浏览器---学习笔记
- 用过滤器来解决JSP中文乱码问题
- Json
- JS小技巧：判断数据类型的一种方法
- JavaScript(二)
- JScrollPane的简单用法！