【document对象——获取节点】
该对象将标记型文档进行封装。
该对象的作用,是可以对标记型文档进行操作。
最常见的操作就是,想要实现动态效果,需要对节点操作,那么要先获取到这个节点。
要想获取节点,必须要先获取到节点所属的文档对象document。
所以document对象最常见的操作就是获取页面中的节点。
【document对象常见方法】
1.getElementById:通过标签的id属性值获取该标签节点,返回该标签节点对象。
2.getElementsByName:根据NAME标签属性的值获取对象的集合。
3.getElementsByTagName:获取基于指定元素名称的对象集合。
【常见的节点】
1.标签型节点,类型为1
2.属性节点,类型为2
3.文本节点,类型为3
【注意】标签型节点是没有值的,属性和文本节点是可以有值的
===========================================================================================================
【示例】
<html>
<head>
</head>
<body>
<script type="text/javascript">
function getNodeDemo(){
/*
*需求:获取页面中的div节点
*思路:通过document对象完成,因为div节点有id属性,所以可以通过id属性来获取
*/
var divNode = document.getElementById("divid");
/*
*节点都有三个必备的属性:节点名称+节点类型+节点值
*这里以div节点为例:打开API,找到div对象,其内有三个属性:
*(1)nodeName 获取特定结点类型的名称。
*(2)nodeType 获取所需结点的类型。
*(3)nodeValue 设置或获取结点的值。
*/
alert(divNode.nodeName + ":" + divNode.nodeType + ":" + divNode.nodeValue);//弹出DIV:1:null
//【注意】1表示类型,说明是标签型节点,null是因为该标签是用来封装区域的,其本身没有值
/*
*查阅DHTML API,发现div节点中有如下两个属性可以获取节点中内容:
*(1)innerHTML 设置或获取位于对象起始和结束标签内的 HTML。
*(2)innerText 设置或获取位于对象起始和结束标签内的文本。
*区别是(1)是超文本,IE和火狐都支持,而(2)是普通文本,仅IE支持,所以我们用(1)
*/
var text = divNode.innerHTML;
alert(text);//弹出这是一个div区域
//修改div中的内容
divNode.innerHTML = "哈哈,文本被我改掉了!".fontcolor("red");//fontcolor("red")是将字体改为红色。
}
</script>
<input type="button" value="演示document对象获取节点" οnclick="getNodeDemo()"/>
<div id="divid">这是一个div区域</div>
</body>
</html>