JavaScript对DOM的操作(一)
关于DOM
DOM 是Document Object Model( 文档对象模型 )的缩写。
DOM是把html里面的各种数据当作对象进行操作的一种思路。
比如一个超链,作为一个DOM对象,就可以使其隐藏,修改其href指向的地址。
DOM把所有的html都转换为节点
整个文档 是一个节点
元素 是节点
元素属性 是节点
元素内容 是节点
注释 也是节点
比如:通过document.getElementById获取了id=d1的div标签对应的元素节点
然后通过attributes 获取了该节点对应的属性节点
接着通过childNodes获取了内容节点
<html>
<body>
<div id="d1">hello HTML DOM</div>
</body>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var div1 = document.getElementById("d1");
p("文档节点"+document);
p("元素"+div1);
p("属性节点"+div1.attributes[0]);
p("内容节点"+div1.childNodes[0]);
</script>
</html>
- 运行显示:
hello HTML DOM
文档节点[object HTMLDocument]
元素[object HTMLDivElement]
属性节点[object Attr]
内容节点[object Text]
获取文档节点
通过ID获取元素节点
在设计html的时候,一个元素对应的id应该是唯一的。
可以通过document.getElementById 获取某个元素对应的元素节点对象:
<html>
<div id="d1">hello HTML DOM</div>
<script>
var div1 = document.getElementById("d1");
document.write(div1);//[object HTMLDivElement]
</script>
</html>
通过标签名称获取元素节点
所有的元素都有标签名 ,通过 getElementsByTagName 根据标签名称获取一个元素数组。
<html>
<body>
<div>
hello html
</div>
<script>
var title = document.getElementsByTagName("div");
document.write(title[0]);//因为获取到的是一个数组,所以需要角标索引,结果为:[object HTMLDivElement]
docment.write(title[1]);//结果为:undefined
</script>
</body>
</html>
通过类名获取元素节点
与 getElementsByTagName 类似的,也可以通过 getElementsByClassName 根据class返回一个节点数组。
<html>
<h1 class="d" >hello DOM</h1>
<script>
var elements= document.getElementsByClassName("d");
document.write(elements[0]);//[object HTMLHeadingElement]
</script>
</html>
通过表单元素的name获取元素节点
表单元素都有name属性,通过getElementsByName可以根据name属性的值,获取元素节点。
<html>
用户名 <input name="userName"> <br>
密码 <input name="userPassword">
<br>
<script>
var element= document.getElementsByName("userName");//结果为:[object HTMLInputElement]
</script>
</html>
获取属性节点
属性节点属于元素的,要获取属性节点就需要先获取元素节点,然后通过attributes来获取属性节点,会返回一个数组。
<html>
<p id="igor" class="lover" align="center">hello JavaScript</p>
<script>
var tyler = document.getElementById("igor").attributes;
document.write("标签P中有"+tyler.length+"个属性,分别是:");
for (var i = 0;i<tyler.length;i++){
document.write("<br>");
document.write(tyler[i].nodeName);//nodeName为节点名称
document.write(":");
document.write(tyler[i].nodeValue);//nodeValue为节点值
}
document.write("<br>");
document.write("div的id属性值是:"+ tyler["id"].nodeValue);
</script>
</html>
- 结果如图:
获取子节点
要获取子节点就需要先拿到元素节点对象,然后通过childNodes获取子节点对象,返回值是节点对象数组。还可以通过fristChild,获取第一个子节点;parentNode获取父节点对象;nextSibling获取下一个节点对象;previousSibling上一个节点对象等。
<html>
<ul id="NodeList">
<li>AAAAAA</li>
<li>BBBBBB</li>
<li>BBBBBB</li>
</ul>
<script>
var res = document.getElementById("NodeList").childNodes;
for (var i = 0;i<res.length;i++){
document.write("<br/>");
document.write(res[i]);
}
</script>
</html>
结果如下:
<html>
<ul id="NodeList">
<li>AAAAAA</li>
<li>BBBBBB</li>
<li>BBBBBB</li>
</ul>
<script>
var res = document.getElementById("NodeList").firstChild;
document.write(res);//结果为:[object Text]
document.write(res.nextSibling);//结果为:[object HTMLLIElement]
document.write(res.nextSibling.previousSibling);//结果为:[object Text]
document.write(res.nextSibling.parentNode);//结果为:[object HTMLUListElement]
</script>
</html>
DOM节点的属性
节点名称nodeName
<html>
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var div1 = document.getElementById("d1");
p("document的节点名称:"+document.nodeName);//document.nodeName:文档的节点名,是固定的#document
p("div元素节点的节点名称:"+div1.nodeName);//div1.nodeName:元素的节点名,是对应的标签名 div
p("div下属性节点的节点名称:"+div1.attributes[0].nodeName);//div1.attributes[0].nodeName:属性的节点名,是对应的属性名 id
p("div下内容节点的节点名称:"+div1.childNodes[0].nodeName);//div1.childNodes[0].nodeName:内容的节点名,是固定的 #text
</script>
</html>
节点值nodeValue
<html>
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var div1 = document.getElementById("d1");
p("document是没有nodeValue的:"+document.nodeValue);//document.nodeValue:文档的节点值,是 null
p("元素节点是没有nodeValue的:"+div1.nodeValue);//div1.nodeValue:元素的节点值,是null
p("属性节点id的nodeValue:"+div1.attributes[0].nodeValue);//div1.attributes[0].nodeValue:属性的节点值,是对应的属性值 d1
p("内容节点的nodeValue:"+div1.childNodes[0].nodeValue);//div1.childNodes[0].nodeValue:内容的节点值,是内容 即: #text
</script>
</html>
节点类型nodeType
不同的节点类型,对应的节点类型值是不一样的,如下图:
<html>
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var div1 = document.getElementById("d1");
p("document的nodeType是:"+document.nodeType);//document.nodeType:文档的节点类型,是 9
p("元素节点的nodeType是:"+div1.nodeType);//div1.nodeType:元素的节点类型,是 1
p("属性节点的nodeType是:"+div1.attributes[0].nodeType);//div1.attributes[0].nodeType:属性的节点类型,是 2
p("内容节点的nodeType是:"+div1.childNodes[0].nodeType);//div1.childNodes[0].nodeType:内容的节点类型,是 3
</script>
</html>
元素的文本内容innerHTML
innerHTML与nodeValue差不多,都可以获取或改变节点的文本,只是用法上存在差异:
<html>
<div id="d1">hello HTML DOM</div>
<script>
var div1 = document.getElementById("d1");
document.write(div1.innerHTML);//hello HTML DOM
document.write(div1.childNodes[0].nodeValue);//同上
</script>
</html>