document对象
浏览器对外提供的支持js的用来操作html文档的一个对象,此对象封存html文档
的所有信息,通过document调用时,是调用document内封存的信息,不是html文档
**获取html元素对象**
**直接获取**
通过id
window.getElementById("id名"); 返回值是id对应的对象
通过name
window.getElementsByName("name名"); id不能重复,name可以重复,所以是Elements
以NodeList类数组形式存放name相同的对象
通过标签名
window.getElementsByTagName("标签名"); 以HTMLCollection类数组形式存放标签相同对象
通过class
window.getElementsByClassName("class名"); 以HTMLCollection类数组形式存放class相同对象
**间接获取**
父子关系
通过父元素获取子元素
var 父元素对象=document.getElementById("xx");
var 子元素类数组=父元素对象.childNodes;
/*获取父级元素*/
var showdiv=document.getElementById("showdiv");
/*获取子级元素*/
var childs=showdiv.childNodes; 返回Nodelist类数组
/*获取当前节点的第一个子元素*/
var first=showdiv.firstNode;
/*获取当前节点的最后一个子元素*/
var first=showdiv.lastNode;
子父关系
通过子元素获取父元素
/*获取子级元素*/
var inp=document.getElementById("inp");
/*获取父级元素*/
var par=inp.parentNode;
alert(par);
兄弟关系
元素位置的前后
var inp=document.getElementById("inp");
/*获取前面的紧跟元素对象*/
var pre=inp.previousSibling;
/*获取后面的紧跟元素对象*/
var next=inp.nextSibling;
**HTMLColection 与 NodeList 的区别**
HTMLCollection 是 HTML 元素的集合。
NodeList 是一个文档节点的集合。
NodeList 与 HTMLCollection 有很多类似的地方。
NodeList 与 HTMLCollection 都与数组对象有点类似,可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。
NodeList 与 HTMLCollection 都有 length 属性。
HTMLCollection 元素可以通过 name,id 或索引来获取。
NodeList 只能通过索引来获取。
只有 NodeList 对象有包含属性节点和文本节点。
它们看起来像一个数组但是不是数组,可以叫类数组,无法使用数组的方法: valueOf(), pop(), push(), 或 join()。
代码示例:
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function t1()
{
var inp=window.document.getElementById("uname");
alert(inp);
}
function t2()
{
var inp2=window.document.getElementsByName("fav") //以数组形式存放name相同的对象
alert(inp2.length);
}
function t3()
{
var inp3=document.getElementsByTagName("input");
alert(inp3.length);
}
function t4()
{
var inp4=document.getElementsByClassName("common");
alert(inp4);
}
function t5()
{
/*获取父级元素*/
var showdiv=document.getElementById("showdiv");
/*获取子级元素*/
var childs=showdiv.childNodes;
alert(childs.length);
}
function t6()
{
var inp=document.getElementById("inp");
var par=inp.parentNode;
alert(par);
}
function t7()
{
var inp=document.getElementById("inp");
var pre=inp.previousSibling;
var next=inp.nextSibling;
alert(pre+":"+next);
}
</script>
<style type="text/css">
.common{
}
#showdiv{
border:solid 1px orange;
width:300px;
height:300px;
}
</style>
</head>
<body>
<input type="button" id="uname" name="uname" value="通过id获取对象" onclick="t1()" />
<input type="button" value="通过name获取对象" onclick="t2()" />
<input type="button" value="通过标签获取对象" onclick="t3()"/>
<input type="button" value="通过class获取对象" onclick="t4()" />
<hr />
<input type="checkbox" name="fav" value="" onclick="" class="common"/>唱歌
<input type="checkbox" name="fav" id="" value="" class="common"/>跳舞
<input type="checkbox" name="fav" id="" value="" />rap
<input type="checkbox" name="fav" id="" value="" />篮球
<hr />
<input type="button" value="测试父子获取对象" onclick="t5()" />
<input type="button" value="测试子父获取对象" onclick="t6()"/>
<input type="button" value="测试兄弟获取对象" onclick="t7()" />
<hr />
<div id="showdiv"><!--空白也算一个节点,所以一共有13个节点存在NodeList中-->
<input type="button" value="" onclick="" /><input type="button" id="inp" value="" onclick="" />
<input type="button" value="" onclick="" />
<input type="button" value="" onclick="" />
<input type="button" value="" onclick="" />
<input type="button" value="" onclick="" />
</div>
</body>
</html>