JS核心之DOM操作 上
JS一个重要功能就是操作DOM, 改变页面显示。
目录:
1、基本概念
2、节点类型
3、节点关系
4、节点操作
基本概念
DOM全称为Document Object Model ,即文档对象模型,是针对HTML和XML的一个API, 描绘了一个层次化的节点树,可以添加、移除和修改页面的某一部分。
DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。
节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形结构。以下面的HTML为例:
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
将这个HTML文档表示为一个层次结构,如下图
方框中黑体字代表节点类型。
文档节点(图中的 Document)是每个文档的根节点,
这个例子中,它只有一个子节点,即 <html>元素,我们称之为文档元素。
文档元素是文档的最外层元素,文档中的其他所有元素都包含在文档元素中。
每个文档只能有一个文档元素。
在HTML页面中,文档元素始终都是<html>元素。
在XML中,没有预定义的元素,任何元素都可能成为文档元素。
每一段标记都可以通过树中的一个节点来表示,总共有12种节点类型,这些类型都继承自一个基类型。
并不是所有节点类型都受到Web浏览器的支持,最常用的就是元素、文本、文档节点(下面数值常量中的1、3和9),我们只要关注这三种就可以了。
我们先看下所有的节点类型。
节点类型
js 中所有节点类型都继承自Node类型,因此都共享着相同的基本属性和方法。
每个节点都有nodeType属性,用于表明节点的类型。
nodeType有12个数值常量,任何类型必居其一。
各节点类型可能的子节点类型
通过比较上面这些常量,可以确定节点类型:
if (someNode.nodeType == 1) {
alert("Node is an element.");
}
节点关系
把文档树比喻成家谱。(如下图,某个节点可以通过属性访问其他节点)
每个节点有一个childNodes属性,其中保存着一个NodeList对象(类数组对象,但不是Array的实例),它是基于DOM结构动态查询的结果。
可通过方括号,也可通过item() 方法来访问NodeList中的节点。例子:
// 访问 NodeList对象中的节点
var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;
在反映这些关系的所有属性中,childNodes属性更方便一些,因为只须使用简单的关系指针,就可以通过它访问文档树中的任何节点。
节点操作
因为关系指针是只读的,所以DOM提供了一些操作节点的方法。
主要是 添加、插入、替换、移除,我们分别介绍。
1、末尾添加一个节点
这是我们最常用的操作,appendChild(),用于向childNodes列表的末尾添加一个节点。
添加节点后,childNodes的新增节点、父节点及以前的最后一个子节点的关系指针都会相应的得到更新。更新完成后,appendChild()返回新增的节点。
// appendChild()
var returnedNode = someNode.appendChild(newNode);
alert(returnedNode == newNode); // true
alert(someNode.lastChild == newNode); // true
如果传入到appendChild()中的节点已经是文档的一部分,那结果就是将该节点从原来的位置转移到新位置。
2、插入节点
如果要把节点插入到 childNodes 列表中某个特定的位置上,用insertBefore(要插入的节点,作为参照的节点)。
插入节点后,被插入的节点会变成参照节点的前一个同胞节点(previousSibling),同时被方法返回。
如果参照节点是null, 则 insertBefore()与appendChild()执行相同的操作。
// insertBefore()
// 插入后成为最后一个子节点
returnedNode = someNode.insertBefore(newNode, null);
alert(newNode == someNode.lastChild); // true
// 插入后成为第一个子节点
var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);
alert(returnedNode == newNode); //true
alert(newNode == someNode.firstChild); //true
// 插入到最后一个子节点的前面
returnedNode = someNode.insertBefore(newNode, someNode.lastChild);
alert(newNode==someNode.childNodes[someNode.childNodes.length-2]); //true
3、替换节点
如果要替换节点,用 replaceChild(要插入的节点,要替换的节点)
要替换的节点将由这个方法返回并从文档树中被移除,同时由要插入的节点占据其位置。
// 替换节点 replaceChild()
// 替换第一个子节点
var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);
4、移除节点
移除节点用 removeChild(移除的节点)。
被移除的节点成为方法的返回值。
// 移除节点 removeChild()
// 移除第一个节点
var formerFirstChild = someNode.removeChild(someNode.firstChild);
移除的节点仍然为文档所有,不过在文档中已经没有了自己的位置。
前面介绍的四个方法操作的都是某个节点的子节点,也就是说,要使用这几个方法必须先取得父节点(使用parentNode属性)。
5、其他方法
cloneNode(),接受一个布尔值参数,表示是否执行深复制。
true, 执行深复制,也就是复制节点及其整个子节点数。
false, 执行浅复制,即只复制节点本身。
返回的节点副本属于文档所有,但没有指定父节点。
因此,这个节点副本就成为“孤儿”,除非通过 appendChild(), insertBefore()或replaceChild()将它添加到文档中。
下一篇中,我们详解 常用到的 document, element, text 三种节点类型,并结合节点操作,介绍几个常用的示例。
JS核心之DOM操作 上的更多相关文章
- JS核心之DOM操作 下
目录: 1.节点类型之Document类型 2.节点类型之Element类型 3.节点类型之Text类型 4.综合小示例 -- 动态添加外部样式文件 5.查找元素的扩展方法 接上篇,我们先来看常用的三 ...
- js中的DOM操作汇总
一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...
- React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接和作者信息. 在 React.js 当中你基本不需要和 DO ...
- ref 和 React.js 中的 DOM 操作
在 React.js 当中你基本不需要和 DOM 直接打交道.React.js 提供了一系列的 on*方法帮助我们进行事件监听,所以 React.js 当中不需要直接调用 addEventListen ...
- js练习【DOM操作】
完成效果: 演示地址:http://codepen.io/anon/pen/jPbYWq HTML: <!DOCTYPE html> <html lang="en" ...
- [笔记]原生JS实现的DOM操作笔记
原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasC ...
- 【2017-03-28】JS基础、DOM操作
一.JS基础 1.javascript功能 ⑴进行数据运算 ⑵控制浏览器功能 ⑶控制元素的属性.样式.内容 2.javascript位置和格式 可以放在html页的任意位置,也可以创建一个以js结尾的 ...
- JS中的DOM操作怎样添加、移除、移动、复制、创建和查找节点
DOM操作怎样添加.移除.移动.复制.创建和查找节点? (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元 ...
- JS中的DOM操作和事件
[DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:可以使用getElement系列方法, ...
随机推荐
- lnmp php使用命令行去备份数据库
<?php //备份数据库we8和foshan $time = date("Y-m-d",time()); $backtime = date("Y-m-d" ...
- 动手造轮子:基于 Redis 实现 EventBus
动手造轮子:基于 Redis 实现 EventBus Intro 上次我们造了一个简单的基于内存的 EventBus,但是如果要跨系统的话就不合适了,所以有了这篇基于 Redis 的 EventBus ...
- 这 3 个 Set 集合的实现有点简单,那来做个总结吧
Set 接口是 Java Collections Framework 中的一员,它的特点是:不能包含重复的元素,允许且最多只有一个 null 元素.Java 中有三个常用的 Set 实现类: Hash ...
- 【Python3爬虫】当爬虫碰到表单提交,有点意思
一.写在前面 我写爬虫已经写了一段时间了,对于那些使用GET请求或者POST请求的网页,爬取的时候都还算得心应手.不过最近遇到了一个有趣的网站,虽然爬取的难度不大,不过因为表单提交的存在,所以一开始还 ...
- 【Spring】org.springframework.web.context.ContextLoaderListen 报错
详细信息如下: org.apache.catalina.core.StandardContext.listenerStart Error configuring application listene ...
- .Net Core DevOps -免费用Azure四步实现自动化发布(CI/CD)
前言 linux 大行其道的今天想必大家都已经拥抱 core 了吧,通常的方案都是 gitlab+jenkins+centos,但是这样的方案不适合我这种懒人,一直在寻求简单的解决方案,在寻求方案的过 ...
- MOCTF-WEB-writeup
MOCTF-WEB-writeup 好菜,除了简单的几个题,自己会做,难的都是看老大WP完成的,太菜了 啥姿势都不会,就此记录一下,供日后查看及反省.菜鸡的自我修养 0x01 一道水题 题目链接:ht ...
- GridLayout and GridData
GridLayout的风格 GridLayout类提供了GridLayout 布局中划分网格的信息,主要通过以下几个参数进行设置. 属性: NumColumns:通过“gridLayout.numCo ...
- 【Java例题】7.5 文件题2-学生成绩统计
5.学生成绩统计.已有一个学生成绩文件,含有多位学生的各三门课的成绩:读取这个文件中的每位学生的三门课成绩,然后计算均分:最后对这些均分按照大于或小于75分的界限,分别写到另两个文件中. packag ...
- 【Java例题】3.2字符图形
2.输出以下字符图形. 比如,当n=6时,结果如下: 1 2 2 2 3 3 3 3 3 4 4 4 4 4 4 5 5 5 5 6 6 再比如,当n=7时,结果如下: 1 2 2 2 3 3 3 3 ...