document对象:该对象将标记型文档进行封装。
该对象的作用:是对可以标记型文档进行操作
最常见的操作是:想要实现动态效果,需要对节点操作,那么要先获取到这个节点操作,那么要先获取到这个节点。
所以document对象最常见的操作就是获取页面中的节点
获取节点的方法体现:
1)getElementById:通过标签的id属性值获取该标签节点,返回该标签节点
2)getElementByName:通过标签的name属性获取节点,因为name有相同。所以返回一个数组
只要带s的都是返回数组
3)getElementByTagName:通过标签名获取节点,因为标签名有重复,所以返回一个数组
常见节点有三种,标签型节点:类型1、属性节点:类型2、文本节点类型3
标签型节点没有值,属性和文本节点可以有值
一、getElementById
<body>
<script type="text/javascript">
function getNodeDemo()
{
var divNode=document.getElementById("divid");//返回的是对象
//节点有三个必备的属性:节点名称、节点类型、节点值
// alert(divNode.nodeName+":"+divNode.nodeType+":"+divNode.nodeValue);
var text=divNode.innerHTML;//获取文本,这是一个div区域
// alert(text);
divNode.innerHTML="文本被我改了";
}
</script>
<input type="button" value="演示document对象获取节点" onclick="getNodeDemo()"/>
<div id="divid">这是一个div区域</div>
</body>
二、getElementByName:具有这个有超链接和表单中的组件
function getNodeDemo2()
{
var node=document.getElementsByName("user");
// alert(node[0].nodeName);//获取了input对象节点名称
//alert(node[0].type);//已经获取了对象,所以可以通过.的方式,获取其中的属性
// alert(node[0].value);//获取值
//若确定就一个元素,可以这样写
var userNode=document.getElementsByName("user")[0];
alert(userNoder.value);
}
<input type="text" name="user" value="wo"/>
三、getNodeByTagName()
function getNodeDemo3()
{
var nodes=document.getElementsByTagName("a");
// alert(nodes.length);//2
// alert(nodes[0].innerHTML);
for(var x=0;x<nodes.length;x++)
{
// alert(nodes[x].innerHTML);
nodes[x].target="_blank";//让每个超链接在新的网页打开
}
}
<a href="http://www.sina.com.cn">新浪网站11</a>
<a href="http://www.sina.com.cn">新浪网站22</a>
<a href="http://www.SOHU.com.cn">搜狐网站33</a>
只想获取一部分的超链接
function getNodeDemo4()
{
//需求:将页面中的超链接,新闻链接通过新窗口打开,门户网站链接在当前页面中打开
/*
要获取其中被操作的对象,可以通过document获取超链接,拿到页面中所有的超链接
只想拿到一部分的超链接,只要获取备操作的超链接所属的节点即可
再通过这个节点获取到它里面的所有超链接节点
*/
//获取超链接所属的div节点
var divNode=document.getElementById("newslink");
//通过对div对象方法的查找,此对象也包含getElemetsByTagName方法
//所有容器型标签都具备这个方法,在该标签范围内获取指定名称的标签
var aNodes=divNode.getElementsByTagName("a");
for(var x=0;x<aNodes.length;x++)
{
//alert(aNodes[x].innerHTML);
aNodes[x].target="_blank";
}
<div id="newslink">
<a href="http://www.163.com.cn">新闻网站11</a>
<a href="http://www.baidu.com.cn">新闻网站22</a>
<a href="http://www.164.com.cn">新闻网站33</a>
<a href="http://www.165.com.cn">新闻网站44</a>
</div>