DOM--3 DOM核心和DOM2 HTML(2)
核心Node对象##
由于继承扩展的关系,DOM中大部分对象会有Node对象的属性和方法,其中包括:
- nodeName
DOM2核心中规定的每种nodeType预期的nodeName值
| 对象 | 返回值 |
|---|---|
| Element.nodeName | 元素的名称,大写 |
| Attr.nodeName | 属性的名称,大写 |
| Text.nodeName | #text |
| CDATASection.nodeName | #cdata-section |
| EntityReference.nodeName | 实体引用的名称 |
| Entity.nodeName | 实体的名称 |
| ProcessingInstruction.nodeName | 目标的名称 |
| Comment.nodeName | #comment |
| Document.nodeName | #document |
| DocumentType.nodeName | 文档类型的名称,如HTML |
| DocumentFragment.nodeName | #document fragment |
| Notation.nodeName | 表示法的名称 |
- nodeValue
要注意的是不是所有的DOM对象都是有意义的
| 对象 | 返回值 |
|---|---|
| Element.nodeName | null |
| Attr.nodeName | 字符串形式的属性值 |
| Text.nodeName | 字符串形式的节点内容 |
| CDATASection.nodeName | 字符串形式的节点内容 |
| EntityReference.nodeName | null |
| Entity.nodeName | null |
| ProcessingInstruction.nodeName | 字符串形式的节点内容 |
| Comment.nodeName | 字符串形式的注释文本 |
| Document.nodeName | null |
| DocumentType.nodeName | null |
| DocumentFragment.nodeName | null |
| Notation.nodeName | null |
- nodeType
| 等价命名常量 | nodeType值 |
|---|---|
| Node.ELEMENT_NODE | 1 |
| Node.ATTRIBUTE_NODE | 2 |
| Node.TEXT_NODE | 3 |
| Node.CDATA_SECTION_NODE | 4 |
| Node.ENTITY_REFERENCE_NODE | 5 |
| Node.ENTITY_NODE | 6 |
| Node.PROCESSING_INSTRUCTION_NODE | 7 |
| Node.COMMENT_NODE | 8 |
| Node.DOCUMENT_NODE | 9 |
| Node.DOCUMENT_TYPE_NODE | 10 |
| Node.DOCUMENT_FRAGMENT_NODE | 11 |
| Node.NOTATION_NODE | 12 |
注意在判断nodeType的时候,应该用浏览器中具体的等价常理; 当然,在某些不支持的浏览器中,也可以直接用自己定义的方式比较
if(node.nodeType == Node.ELEMENT_NODE) { }
- parentNode/childNodes
树形结构中,每个Node对象都有许多预定义的属性,分别引用树中的其它相关节点。这些属性除了childNodes引用的是包含DOM对象的NodeList类数组对象(所以可以用item方法获取索引),其它的都引用一个实际的DOM对象。
firstChild/lastChild (一般情况下,这两个节点都应该会是Text节点)
previousSibling/nextSibling(如果没有的话,返回null)
节点的属性###
节点属性也扩展自Node对象,但是它不是包含在通常表示父子关系的树形结构中;作为Attr对象的实例,节点属性被包含在相应节点的attributes成员的一个NamedNodeMap对象中

DOM2中,attributes是Node接口定义的属性,其还实现了Attr和NameNodeMap接口;事实上其包含的是一个节点的所有属性的集合 node.attributes
item, 也可以用次方法获取索引(NameNodeMap对象中的方法)
getNamedItem 根据具体的属性名来获取属性 (NameNodeMap对象中的方法)(getNamedItem()方法与Element对象的getAttribute()方法类似,不过attributes.getNamedItem()方法在任何节点上都有效,也包括那些不是Element对象的节点。)
获取的属性的属性,nodeName/nodeType/nodeValue(现在改为value)
ownerDocument
节点的ownerDocument属性是指向节点所属的根文档的引用。大多数情况下,都可以通过它在作用域中引用document,或者window.document,因为在浏览器中只会有一个document的实例。
- hasChildNodes()/hasAttributes() 检查某个节点是否具有子节点或属性 (而获取它们的个数分别是childNodes.length/attributes.length)
操纵DOM节点树###
- appendChild()/insertBefore(new, node)
- replaceChild(new, old)/removeChild() ;注意它们是在父节点操作的;
- 注意一般获取节点的操作都是直接获取引用,要向操作其副本,使用cloneNode();
DOM--3 DOM核心和DOM2 HTML(2)的更多相关文章
- 解密jQuery内核 DOM操作的核心函数domManip
domManip是什么 dom即Dom元素,Manip是Manipulate的缩写,连在一起就是Dom操作的意思. .domManip()是jQuery DOM操作的核心函数 对封装的节点操作做了参数 ...
- Virtual DOM 虚拟DOM的理解(转)
作者:戴嘉华 转载请注明出处并保留原文链接( #13 )和作者信息. 目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM ...
- React v16-alpha 从virtual dom 到 dom 源码简读
一.物料准备 1.克隆react源码, github 地址:https://github.com/facebook/react.git 2.安装gulp 3.在react源码根目录下: $npm in ...
- 什么是DOM,DOM level 1\2\3 的区别是什么
DOM 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.Document Object Model的历史可以追溯至1990年 ...
- -_-#【Dom Ready / Dom Load】
Dom Ready和Dom Load DOM Ready 详解 javascript的domReady 域名解析 - 加载html - 加载js和css - Dom Ready - 加载图片等其他信息 ...
- js 字符串转dom 和dom 转字符串
js 字符串转dom 和dom 转字符串 博客分类: JavaScript 前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createE ...
- javascript DOM和DOM操作的四种基本方法
在了解了javascript的语言特性后,javascript真正大放光彩的地方来了——这就是javascript DOM Javascript DOM DOM(Document Object Mod ...
- 精讲 org.w3c.dom(java dom)解析XML文档
org.w3c.dom(java dom)解析XML文档 位于org.w3c.dom操作XML会比较简单,就是将XML看做是一颗树,DOM就是对这颗树的一个数据结构的描述,但对大型XML文件效果可能会 ...
- 虚拟DOM Vitural DOM Tree
提起Virtual DOM,总是给人一种高深莫测的感觉,大家都知道它比DOM快.那么Virtual DOM到底是何方神圣呢?在深入理解Virtual DOM之前,先让我们回顾一下DOM. 一.什么 ...
- DOM & Shadow DOM & Virtual DOM
DOM & Shadow DOM & Virtual DOM What is the difference between Shadow DOM and Virtual DOM? ht ...
随机推荐
- SQL Server case表达式的用法
★CASE表达式是一个标量表达式,它基于条件逻辑来返回一个值.因为CASE是一个标量表达式,所以它可以应用在SELECT.WHERE.HAVING以及ORDER BY子句中. CASE表达式有两种格式 ...
- 【QT】C++ GUI Qt4 学习笔记1
Find对话框实现 平台 Qt5.3.2 MinGW4.8.2 注意创建时用QDialog finddialog.h #ifndef FINDDIALOG_H #define FINDDIALOG_H ...
- [Android ] linux命令英文缩写的含义(方便记忆)
du -sh */ reference to : http://blog.chinaunix.net/uid-27164517-id-3299073.html linux常用命令的英文单词缩写 命令缩 ...
- mongodb3.2配置文件yaml格式 详解
mongodb3.x版本后就是要yaml语法格式的配置文件,下面是yaml配置文件格式如下:官方yaml配置文件选项参考:https://docs.mongodb.org/manual/ ... #c ...
- Callable 和 Future接口 学习
* Callable是类似于Runnable的接口,实现Callable接口的类和实现Runnable的类都是可被其它线程执行的任务. * Callable和Runnable有几点不同: * (1)C ...
- 奶牛健美操(codevs 3279)
题目描述 Description Farmer John为了保持奶牛们的健康,让可怜的奶牛们不停在牧场之间 的小路上奔跑.这些奶牛的路径集合可以被表示成一个点集和一些连接 两个顶点的双向路,使得每对点 ...
- 服务器知识----IIS架设问题
1,基本配置,应用程序池,路径等. 2,权限设置 Iuser IIS_users 只读权限 3,isapi映射 framework安装目录下 运行 aspnet_regiis.exe -i 注 ...
- 重温WCF之构建一个简单的WCF(一)(2)通过Windows Service寄宿服务和WCF中实现操作重载
参考地址:http://www.cnblogs.com/zhili/p/4039111.html 一.如何在Windows Services中寄宿WCF服务 第一步:创建Windows 服务项目,具体 ...
- ASP.NET Web Api 实现数据的分页(转载)
转载地址:http://www.cnblogs.com/fzrain/p/3542608.html 前言 这篇文章我们将使用不同的方式实现手动分页(关于高端大气上档次的OData本文暂不涉及,但有可能 ...
- 【数据结构】建立和平衡AVL二叉树
一步一步写平衡二叉树(AVL树) 原文地址:http://www.cppblog.com/cxiaojia/archive/2012/08/20/187776.html 我添加了一些内容,以充实整个算 ...