JS DOM处理小结
来源:互联网 发布:大闹天宫神器进阶数据 编辑:程序博客网 时间:2024/05/19 13:55
DOM即文件对象模型(Document Object Model,简称DOM),
HTML DOM 定义了访问和操作 HTML 文档的标准方法。
个人理解:
(1)其实它就是将 HTML 文档以节点(Node)为单位将其表达为等级明确、节构整齐的树节构,以便于简捷地操作文档的元素。
(2)它在一定程度上对HTML(或XML)元素(节点)实现了“黑盒”访问和操作。例如,我们获得了一个节点对象,然后直接用它的parentNode属性获得它的父节点(如果父节点存在的话),进而访问或操作父节点对象,而我们无需知道它的父节点是什么类型的对象,它的id是什么等等,父节点就是封装好的一个“黑盒”,我们不知道它的id、name等所有属性,依然可以利用dom技术随意操作它。
DOM对节点(Node)的定义:
Ø 整个文档是一个文档节点
Ø 每个 HTML 标签是一个元素节点
Ø 包含在 HTML 元素中的文本是文本节点
Ø 每一个 HTML 属性是一个属性节点
Ø 注释属于注释节点
DOM中节点的层级关系
层级关系很明确也很简单,根据节点之间的关系将其分为三种:父(parent)、子(child)、同胞(sibling)
下图展示节点树中节点之间的关系:
DOM节点树示意图:
下面是总节的DOM的基础操作:
(1)引用dom节点
注:document.getElementById(id)返回的是Node对象的引用而不是Node对象的副本,实例证明:
构造一个一行三列的表格,加脚本前,标签框“测试文字”在第一列下:
加js代码,用appendChild()方法将用getElementById()方法获得的标签框加到第三列下:(从下图中可以看到,此时第一列下的标签框已不存在了,说明document.getElementById(id)返回的是Node对象的引用而不是Node对象的副本)
(2)获得dom节点信息
常用节点类型对应的nodeName值:
(注:nodeName是只读的)
对象
返回值
Element.nodeName
元素名称,大写
Attr.nodeName
属性名称,小写
Text.nodeName
#text
Entity.nodeName
实体名称
Comment.nodeName
#comment
Document.nodeName
#document
DocumentType.nodeName
文档类型名称,图HTML
nodeType的值与等价的命名常量:(注:IE中Node对象不存在,所有只能使用数字表示nodeType,当然可以自定义函数将两者映射起来,以使用常量)
nodeType值
等价命名常量
1
Node.ELEMENT_NODE
2
Node.ATTRIBUTE_NODE
3
Node.TEXT_NODE
4
Node.CDATA_SECTION_NODE
5
Node.ENTITY_REFERENCE_NODE
6
Node.ENTITY_NODE
7
Node.PROCESSING_INSTRUCTION_NODE
8
Node.COMMENT_NODE
9
Node.DOCUMENT_NODE
10
Node.DOCUMENT_TYPE_NODE
11
Node.DOCUMENT_FRAGMENT_NODE
12
Node.NOTATION_NODE
(3)处理属性节点
(4)处理文本节点
注意:无论是ie还是firefox都容易把空格、换行、制表符等当成文本节点。所有一般通过element.childNodes[i]引用文本节点的时候,一般要处理掉这些字符:
<script language"javaScript" type="text/javascript"> function cleanWhitespace(element) { for(var i=0; i<element.childNotes.length; i++) { var node = element.childNodes[i]; if(node.nodeType == 3 && !/\S/.test(node.nodeValue)) { node.parentNode.removeChild(node); } } } </script>
(5)操作DOM节点树
(6)表格操作
总结:
Ø DOM实际上是以面向对象方式描述的文档模型,可以把DOM认为是页面上数据和结构的一个树形表示。它可以以一种独立于平台和语言的方式访问和修改一个文档(html、xml)的内容和结构。
Ø Dom技术使得用户页面可以动态地变化,如可以动态地显示或隐藏一个元素,改变它们的属性,增加一个元素等,Dom技术使得页面的交互性大大地增强。
- JS DOM处理小结
- 【JS】DOM小结
- js-dom对checkbox处理
- JS DOM事件处理程序
- js--DOM(事件处理)
- js课程笔记(二)DOM小结
- 最常用的js DOM方法小结
- JS小结-DOM与BOM区别
- 精通js之 处理DOM中的空格
- Dom小结:
- DOM小结
- DOM 小结
- DOM小结
- DOM小结
- DOM小结
- DOM小结
- Js 获取HTML DOM节点元素的方法小结
- js学习小结(十二)2014.5.20(遍历dom)
- HDU 1575 Tr A(快速幂 + 二分)
- OpenCV 编码样式指南
- 泛型的嵌套
- asp.net自定义错误页面
- 第一篇博客-记自己做java程序员的原因
- JS DOM处理小结
- java整数可变字节压缩
- hdu 2108 Shape of HDU
- 2013第一次组队训练赛
- C/C++以及Java中移位的问题以及负数移位
- HDU 4287 Intelligent IME
- 《深入理解Nginx》阅读与实践(二):配置项的使用
- 2013-8-14大一大二暑期组队训练赛
- 芯嵌stm32介绍