第十章—DOM(0)—NODE类型
DOM1定义了一个node接口,该接口由DOM的所有节点类型实现。
所有的节点都存在这样或那样的关系。在HTML中,head,body可以看出是html的子元素,html是head,body的父元素,而head,body互为同胞元素。
这里要注意一个概念:nodeList


输出:



如下例子:
<div id="myDiv"> </div><!-- 此处有空格 -->
<script>
var div = document.getElementById('myDiv');
var test = div.firstChild;
if (test.nextSibling === null) {
alert('good');//输出good
}
if (test.previousSibling === null) {
alert('bad');//输出bad
}


操作节点




加入到文档中
<style>
#test {font-size: 20px;background: red;height: 100px;}
#myDiv {color:red;}
</style>
</head>
<body>
<ul id="test">
<li>1</li><li>2</li><li>3</li>
</ul>
<script>
var oul = document.getElementById('test');
var deep = oul.cloneNode(true);
alert(deep.childNodes.length);//7
oul.parentNode.insertBefore(deep,oul);
var shallow = oul.cloneNode(false);
alert(shallow.childNodes.length);//0
oul.parentNode.insertBefore(shallow,deep); </script>
输出:

第十章—DOM(0)—NODE类型的更多相关文章
- 第十章—DOM(一)——Document类型
DOCUMENT类型 JS通过document类型表示文档,在文档中document对象是HTMLDocument的一个实例,表示整个HTML页面.document对象是window对象的一个属性,因 ...
- js DOM Node类型
DOM(文档对象模型)是针对HTML和XML文档的一个API. DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的.以特定节点为根节点的树形结构.节点分为12种不同的类型,每种类型分别表示 ...
- 从原型链看DOM--Node类型
前言: 本系列从原型,原型链,属性类型等方面下手学习了DOM文档对象模型,旨在弄清我们在DOM中常用的每一个属性和方法都清楚它从哪里来要到哪里做什么事,这样对于理解代码有一定启发.全靠自己在总结中摸索 ...
- DOM(一):节点层次-Node类型
Node类型DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现,每个节点都有一个nodeType属性,用于表明节点的类型.节点类型由在Node类型中定义的下列12个数值常量来表示, ...
- Node类型知识大全
Node类型 1.节点关系 每个节点都有一个childNodes属性,其中保存着一个NodeList对象.NodeList是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点.请注意, ...
- DOM 节点node
DOM可以将任何HTML或XML文档描绘成一个有多层节点构成的结构,即在HTML中所有内容都是节点.文档节点是每个文档的根节点,文档节点有一个子节点,称为文档元素.每个文档只能有一个文档元素.在HTM ...
- JavaScript高级程序设计学习笔记第十章--DOM
1.DOM:文档对象模型,是针对 HTML 和 XML 文档的一个 API(应用程序编程接口). 2.DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构. 3.文档节点是每个 ...
- 读书笔记 - js高级程序设计 - 第十章 DOM
文档元素 是文档的最外层元素,在Html页面中,文档元素始终都是<html>元素 在xml中,任何元素都可以是文档元素 Node类型 Node.ELEMENT_NODE 元素 Node ...
- 第十章 DOM
10.1节点层次 html元素通过元素节点表示,特性节点通过特性节点表示,文档类型节点通过文档类型节点访问,这些类型都继承一个基类型. 10.1.1 Node类型 JavaScript中的所有节点类型 ...
随机推荐
- PHP面向对象魔术方法基本了解
简单介绍 (1) 魔术方法都是系统提供,程序员使用即可. (2) 所有的魔术方法,前面都是以 __ 开头的 _是两个下划线. (3) 我们在自定义函数时,就不要使用 __开头了. (4) 魔术方法是 ...
- spring retry 重试机制完整例子
public static Boolean vpmsRetryCoupon(final String userId) { // 构建重试模板实例 RetryTemplate retryTemplate ...
- springcloud(四):Eureka的配置详解
在Eureka的服务治理体系中,主要分为服务端和客户端两个不同的角色,服务端为服务注册中心,客户端为提供各个接口的微服务应用,这里介绍一下Eureka的配置. Eureka服务端配置 在实际应用中,我 ...
- 廖雪峰Java9正则表达式-2正则表达式进阶-6搜索和替换
1.使用正则表达式分割字符串: String[] string.split(String regex); "a b c".split("\\s");->[ ...
- python 连接mssql数据库
1.目标数据sql2008 R2 ComPrject=>TestModel 2.安装python 连接mssql 模块 运行 pip install pymssql-2.2.0.dev0-cp3 ...
- C#可扩展编程之MEF(三):导出类的方法和属性
前面说完了导入和导出的几种方法,如果大家细心的话会注意到前面我们导出的都是类,那么方法和属性能不能导出呢???答案是肯定的,下面就来说下MEF是如何导出方法和属性的. 还是前面的代码,第二篇中已经 ...
- IntelliJ IDEA 如何在同一个窗口创建多个项目
一.IntelliJ IDEA与Eclipse的区别 二.在同一个窗口创建多个项目 1.打开IntelliJ IDEA,点击Create New Project 2.Java Enterprise ...
- 自定义切面实现用户日志记录--AOP
在软件业,AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中的 ...
- idea短信验证
idea短信验证(短信接口:阿里云:消息中间件:activeMQ) 主要分为两步:1.创建发消息 2.创建收消息 1.创建发消息 1.1 创建maven工程 1.2 pom.xml文件导入依赖 注意 ...
- python函数当容器
def func(): pass func2 = func func2() i = [func,func2] for a in i: a() 函数名就是内存地址,加()代表执行