您的位置：首页 > 其它

DOM（一）-11-(document获取节点byId)

2015-08-20 16:25 197 查看
【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对象获取节点" onclick="getNodeDemo()"/>
<div id="divid">这是一个div区域</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航