核心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)的更多相关文章

  1. 解密jQuery内核 DOM操作的核心函数domManip

    domManip是什么 dom即Dom元素,Manip是Manipulate的缩写,连在一起就是Dom操作的意思. .domManip()是jQuery DOM操作的核心函数 对封装的节点操作做了参数 ...

  2. Virtual DOM 虚拟DOM的理解(转)

    作者:戴嘉华 转载请注明出处并保留原文链接( #13 )和作者信息. 目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM ...

  3. React v16-alpha 从virtual dom 到 dom 源码简读

    一.物料准备 1.克隆react源码, github 地址:https://github.com/facebook/react.git 2.安装gulp 3.在react源码根目录下: $npm in ...

  4. 什么是DOM,DOM level 1\2\3 的区别是什么

    DOM 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.Document Object Model的历史可以追溯至1990年 ...

  5. -_-#【Dom Ready / Dom Load】

    Dom Ready和Dom Load DOM Ready 详解 javascript的domReady 域名解析 - 加载html - 加载js和css - Dom Ready - 加载图片等其他信息 ...

  6. js 字符串转dom 和dom 转字符串

    js 字符串转dom 和dom 转字符串 博客分类: JavaScript   前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createE ...

  7. javascript DOM和DOM操作的四种基本方法

    在了解了javascript的语言特性后,javascript真正大放光彩的地方来了——这就是javascript DOM Javascript DOM DOM(Document Object Mod ...

  8. 精讲 org.w3c.dom(java dom)解析XML文档

    org.w3c.dom(java dom)解析XML文档 位于org.w3c.dom操作XML会比较简单,就是将XML看做是一颗树,DOM就是对这颗树的一个数据结构的描述,但对大型XML文件效果可能会 ...

  9. 虚拟DOM Vitural DOM Tree

      提起Virtual DOM,总是给人一种高深莫测的感觉,大家都知道它比DOM快.那么Virtual DOM到底是何方神圣呢?在深入理解Virtual DOM之前,先让我们回顾一下DOM. 一.什么 ...

  10. DOM & Shadow DOM & Virtual DOM

    DOM & Shadow DOM & Virtual DOM What is the difference between Shadow DOM and Virtual DOM? ht ...

随机推荐

  1. jsp页面路径问题

    jsp路径默认不是项目跟路径 一. <%@ page language="java" import="java.util.*" pageEncoding= ...

  2. 批处理命令——goto 和 :

    谈起goto,相信大家应该想到的是面向过程编程.其实,这就相当于当有人向你谈起class,意味着你就懂得面向对象编程.如果你不懂,那么你们的沟通将会很困难.不懂我说的啥意思吗?请参见曾经分享王路的一篇 ...

  3. 未将对象引用设置到对象的实例 启用 JIT 调试后,任何无法处理的异常

    严谨!!!! DataSet ds = salarySum.GetDataSalarySum2(libUser.SelectedValue, dtpMonth.Value.Date);         ...

  4. Gym 100703K Word order 贪心

    题目链接 题意:给定一个长度为n的字符串,字符串仅由"F","N","A"三种字符组成,现有一种操作P,即把两个相邻的字符调换位置.要求把所 ...

  5. 使用Ajax上传图片到服务器(不刷新页面)

    有时候我们需要上传图片时不刷新页面,那么Ajax就是很好的东西哦.之前在网上找了很多的资料都不对,不是这里就是那里错,这是本人亲自测试了的哈,是没有问题的,若有不足之处希望指正.我用的.net,对了这 ...

  6. 使用autolayout,设置子控件的宽度 与父视图的宽度成比例大小(这样类似可以设置多个按钮平均横屏排列)

    橙色是父视图,假设约束如上图. 绿色是子视图.重点宽度比例设置: 1. control-drag 选择 equal width2. 选中上面那个约束 注意 first item 和 second it ...

  7. 【转】字符集和字符编码(Charset & Encoding)

    相信大家一定碰到过,打开某个网页,却显示一堆像乱码,如"бЇЯАзЪСЯ"."�????????"?还记得HTTP中的Accept-Charset.Accept ...

  8. IT人学习方法论(二):学习误区

    之前我们讨论了“学什么”的问题,今天我们来谈一谈“怎么学”的问题.磨刀不误砍柴工,我们要提高学习效率,首先需要找到自己学习方法上的误区. 一些常见的学习方法误区 1)资料导向型 现在就停止阅读这篇文章 ...

  9. Jquery学习笔记---闭包

    1. 简要介绍 闭包可谓是js中的一大特色了,即使你对闭包没概念,你可能已经在不知不觉中使用到了闭包.闭包是什么,闭包就是一个函数可以访问到另一个函数的变量.这就是闭包,解释起来就这么一句话,不明白? ...

  10. Arch Linux 安装、配置、美化和优化

    国庆假期玩了下Arch Linux,发现这货跟Ubuntu之流相差甚远,甚难调教,而且安裝过程全命令行,会有各种问题,各种知识... --- 安装引导器--- -------------------- ...