document对象
document对象可以说是window对象的一个属性,可以通过window.document来调用,也可以省略window直接写document。
document对象是浏览器生成的一个对象。我们这样来理解:
HTML语言与JavaScript语言是两门不同的语言,它们不能直接交互,就需要一个中间介质,而这个介质就是document。浏览器提供的document对象,它封装了整个HTML文档为一个对象,是一个树结构的对象,就像xml一样。所以我们可以把document对象看做HTML的一个模子,HTML中的每一个标签对应着document中的一个节点,节点也是一个对象。所以整个document就是一个大的对象,它提包含了这个HTML文件中的所有标签对象。
浏览器加载HTML文件到内存中,通过js代码与document对象的交互实现对HTML页面的动态改变。
document的方法使用
1.获取html中的节点(标签)的方法
直接获取方式
- 通过标签的id获取:getElementById("标签名");获取标签节点对象
- 通过标签name属性获取:name属性是可重用的,id是惟一的,所以通过getElementByName获取的是节点列表而不是一个节点<br>
- 通过标签名获取:getElementByTagName();
- 通过类名获取:getElementByClassName();
间接获取方式
- 父子关系获取
- 从父节点获取子节点:父节点变量.childNotes;
- 从子节点获取父节点:子节点变量.parentNote;
- 兄弟关系获取:只能获取同级的标签节点,如没有则为null
- 上一个兄节点:子节点变量.previousElementSibling;
- 下一个兄节点:子节点变量.nextElementSibling;
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>document节点获取</title> </head> <body> <!-- --> <script type="text/javascript"> function byIdTest(){ var byId = document.getElementById("button1"); alert(byId); } function byNameTest(){ var byName = document.getElementsByName("button2"); alert(byName+" 长度为:"+byName.length); } function byTagNameTest(){ var tagName = document.getElementsByTagName("a"); alert(tagName+" 长度为:"+tagName.length); } function byClassNameTest(){ var className = document.getElementsByClassName("navi"); alert(className+" 长度为:"+className.length); } function getSonTest(){ var father = document.getElementById("father"); var childs = father.childNodes; alert(childs+" 子节点数量:"+childs.length+" 子节点包括标签和标签之间的文本") } function getFatherTest(){ var son = document.getElementById("son1"); var father = son.parentNode; alert(father+" 节点的标签名:"+father.tagName) } function preBrother(){ var me = document.getElementById("son1"); var preBro = me.previousElementSibling;//sibling即兄妹的意思 alert(preBro +" 很明显第一个li标签没有上一个兄弟元素所以为空"); } function nextBrother(){ var me = document.getElementById("son1"); var nextBro = me.nextElementSibling; alert(nextBro); } </script> <style type="text/css"> #father{ border:red 1px solid; } </style> <h1>document节点获取</h1> <hr> <h3>直接获取方式</h3> <button type="button" onclick="byIdTest()" value="byId获取" id="button1">byId获取</button><br> name属性是可重用的,id是惟一的,所以通过getElementByName获取的是节点列表而不是一个节点<br> <button type="button" onclick="byNameTest()" value="byName获取" name="button2">byName获取</button><br> 通过标签名获取<br> <button type="button" onclick="byTagNameTest()">byTagName获取</button> <a href=""></a><br> 通过类名获取<br> <a href="" class = "navi"></a> <button type="button" onclick="byClassNameTest()">byClassName获取</button> <h3>间接获取方式</h3> <h4>父子关系获取</h4> <ul id="father"> <li id="son1">子1</li> <li>子2</li> <li>子3</li> </ul> 从父节点获取子节点<br> <button type="button" onclick="getSonTest()">获取子节点</button><br> 从子节点获取父节点<br> <button type="button" onclick="getFatherTest()">获取父节点</button> <h4>兄弟关系获取:上一个节点与下一个节点</h4> <button type="button" onclick="preBrother()">上一个兄弟</button> <button type="button" onclick="nextBrother()">下一个兄弟</button> </body> </html>