1.通过集合获取标签对象
常用方法：
all: 获取所有标签对象
forms：获取所有form标签对象
images: 获取所有img标签对象
links: 获取所有a标签对象
<script type="text/javascript">
var nodeList;
//nodeList = document.all;
/*for (var i=0;i<nodeList.length;i++){
alert(nodeList[i].nodeName);
}
//结果：html,head,meta,title,body,script
/*nodeList = document.forms;
for (var i=0;i<nodeList.length;i++){
alert(nodeList[i].nodeName);
}
结果：form,form
*/
/*nodeList = document.images;
for (var i=0;i<nodeList.length;i++){
alert(nodeList[i].nodeName);
}*/
nodeList = document.links;
for (var i=0;i<nodeList.length;i++){
alert(nodeList[i].nodeName);
}
</script>
2.通过关系查询标签对象
常用方法：
父节点： parentNode属性
子节点： childNodes属性
第一个子节点： firstChild属性
最后一个子节点： lastChild属性
下一个兄弟节点： nextSibling属性
上一个兄弟节点： previousSibling属性
注意：
- childNodes属性,firstChild属性,lastChild属性获取的子节点包含了以下的元素：
a)标签 1
b)空格换行 3
c)html注释 8 - 在子节点中筛选出标签出来呢？
可以使用nodeType属性取出nodeType值为1的节点，就是标签对象</pre>
<body>
<form><a href="">超链接</a><!--html注释 --><input type="text"/><input type="button" /></form>
<form><a href="">超链接</a><input type="type"/></form>
</body>
<script type="text/javascript">
/*
//得到a标签（获取第一个a标签对象）
var aNode = document.links[0];
//alert(aNode.nodeName);
//得到父标签
var formNode = aNode.parentNode;
alert(formNode.nodeName);
//得到form的子节点,返回数组
var nodeList = formNode.childNodes;
alert(nodeList.length);
for(var i=0;i<nodeList.length;i++){
//筛选出标签对象
if(nodeList[i].nodeType==1){
document.write(nodeList[i].nodeName+"，节点类型："+nodeList[i].nodeType+"<br/>");
}
}
//第一个子节点
var firstChild = formNode.firstChild;
alert(firstChild.nodeName);
//最后一个子节点
var lastChild = formNode.lastChild;
alert(lastChild.nodeName);
*/
var aNode = document.links[1];
//得到下一个兄弟节点
var next = aNode.nextSibling;
alert(next.nodeName);
//得到上一个兄弟节点
var previous = next.previousSibling;
alert(previous.nodeName);
</script>
3.通过document方法获取标签对象
常用方法：
- document.getElementById("id属性值"); 最常用
注意：
1）使用该方法获取的标签一定要有id属性
2）在同一个html页面中不要出现两个同名的id
- documetn.getElementsByName("name属性值"); 获取同name属性名的标签列表
注意：
1）使用该方法获取的标签一定要有name属性 - document.getElementsByTagName("标签名") 获取相同标签名的标签列表
<script type="text/javascript">
function getValue(){
//获取输入框的内容
//1.得到输入框标签对象
//var userName = document.getElementById("userName");
//2.返回的是标签数组
//var userName = document.getElementsByName("user")[0];
//3.返回标签对象数组
var userName = document.getElementsByTagName("input")[0];
//获取标签对象的value属性值
alert(userName.value);
}
</script>
</head>
<body>
用户名：<input type="text" id="userName" name="user" onblur="getValue()"/>
</body>
