第2章DOM概述
来源:互联网 发布:java poi 下载excel 编辑:程序博客网 时间:2024/06/06 10:05
第2章DOM概述
1.1 解析过程
HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树,getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。
1.2 DOM (文档对象模型)
document是文档对象模型的一部分。
DOM是一个复合的数据类型。
1.3 DOM的数据结构(树状)
1.4 HTML的组成部分为节点( Node )
在HTML当中一切都是节点……
由结构图中我们可以看到,整个文档就是一个文档节点。
每一个HMTL标签都是一个元素节点(标签)。
标签中的文字则是文字节点。(文本)
标签的属性是属性节点。(属性)
1.5 DOM节点的获得
操作节点,必须首先找到该元素。有三种方法来做这件事:
通过 id 找到 HTML 元素
document.getElementById("demo");
通过标签名找到 HTML 元素
document.getElementsByTagName("div");
通过类名找到 HTML 元素
document.getElementsByClassName("a");
通过类名查找 HTML 元素在 IE 5,6,7,8 中无效
标签=document.getElementById("demo"); 通过ID获得标签
他的返回值是一个标签,可以直接使用。获得属性值,设置属性。
标签数组= document.getElementsByTagName("div"); 通过标签名获得标签数组
标签数组= document.getElementsByClassName("a");通过类名获得标签数组
他们两个的返回值是标签数组,习惯性是遍历之后再使用。
特殊情况:数组中的值只有1个。
document.getElementsByTagName("div")[0];取数组中第一个元素
document.getElementsByClassName("a")[0];取数组中第一个元素
1.6 DOM 访问关系(节点的获得)
节点的访问关系,是以属性的方式存在的。
DOM的节点并不是孤立的,因此可以通过DOM节点之间的相对关系对它们进行访问。
1.6.1 父节点 ( parentNode )
调用者就是节点。一个节点只有一个父节点。调用方式就是节点.parentNode.
案例:
1.通过子盒子设置父盒子的背景色。
2.关闭二维码
1.6.2 兄弟节点
Sibling就是兄弟的意思。
Next:下一个的意思。
Previous:前一个的意思。
nextSibling:调用者是节点。IE678中指下一个元素节点(标签)。在火狐谷歌IE9+以后都指的是下一个节点(包括空文档和换行节点)。
nextElementSibling:在火狐谷歌IE9都指的是下一个元素节点。
总结:在IE678中用nextSibling,在火狐谷歌IE9+以后用nextElementSibling
下一个兄弟节点=节点.nextElementSibling || 节点.nextSibling
previousSibling:调用者是节点。IE678中指前一个元素节点(标签)。在火狐谷歌IE9+以后都指的是前一个节点(包括空文档和换行节点)。
previousElementSibling:在火狐谷歌IE9都指的是前一个元素节点。
总结:在IE678中用previousSibling,在火狐谷歌IE9+以后用previousElementSibling。
下一个兄弟节点=节点.previousElementSibling|| 节点.previousSibling
1.6.3 单个子节点
firstChild:调用者是父节点。IE678中指第一个子元素节点(标签)。在火狐谷歌IE9+以后都指的是第一个节点(包括空文档和换行节点)。
firstElementChild:在火狐谷歌IE9都指的第一个元素节点。
第一个子节点=父节点.firstElementChild || 父节点.firstChild
lastChild:调用者是父节点。IE678中指最后一个子元素节点(标签)。在火狐谷歌IE9+以后都指的是最后一个节点(包括空文档和换行节点)。
lastElementChild:在火狐谷歌IE9都指的最后一个元素节点。
第一个子节点=父节点.lastElementChild|| 父节点.lastChild
1.6.4 所有子节点
childNodes:它是标准属性,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本节点 (他还是W3C的亲儿子 )
火狐 谷歌等高本版会把换行也看做是子节点
nodeType==1时才是元素节点(标签)
nodeType == 1 表示的是元素节点 记住 元素就是标签
nodeType == 2 表示是属性节点 了解
nodeType == 3 是文本节点 了解
子节点数组 = 父节点.childNodes; 获取所有节点。
children:非标准属性,它返回指定元素的子元素集合。
但它只返回HTML节点,甚至不返回文本节点,虽然不是标准的DOM属性,但它和innerHTML方法一样,得到了几乎所有浏览器的支持。
children在IE6/7/8中包含注释节点
在IE678中,注释节点不要写在里面。
子节点数组 = 父节点.children; 用的最多。
1.6.5 知识补充
节点自己.parentNode.children[index];随意得到兄弟节点。
作为了解内容:
function siblings(elm) {
var a = [];
var p = elm.parentNode.children;
for(var i =0,pl= p.length;i<pl;i++) {
if(p[i] !== elm) a.push(p[i]);
}
return a;
}
定义一个函数。必须传递自己。定义一个数组,获得自己的父亲,在获得自己父亲的所有儿子(包括自己)。遍历所哟与的儿子,只要不是自己就放进数组中。
1.6.6 要明白两个属性(!!!重点!!!)
parentNode 和 children 这两个属性。
1.7 DOM节点操作 (!!!!!重点!!!!!)
节点的访问关系都是属性。节点的操作都是函数或者方法。
1.7.1 创建节点
使用方法是这样的document.createElement();
新的标签(节点) = document.createElement(“标签名”);
1.7.2 插入节点(使用节点)
使用方法: 父节点.appendChild();
父节点.appendChild(新节点); 父节点的最后插入一个新节点
使用方法:父节点.insertBefore(要插入的节点,参考节点);
父节点.insertBefore(新节点,参考节点)在参考节点前插入;
如果参考节点为null,那么他将在节点最后插入一个节点。
1.7.3 删除节点
用法:用父节点删除子节点。
父节点.removeChild(子节点);必须制定要删除的子节点
节点自己删除自己:
不知道父级的情况下,可以这么写:node.parentNode.removeChild(node)
1.7.4 复制节点 ( oldNode.cloneNode(true) )
想要复制的节点调用这个函数cloneNode(),得到一个新节点。 方法内部可以传参,入股是true,深层复制,如果是false,只复制节点本身。
新节点=要复制的节点.cloneNode(参数) ; 参数可选复制节点
用于复制节点, 接受一个布尔值参数, true 表示深复制(复制节点及其所有子节点), false 表示浅复制(复制节点本身,不复制子节点)
1.7.5 节点属性(节点.属性)
获取:getAttribute(名称)
设置:setAttribute(名称, 值)
删除:removeAttribute(名称)
注意:IE6、7不支持。
调用者:节点。 有参数。 没有返回值。
每一个方法意义不同。
- 第2章DOM概述
- 第2章---C++概述
- DOM概述
- DOM DOM概述
- 第1章 Struts 2概述 1.1 MVC思想概述
- JS DOM 编程艺术(第2版)读书笔记 第3章 DOM
- JS DOM 编程艺术(第2版)读书笔记 第9章 CSS-DOM
- 第2章 C语言概述
- 第2章 通信系统概述
- 第01章 概述(2)
- 第2章 C语言概述
- 第2章 C#编程概述
- 《gradle 用户指南》中文版 第2章 概述
- 《gradle 用户指南》中文版 第2章 概述
- 第1章 概述
- 第1章 概述
- 第1章 概述
- 第1章 概述
- 第1章事件
- 为什么要使用面向接口编程
- Linux命令源代码阅读whoami
- express框架应用
- 从零开始学Scala系列(六)之类(Classes)和对象(Objects)
- 第2章DOM概述
- UVA 1585
- 移植不同类型的STM32时候报错,parsing restarts here after previous syntax error
- 人生感言
- 1019. 数字黑洞 (20)
- GRUB2编译
- 新博客地址:akirakiwi.github.io
- 03.31 Linux定时任务
- 基于TCP的客户服务器模式的三种通信