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)去迭代显示所有元素节点.
下面是例子的演示:
allowed readers:
john bob
下面的页面会弹出什么, 大家试试写写看例子?

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的所有内容,以及通过一个新的内容来代替原有的内容.
the paragraph
and a div

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 += hi !
chatdiv.innerhtml += how you doing?
但是实际他是这样工作的:
原来的内容被去除
新的值通过innerhtml解析替换.
内容不能被追加, 他是重新构建的. 因此, 所有的图片和其他资源在+=之后, 将会被重载. 比如上面的例子的smile.gif文件.
幸运的是, 我们有另外的方法去更新内容. 更新内容我们就不要使用innerhtml方式了.否则带来性能问题.
nodevalue innerhtml在标签元素中可以使用.但是对于另外的节点类型, 有nodevalue属性来访问内容.
下面这个例子展示了文本节点和注释的节点内容.
the text
在上面的例子中, 有些会弹出空的数据, 因为有些空白的文本节点. 注意script的nodevalue === null. 这是因为script是一个元素节点. 元素节点使用innerthml.
总结 nodetype
节点类型, 多说情况下使用的是标签元素节点值为1 和 文本节点,值为3. 属性是只读的.
nodename/tagname
标签名称是大写的. 不是元素标签的节点 nodename有着特殊的值. 属性是只读的.
innerhtml
元素节点的内容. 可写.
nodevalue
文本节点的内容. 可写.
dom节点还有另外的属性, 依靠本身是什么样的标签. 例如, 一个input元素有value和checked属性 a标签有href属性等等
编程的人正在在线培训 前端编程开发,后端开发,移动开发等, 需要学习的可以加入群或者微信留言 原创内容,转载请注明出处. 公众微信号:bianchengderen qq群: 186659233 欢迎大家传播与分享. 融入编程人的生活,了解他们的思维模式,了解他们的喜怒哀乐,关注编程的人.