HTML DOM上

2017-07-07 本文已影响0人草木不语只深深绿

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]

获取节点

document.getElementById 通过id获取元素节点

<html>
<div id="d1">hello HTML DOM</div>
<script>
var  div1 = document.getElementById("d1");
document.write(div1);
</script>
</html>

运行结果

hello HTML DOM
[object HTMLDivElement]

getElementByTagName 通过标签名获取元素节点

所有的元素都有标签名
通过 getElementsByTagName 根据标签名称获取一个元素数组。

<html>  
<div >hello javascript</div>
<div >hello BOM</div>
<div >hello DOM</div>
<br>
<script>
var  divs = document.getElementsByTagName("div"); 
for(i=0;i<divs.length;i++){
  document.write(divs[i]);
  document.write("<br>");
}
</script>
</html>

getElementsByClassName 通过类名获取元素节点

与 getElementsByTagName 类似的，也可以通过 getElementsByClassName 根据class返回一个节点数组

<html>
<h1  class="d" >hello javascript</h1>
<h2  class="d" >hello BOM</h2>
<div  class="d" >hello DOM</div>
<br>
<script>
var  elements= document.getElementsByClassName("d"); 
for(i=0;i<elements.length;i++){
  document.write(elements[i]);
  document.write("<br>");
} 
</script>
</html>

getElementsByName 通过表单元素的name获取元素节点

<html>
用户名 <input name="userName"> <br>
密码  <input name="userPassword">
<br>
<script>
var  elements= document.getElementsByName("userName");
for(i=0;i<elements.length;i++){
  document.write(elements[i]);
  document.write("<br>");
}
</script>
</html>

attributes 获取属性节点

首先通过getElementById获取元素节点，然后通过元素节点的attributes获取其下所有的属性节点。
因为属性节点是多个，所以是以数组的形式返回出来的，接着通过for循环遍历，查看每个节点的nodeName和nodeValue
如果要获取一个指定属性的值，可以采用如下风格，as表示所有的属性，as["id"]取出名称是id的属性

as["id"].nodeValue

注: nodeName和nodeValue表示一个节点的名称和值

<html> 
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var  div1 = document.getElementById("d1");
var as = div1.attributes;
document.write("div总共有"+as.length +" 个属性");
document.write("分别是:");
for(i = 0; i< as.length; i++){
document.write("<br>");
document.write(as[i].nodeName);
document.write(":");
document.write(as[i].nodeValue);
}
document.write("<br>");
document.write("div的id属性值是："+ as["id"].nodeValue); 
</script>
</html>

childNodes 获取内容节点

首先通过document.getElementById获取元素节点，然后通过childNodes获取其所有的子节点。其中第一个子节点，就是其内容节点。
然后借助nodeName和nodeValue把内容节点的名称和值打印出来。

<html>  
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var  div1 = document.getElementById("d1");
var content = div1.childNodes[0];
document.write("div的内容节点名是:"+content.nodeName);
document.write("<br>");
document.write("div的内容节点值是:"+content.nodeValue); 
</script>
</html>

节点属性

nodeName 节点名称

nodeName表示一个节点的名字
如本例：
document.nodeName 文档的节点名，是固定的#document
div1.nodeName 元素的节点名，是对应的标签名 div
div1.attributes[0].nodeName 属性的节点名，是对应的属性名 id
div1.childNodes[0].nodeName 内容的节点名，是固定的 #text

<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);
p("div元素节点的节点名称:"+div1.nodeName);
p("div下属性节点的节点名称:"+div1.attributes[0].nodeName);
p("div下内容节点的节点名称:"+div1.childNodes[0].nodeName);
</script>
</html>