第十章—DOM(0)—NODE类型

DOM1定义了一个node接口,该接口由DOM的所有节点类型实现。

所有的节点都存在这样或那样的关系。在HTML中,head,body可以看出是html的子元素,html是head,body的父元素,而head,body互为同胞元素。

这里要注意一个概念:nodeList

输出:

如下例子:

 1 <div id="myDiv"> </div><!-- 此处有空格 -->
 2  <script>
 3     var div = document.getElementById(‘myDiv‘);
 4     var test = div.firstChild;
 5     if (test.nextSibling === null) {
 6         alert(‘good‘);//输出good
 7     }
 8     if (test.previousSibling === null) {
 9         alert(‘bad‘);//输出bad
10     }

操作节点

加入到文档中

 1     <style>
 2         #test {font-size: 20px;background: red;height: 100px;}
 3         #myDiv {color:red;}
 4     </style>
 5 </head>
 6 <body>
 7   <ul id="test">
 8       <li>1</li><li>2</li><li>3</li>
 9   </ul>
10  <script>
11    var oul = document.getElementById(‘test‘);
12    var deep = oul.cloneNode(true);
13    alert(deep.childNodes.length);//7
14    oul.parentNode.insertBefore(deep,oul);
15    var shallow = oul.cloneNode(false);
16    alert(shallow.childNodes.length);//0
17    oul.parentNode.insertBefore(shallow,deep);
18
19  </script>

输出:

时间: 2024-10-15 12:34:18

第十章—DOM(0)—NODE类型的相关文章

从原型链看DOM--Node类型

前言: 本系列从原型,原型链,属性类型等方面下手学习了DOM文档对象模型,旨在弄清我们在DOM中常用的每一个属性和方法都清楚它从哪里来要到哪里做什么事,这样对于理解代码有一定启发.全靠自己在总结中摸索,所以对于一个问题要是深究还真能挖出许多有意思的东西,现在觉得JavaScript这个东西简直越来越有意思了. 正文:DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次化的节点树,允许开发人员添加,移除,修改页面某一部分,现在它已成为表现和操作页面

js—— DOM中的node类型(二)

DOM中的node类型 DOM1中定义了一个Node接口,这个接口在js中作为Node类型实现,除IE外,其他浏览器都可以访问到这个类型.Js中所以节点类型都继承自Node类型,节点类型都享有共同的·基本属性和方法. 每个节点都有nodeType属性,表明节点类型,由12个常量表示,任何节点必居其一. Node.ELEMENT_NODE 1 元素节点 Node.ATTRIBUTE_NODE 2 属性节点 Node.TEXT_NODE 3 文本节点 ...... 常用的为以上三种,还有其他类型可去

js DOM Node类型

DOM(文档对象模型)是针对HTML和XML文档的一个API. DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的.以特定节点为根节点的树形结构.节点分为12种不同的类型,每种类型分别表示文档中的不同信息及(或)标记.这些类型都继承自一个基类型. 以下面为例: <html> <!--文档元素,文档节点的子节点,是文档的最外层元素.每个文档只有一个文档元素.--> <head> <title>My article</title> <

JavaScript高级程序设计学习笔记第十章--DOM

1.DOM:文档对象模型,是针对 HTML 和 XML 文档的一个 API(应用程序编程接口). 2.DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构. 3.文档节点是每个文档的根节点.在这个例子中,文档节点只有一个子节点,即<html>元素,我们称之为文档元素.文档元素是文档的最外层元素,文档中的其他所有元素都包含在文档元素中.每个文档只能有一个文档元素.在 HTML 页面中,文档元素始终都是<html>元素.在 XML 中,没有预定义的元素,因此任何

读书笔记 - js高级程序设计 - 第十章 DOM

文档元素 是文档的最外层元素,在Html页面中,文档元素始终都是<html>元素 在xml中,任何元素都可以是文档元素 Node类型 Node.ELEMENT_NODE 元素 Node.ATTRIBUTE_NODE 属性 Node.TEXT_NODE 文本元素 Node.CDATA_SECTION_NODE Node.ENTITY_REFERENCE_NODE Node.ENTITY_NODE Node.PROCESSING_INSTRUCTION_NODE; Node.COMMENT_NOD

Node类型

所有的节点都继承自Node类型,因此所有的节点都具有Node类型的所有属性和方法. Node类型的属性 1 nodeType:通过nodeType可以确定一个节点属于那一个类型的节点. nodeType的值有两种,一种是用数字表示节点的类型,另一种是用字符常量来表示,因为第二种方法在IE浏览器中不适用,所以全部使用第一种方 法来表示. 其中nodeType的值为1代表是元素节点,即各种标签 nodeType的值为9代表文档节点,即document节点 nodeType的值为3代表文本节点,即标签

第十章 DOM

10.1节点层次 html元素通过元素节点表示,特性节点通过特性节点表示,文档类型节点通过文档类型节点访问,这些类型都继承一个基类型. 10.1.1 Node类型 nodeType属性表明节点的类型 每个节点都有一个childNodes属性,保存着一个Nodelist类数组对象,可以使用Array.prototype.slice()方法将其转换为数组 parentNode属性指向文档树中的父节点 previousSbling.nextSibling appendchild()向childNode

JavaScript高级程序设计:第十章 - DOM

1. 什么是DOM? DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口).DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 2. 节点层次 文档节点(document)是每个文档的跟节点.文档元素是文档的最外层元素,文档中的其他所有元素都包含在文档元素之中.在HTML页面中,文档元素始终都是元素.在 XML 中,没有预定义的元素,因此任何元素都可能成为文档元素. 每一段标记都可以通过树中的一个节点来表示: HTML 元素通过元素

cocos2d-x 3.0 Node与Node层级结构

节点解释: 节点是场景图的基本元素.场景图的基本元素必须是节点对象或者是节点对象的子类. 其中主要可以看到Layer.MenuItem.Scene.Sprite.TMXTiledMap(解析and渲染TMX地图).ParticleSystem(粒子系统基类)等等 Node是这些类的根类 节点的基本操作 创建节点   Node* childNode = Node::Create(); 增加新的子节点   node->addChild(childNode,z深度,tag); 查找子节点   Node