Heim >Web-Frontend >HTML-Tutorial >DOM之行走在DOM中_html/css_WEB-ITnose

DOM之行走在DOM中_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 08:51:391440Durchsuche

访问DOM都要从document开始. 这个对象提供了一系列的搜索和改变元素的方法.

根节点: documentElement 和  body

DOM的根节点是 document.documentElement .  这个特定的属性用来访问最顶端的HTML标签.

另外的开始点是document.body, 代表了BODY标签.

两者作为进入点都是有效的. 但是document.body可以为null.

例如, 在HEAD里script脚本访问document.body, 这时候会讲null来代替这个属性的值. 这是自然的, 因为这时候没有BODY标签.

在下面的例子中, 弹出框会输出null:

代码名称

<!DOCTYPE HTML><html>    <head>        <script>            alert("Body from HEAD: "+document.body) // null        </script>    </head>    <body>        <div>The document</div>         <script>            // different browsers output different text here,             // because of different implementations of toString              alert("Body from inside body: " + document.body)         </script>    </body></html>

同这个相反, document.documentElement总是有效的.

同样提示下document.body不能为undefined. 在DOM的世界里, 一个元素找不到或者没有这个元素, 值都是为null的.

一个更直观的描述上面的规则就是在脚本执行的时候, 引用的元素还没有被浏览器渲染.

孩子元素

有一些方式获取元素的孩子元素.

childNodes

一个元素引用他们的孩子节点,用childNodes来访问, 返回的是一个节点数组.

所有的节点被引用访问, 包含空白节点(除了IE

代码名称

<!DOCTYPE HTML><html>  <body>    <div>Allowed readers:</div>    <ul>      <li>Bob</li>      <li>Alice</li>    </ul>     <!-- a comment node -->     <script>        function go() {        var childNodes = document.body.childNodes         for(var i=0; i<childNodes.length; i++) {            alert(childNodes[i])        }      }    </script>     <button onclick="go()" style="width:100px">Go!</button>   </body></html>

SCRIPT节点同样包含在其中.

在上面的例子中, document.body.childNodes[1]是DIV元素(在所有的除了IE

children

有时候我们仅需要浏览元素节点, 跳过文本节点.  这时候我们就该用children属性.

他包含所有的元素. 我们来看看统一的一个例子, 但是用children来代替childNodes.

他在这里将会输出的是所有的标签元素.

代码名称

<!DOCTYPE HTML><html>  <body>    <div>Allowed readers:</div>    <ul>      <li>Bob</li>      <li>Alice</li>    </ul>     <!-- a comment node -->     <script>        function go() {        var children = document.body.children         for(var i=0; i<children.length; i++) {            alert(children[i])        }      }    </script>     <button onclick="go()" style="width:100px">Go!</button>   </body></html>

Children 连接关系

通过或一系列的孩子元素还不够, 因为访问他们还不够方便.

因此, 还有其他的属性, 比如siblings, parent等等.

firstChild 和   lastChild

firstChild和lastChild属性可以快速访问第一个和最后一个孩子元素.

他们是基于同样的一致性的childNodes索引.

代码名称

var body = document.body alert(body.firstChild === body.childNodes[0])alert(body.lastChild === body.childNodes[body.childNodes.length-1])

parentNode ,  previousSibling 和  nextSibling

  • parentNode 属性引用到父节点. document.documentElement的父节点为null

  • previousSibling和nextSibling允许访问左节点和右节点.

例如:

代码名称

<!DOCTYPE HTML><html><head>   <title>My page</title></head><body>    <div>The header</div>     <ul><li>A list</li></ul>     <div>The footer</div></body> </body></html>

下图展示 (不包含空白标签):

浏览器总是保持正确的连接关系.

我们可能需要去改变DOM或者添加/移除元素, 但是不需要我们手动去改变他们, 浏览器来做这件事情.

总结

DOM 树是紧密相连的:

父辈

  • parentNode

子辈

  • children/childNodes ,  firstChild ,  lastChild

左右兄弟

  • previousSibling/nextSibling

浏览器保证所有连接关系都是正确的. 他们是只读权限. 如果没有一个元素(子节点, 父节点,相邻节点),他们的值都是null.

编程的人正在在线培训

"前端编程开发","后端开发","移动开发"等,

需要学习的可以加入群或者微信留言

原创内容,转载请注明出处.

公众微信号:bianchengderen

QQ群: 186659233

欢迎大家传播与分享.

融入编程人的生活,了解他们的思维模式,了解他们的喜怒哀乐,关注编程的人.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn