轻松学习JavaScript二十:DOM编程学习之获取节点

页面导航:首页 > 网络编程 > JavaScript > 轻松学习JavaScript二十:DOM编程学习之获取节点

轻松学习JavaScript二十:DOM编程学习之获取节点

来源: 作者: 时间:2016-01-19 18:32 【

我们这里所说的获取节点包含元素节点,属性节点和文本节点。通常,通过DOM我们就能够操作HTML元素。为了做到这件事情,您必须首先找到该元素。W3C提供了比较方便简单的定位节点的

我们这里所说的获取节点包含元素节点,属性节点和文本节点。通常,通过DOM我们就能够操作HTML元素。为

了做到这件事情,您必须首先找到该元素。W3C提供了比较方便简单的定位节点的方法和属性,以便我们快速的对节

点进行操作。

我们先来写一个简单的HTML文档以供我们进行测试,并且JS代码都是写在window.onload事件中:




<script type="text/javascript">
window.onload=function(){
}
</script>

你喜欢那个城市

  • 北京市
  • 天津市
  • 上海市
  • 重庆市

你喜欢那个游戏

  • 红色警戒
  • 天龙八部
  • 罪恶都市
  • 反恐精英

选择性别:

(1)getElementById()方法

getElementById()方法接受一个参数,这个参数是一个元素指定的id值,这样就可以获取该元素节点。如果找到相

应的元素则返回元素节点对象,如果不存在,则返回null。在这里我们要注意的一点是id表示一个元素节点的唯一性,

不能同时给两个或以上的元素节点创建通哟个命名的id。

//获取id="bj"的元素节点
var bjNode=document.getElementById("bj");
alert(bjNode);//返回object HTMLLIElement表示li元素节点对象,但是IE会返回object。同时低版本的IE不兼容。

当我们通过getElementById()方法获取到特定的元素节点对象时,这个元素节点对象就被我们获取到了,而通过

这个元素节点对象,我们可以访问它的一系列属性。

元素节点属性
\
实例:
//获取id="bj"的元素节点
var bjNode=document.getElementById("bj");
alert(bjNode.tagName);//返回元素节点的标签名:LI
alert(bjNode.innerHTML);//返回元素节点的文本节点的内容:北京市
对于元素节点的属性除了可以获取指定元素节点的属性,也可以改变其属性的内容。
//获取id="bj"的元素节点
var bjNode=document.getElementById("bj");
//对元素节点的属性重新赋值
bjNode.innerHTML="河北省";
重新赋值后的结果:原来的北京市被替换为河北省
\ HTML属性的属性
\

实例:

 

//获取id="bj"的元素节点
var bjNode=document.getElementById("bj");
alert(bjNode.id);//返回元素节点的属性节点id的值:bj
alert(bjNode.className);//返回元素节点的属性节点class的值:BJ
alert(bjNode.style);//返回元素节点的内联样式属性节点对象
alert(bjNode.style.color);//返回:red

 

对于HTML属性的属性除了可以获取指定元素节点的属性的值,也可以对其属性进行设置。

 

//获取id="bj"的元素节点
var bjNode=document.getElementById("bj");
//对元素节点的内联样式属性节点进行属性值的设定
bjNode.style.color="blue";

 

未设置前的样式效果:

\

设置后的样式效果:

\

(2)getElementsByTagName()方法

getElementByTagName()方法接受一个参数,这个参数是HTML元素的标签名,因此该方法返回的是一个对象数

组HTMLCollection,这个数组保存着所有相同元素名的节点列表。

实例一:

//获取元素名为li的元素节点
var liNodes=document.getElementsByTagName("li");
alert(liNodes); //返回:object HTMLCollection表示元素节点对象数组
alert(liNodes.length);//返回;8,当前文档中确实有8个li元素
alert(liNodes[0]);//返回:object HTMLLIElement表示li元素节点对象   

看到输出元素节点对象,我们就可以看出这个和用id获取元素节点对象那里一致,这样的话我们也可以输出元素

节点的标签名和文本内容。这两个方法的区别是:getElementById()是document对象的方法,而

getElementByTagName()方法是Node接口的方法,即任何一个节点都有这个方法。看下面的例子:

实例二:

//获取id="city"的元素节点
var cityNode=document.getElementById("city");
//获取id="city"的元素节点中的所有元素名为li的元素子节点
var liNodes=cityNode.getElementsByTagName("li");
alert(liNodes); //返回:object HTMLCollection表示元素节点对象数组
alert(liNodes.length);//返回;4,当前文档id="city"元素节点中确实有4个li元素
alert(liNodes[0]);//返回:object HTMLLIElement表示li元素节点对象

从输出的结果看出:实例一是获取整个HTML文档的所有的元素名li的元素节点,而实例二是获取指定id="city"元

素节点中的所有元素名为li的元素子节点。

上面说到如果得到元素节点对象,就可以得到元素节点的属性和文本内容。

//获取HTML文档内所有的元素名为li的元素节点
var liNodes=document.getElementsByTagName("li");
alert(liNodes[1].innerHTML);//输出:天津市
在这里我们还需要讲述一个很重要的获取body节点的知识,在后面我们做动态的HTML页面这是很有用的,由于HTML文档中只有一个body节点,因此我们可以这样做:
//获取body元素节点
var bodyNode=document.getElementsByTagName("body")[0];
alert(bodyNode);//返回:object HTMLBodyElement表示body元素节点对象

(3)getElementByName()方法(一般是表单元素的name属性的值)

getElementsByName()方法可以获取相同name属性的元素节点,返回的也是一个对象数组NodeList。

实例:

//获取name="sex"的元素节点
var inputNodes=document.getElementsByName("sex");
alert(inputNodes);//返回:ObjectNodeList表示元素节点对象数组
alert(inputNodes.length);//返回:2
alert(inputNodes[0]);//返回:Object HTMLInputElement元素节点对象

同样的写到这里我们也可以获取和设置元素节点的属性节点的值:

//获取name="sex"的元素节点
var inputNodes=document.getElementsByName("sex");
alert(inputNodes[0].type);//返回:radio
alert(inputNodes[0].value);//返回:male

在使用getElementsByName()方法获取元素节点的时候我们可能遇到这样的问题,就是有些元素没有合法的

HTML的name属性(也即是自定义的name),那么在JS获取的兼容性有差异,IE支持本身合法的name属性,而

不合法的就会出现不兼容的问题。因此我们一般较少使用这种方法,但是表单中的元素可以使用。

//获取name="Beijing"的元素节点
var inputNodes=document.getElementsByName("Beijing");
alert(inputNodes[0]);//返回:Object HTMLLIElement表示元素节点对象,IE不会返回

后面还有三种方法:getAttribute()方法是获取元素中某个属性的值,它和直接使用.属性获取属性值的方法有一定

的却别;setAttribute()方法是设置元素中某个属性的值和removeAttribute()方法是HTML属性。由于它们三个方法的兼

容性不是很好,使用的也很少,因此就不再进行过多叙述。

说了这么多,还是简单的总结一下

一获取元素节点经常使用的方法:

(1)使用getElementById()方法通过id属性获取对应的单个元素节点

(2)使用getElementByTagName()方法根据标签获取指定元素节点名字的数组,数组对象length属性可以获取数组的长度。

(3)使用getElementsByName()方法根据name属性获取对应的表单元素节点。

二获取属性节点经常使用的方法

由于属性节点时某一指定元素节点的属性,可以通过先使用getElementById()方法通过id属性获取对应的单个元素节点再读取指定属性这样的方式来获取和设置属性节点的值。

三获取文本节点(文本节点时元素节点的子节点)

首先也是利用获取元素节点的方法获取到元素节点,再利用元素节点的属性innerHTML属性得到文本节点中的文本内容,这里的文本内容包含HTML标签。在后面我们还会有一个获取文本节点的属性,一定要注意区别,这一点我们在后一篇的博文去区别。

 

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<