DOM中document:代表html的文档对象(重要)
document演示:
该对象的作用,是对可标记型文档进行操作
常见操作,想要实现动态效果,需要对节点操作,那么先获取到这个节点,想获取节点,就必须先获取节点所属的文档对象document
获取节点的方法体现:
getElementById();提高标签的id属性值获取该标签节点,返回该标签节点
getElementsByName();通过标签的name属性获取节点,返回的是一个数组/容器
getElementsTagName();通过标签名获取节点,因为标签名会有重复,所以返回一个数组
所以,凡是带s的返回的都是一个数组
1.document获取节点byid:(有id的标签)
<body>
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
function getNodeDemo(){
//获取页面中的div节点
//因为div有id属性,所以可以通过id属性来获取,document对象完成
var divNode = document.getElementById("divid");
//节点的必备属性:节点名称nodeName,节点类型nodeType,节点值nodeValue
//alert(divNode.nodeName+":"+divNode.nodeType+":"+divNode.nodeValue);
//常见节点:
/*
* 标签型节点: 类型1
* 属性节点: 类型2
* 文本节点: 类型3
*
* 标签型节点是没有值的,属性和文本节点有值
* */
//获取节点后,获取div中的文本
//var test = divNode.innerHTML;
//alert(test);
//改变div中的文本
divNode.innerHTML = "改变div".fontcolor("blue");
}
</script>
<input type="button" value="document对象获取节点" οnclick="getNodeDemo()"/>
<div id="divid">div区域</div>
</body>
2.document获取节点byname:(没id,但有name的标签)
通常文本框中的值是不用写的,因为是用户输入
<script type="text/javascript">
function getNodeNameDemo(){
var Node = document.getElementsByName("user");//注意是Elements,所以是一组
/* //alert(Node);//undefined
//alert(Node.length); 1
//alert(Node);
alert(Node[0].nodeName);
alert(Node[0].type);
alert(Node[0].value);
//第二种*/
for(var i = 0;i<document.getElementsByName("user").length;i++) {
var userNode = document.getElementsByName("user")[i];
alert(userNode.nodeName);
}
}
</script>
<input type="button" value="document对象获取节点" οnclick="getNodeNameDemo()"/>
<div id="divid">div区域</div>
<input type="text" name="user" />
<input type="text" name="user" />
<input type="text" name="user" />
3。document获取节点byTagname:(没有id,也没有name的标签)
function getNodeByTagNameDemo(){
//直接用标签名获取
var nodes = document.getElementsByTagName("a");
// alert(nodes.length);//2
//alert(nodes[0].innerHTML);//获取内部文本,百度1
for(var i = 0;i<nodes.length;i++){
alert(nodes[i].innerHTML);
// nodes[i].target="_blank";给每个标签的属性设置一个值,有N多个超链接标签时,这招就很实用
}
}
</script>
<input type="button" value="document对象获取节点" οnclick="getNodeByTagNameDemo()"/>
<a href="http://www.baidu.com">百度1</a>
<a href="http://www.baidu.com">百度2</a>
第二种
<script type="text/javascript">
function getNodeByTagNameDemo2(){
//对于页面中的超链接,百度链接,在当前窗口打开,163链接在新窗口打开
//document获取超链接,可以获取页面中所有超链接节点
//如果需要获取其中某一部分节点,那么就要获取这一部分节点的所属
//在通过这个节点获取其中的所以超链接节点
//获取div节点
var divNode = document.getElementById("newlink");
//div中有方法,getElementsByTagName,注意凡是容器型标签,其中都有这个方法,但是不一定有
// byid,byname,但是一定有标签名
//因为容器型标签中可以装标签
var nodes = divNode.getElementsByTagName("a");
// alert(nodes.length);
for(var i = 0;i<nodes.length;i++){
// alert(nodes[i].innerHTML);
nodes[i].target="_blank";
}
}
</script>
<input type="button" value="document对象获取节点" οnclick="getNodeByTagNameDemo2()"/>
<a href="http://www.baidu.com">百度1</a>
<a href="http://www.baidu.com">百度2</a>
<div id="newlink">
<a href="http://www.163.com">1631</a>
<a href="http://www.163.com">1632</a>
<a href="http://www.163.com">1633</a>
</div>