ホームページ > 記事 > ウェブフロントエンド > DOM の基本属性 nodes_html/css_WEB-ITnose
DOM の基本属性 nodes_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:21:101629ブラウズ
Dom节点是一个对象, 它包含了关于他自己的属性信息和他的内容. 有些属性是只读的, 有些属性是可以更改的.
结构和内容属性
nodeType
下面是所有的节点类型. 总共有12种类型节点. 更多的介绍: DOM Level
interface Node { // NodeType const unsigned short ELEMENT_NODE = 1; const unsigned short ATTRIBUTE_NODE = 2; const unsigned short TEXT_NODE = 3; const unsigned short CDATA_SECTION_NODE = 4; const unsigned short ENTITY_REFERENCE_NODE = 5; const unsigned short ENTITY_NODE = 6; const unsigned short PROCESSING_INSTRUCTION_NODE = 7; const unsigned short COMMENT_NODE = 8; const unsigned short DOCUMENT_NODE = 9; const unsigned short DOCUMENT_TYPE_NODE = 10; const unsigned short DOCUMENT_FRAGMENT_NODE = 11; const unsigned short NOTATION_NODE = 12; ...} 最重要的两个类型是ELEMENT_NODE, 对应的值为1, TEXT_NODE, 对应的值为3. 其他的类型很少使用.
例如, 使用childNodes和类型属性(childNodes[i].nodeType != 1)去迭代显示所有元素节点.
下面是例子的演示:
<body> <div>Allowed readers:</div> <ul> <li>John</li> <li>Bob</li> </ul> <!-- a comment node --> <script> var childNodes = document.body.childNodes for(var i=0; i<childNodes.length; i++) {if (childNodes[i].nodeType != 1) continue alert(childNodes[i]) } </script></body> 下面的页面会弹出什么, 大家试试写写看例子?
<!DOCTYPE HTML><html> <body> <script> alert(document.body.lastChild.nodeType) </script></body> </html>
nodeName, tagName
nodeName和tagName包含了元素节点的名称.
例如 document.body:
alert( document.body.nodeName ) // BODY
在HTML任何的nodeName都是大写的, 不过不要紧, 在文档中你可以使用它.
当'nodeName'不是大写的时候.
当nodeName不是大写的时候, 是个特殊情况, 是非常的少见的. 如果感到好奇, 那继续阅读下去.
正如我们所知, 一个浏览器有两种解析方式: HTML模式和XML模式. 通常都是用HTML模式解析, 但是XML文档, 通过XMLHttpRequest(AJAX技术)接收的时候, XML模式激活.
在火狐中, 当XHTML文档有xmlish内容类型的时候,XML模式也被使用.
在XML模式nodeName保留大小写, 因此他们可能呈现"body"和"bOdY"的节点名称.
因此, 如果通过XMLHttpRequest从服务器中加载XML文档到HTML文档中, 他们保持原来的样子.
对于元素节点, nodeName和tagName也是一样的.
但是nodeName属性在不是元素节点中也是存在的. 这样的节点包含特殊的值, 比如下面的例子:
alert(document.nodeName) // #document
tagName属性在多数节点类型和IE中等于'!'的注释中, 他们是undefined的.
因此, 通常tagName的信息少于nodeName. 但是他的符号简短. 因此,如果你仅在使用元素节点, 你会更喜欢用它.
innerHTML
innerHTML属性是HTML5标准的一部分.
他允许你访问节点的内容. 下面这个例子将会输出document.body的所有内容,以及通过一个新的内容来代替原有的内容.
<body> <p>The paragraph</p> <div>And a div</div> <script> alert( document.body.innerHTML ) // read current contents document.body.innerHTML = 'Yaaahooo!' // replace contents </script></body>
innerHTML需要包含一个有效的HTML.但是通常浏览器可以将那些不友好的HTML解析的很好.
innerHTML在任何元素节点都是有效的. 他在我们写代码中, 非常的有用.
innerHTML陷阱
innerHTML不像看起来那么简单的. 对于一个新手,甚至一个有经验的开发人员, 都会遇到一些陷阱.
只读 `innerHTML` (在IE的表格使用中)
在IE中, innerHTML对于 COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR 是只读的.
在IE中, innerHTML 对于所有的表格相关标签都是只读的(除了TD标签).
`innerHTML` 不能被追加
通常情况下, 我们可以通过innerHTML追加内容(elem.innerHTML += "NEW TEXT"), 例如:
chatDiv.innerHTML += "dc6dce4a544fdca2df29d5ac0ea9906bHi be72398faad8df50201ea50b25d0696d !16b28748ea4df4d9c2150843fecfba68"
chatDiv.innerHTML += "How you doing?"
但是实际他是这样工作的:
-
原来的内容被去除
-
新的值通过innerHTML解析替换.
内容不能被追加, 他是重新构建的. 因此, 所有的图片和其他资源在+=之后, 将会被重载. 比如上面的例子的smile.gif文件.
幸运的是, 我们有另外的方法去更新内容. 更新内容我们就不要使用innerHTML方式了.否则带来性能问题.
nodeValue
innerHTML在标签元素中可以使用.但是对于另外的节点类型, 有nodeValue属性来访问内容.
下面这个例子展示了文本节点和注释的节点内容.
<body> The text <!-- A comment --> <script> for(var i=0; i<document.body.childNodes.length; i++) { alert(document.body.childNodes[i].nodeValue) } </script></body> 在上面的例子中, 有些会弹出空的数据, 因为有些空白的文本节点. 注意SCRIPT的nodeValue === null. 这是因为SCRIPT是一个元素节点. 元素节点使用innerTHML.
总结
-
nodeType
-
节点类型, 多说情况下使用的是标签元素节点值为1 和 文本节点,值为3. 属性是只读的.
-
nodeName/tagName
-
标签名称是大写的. 不是元素标签的节点 nodeName有着特殊的值. 属性是只读的.
-
innerHTML
-
元素节点的内容. 可写.
-
nodeValue
-
文本节点的内容. 可写.
DOM节点还有另外的属性, 依靠本身是什么样的标签. 例如, 一个INPUT元素有value和checked属性 A标签有href属性等等
编程的人正在在线培训
"前端编程开发","后端开发","移动开发"等,
需要学习的可以加入群或者微信留言
原创内容,转载请注明出处.
公众微信号:bianchengderen
QQ群: 186659233
欢迎大家传播与分享.
融入编程人的生活,了解他们的思维模式,了解他们的喜怒哀乐,关注编程的人.