JS DOM中的获取节点和操作节点

1、DOM :

1.1 介绍 :

1.1.1 DOM（Document Object Model——文档对象模型），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

1.1.2 DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如:页面元素、字符串或注释等等）。

1.1.3 DOM主要用于操作网页的标签内容,标签样式,标签属性,以及标签(增删改查)

1.1.4 DOM学习的最终目的 完成一些常见网页特效 轮播图 选项卡...

1.1.5 注意：DOM既不是HTML的一部分,也不是JavaScript一部分,而是浏览器厂商都实现了的一些独立的规则，并允许JavaScript可以访问和操作存储在DOM中的内容（DOM 也可以使用其他的语言来实现）

1.2 获取DOM元素:

// 学习DOM,我们需要先学习如何获取DOM元素, 获取DOM元素的地位相当于CSS的选择器 所有获取DOM元素非常重要 获取DOM元素的目的是了找到我们要操作标签

// DOM把整个页面当做一个文档, DOM中最大的对象就是document对象

// 如果想更好的查看某个对象的方法和属性, 可以是console.dir()方法 dir是directory目录的简写

// 获取DOM元素的方法有如下:

1. 根据ID获取元素

// document.getElementById("id属性值"); 返回值 单个dom对象或者null

2. 根据标签名获取元素

// document.getElementsByTagName("标签名") 返回值是一个伪数组(类数组对象)

3. 根据标签的name属性获取元素 返回值是一个伪数组

// document.getElementsByName("name属性值")

4. H5新增获取元素方式 IE低版本浏览器不支持(IE678)

// document.getElementsByClassName("class属性值") 返回值是一个伪数组

// ❤❤❤document.querySelector("带符号的css选择器") 找到"第一个"符合CSS选择器的元素

// ❤❤❤document.querySelectorAll("带符号css选择器") 找到"所有"符合CSS选择器的元素

// 另外, document对象可以尝试换成其他dom父对象, 表示从指定的dom父对象里面查找元素

5. 获取特殊元素( body,html )

// 获取body标签 document.body

// 获取html标签 document.documentElement

2、事件基础:

代码多的时候,就需要写一个全局函数

代码少的时候,可以直接写JS代码

2.1 事件概述:

// JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

// 简单理解: 触发--- 响应机制。

// ​网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。

2.2 事件三要素：

// 1. 事件源（谁）:触发事件的元素

// 2. 事件类型（做什么）: 例如 onclick 点击事件

// 3. 事件处理程序（怎么做）:事件触发后要执行的代码(函数形式)，事件处理函数

2.3 事件的绑定方式

动态绑定与行内绑定

2.3.1 // ❤❤❤动态绑定事件

// 说明: 在JS代码里面,动态给指定DOM元素绑定事件

动态事件绑定的步骤如下:

// 第一步:获取事件源(获取DOM对象)

// 第二步:注册事件(绑定事件)

// 第三步:添加事件处理程序(一般是一个匿名函数)

3、标签内容

3.1 DOM操作内置属性

dom对象.内置属性名

dom对象.内置属性名 = "内置属性值"

DOM操作表单属性 selected checked disabled 操作的时候使用的是布尔值

3.2 DOM操作标签内容

dom对象.innerHTML = "内容"

dom对象.innerText = "内容"

3.3 DOM操作样式

操作行内式样式

dom对象.style

dom对象.style.去短杠驼峰法css属性名 = "属性值";

dom对象.style = "css属性名1: css属性值1;css属性名2: css属性值2;css属性名3: css属性值3;..."

3.4 DOM操作类名

dom对象.className

dom对象.className = "类名"

dom对象.className = "类名1 类名2"

3.5 H5新增类名操作方式:

// H5新增了一种类名操作方式, 通过dom对象的classList属性操作类名

var myDiv = document.querySelector(".myDiv");

// dom对象.classList.value 获取所有类名

// ❤dom对象.classList.add("指定类名") 添加指定类名

// ❤dom对象.classList.remove("指定类名") 删除指定类名

// dom对象.classList.contains("指定类名") 判断是否含有指定类名 返回是布尔值

// dom对象.classList.toggle("指定类名") 切换指定类名 有则删 无则加

3.6 H5新增自定义属性操作方式补充:

// 可以通过 dom对象.dataset属性 操作 以"data-开头"的自定义属性

3.6.1 获取data-开头的自定义属性

var objA = document.getElementById("one");

console.log("objA.dataset=>", objA.dataset);

console.log(objA.dataset.index);

console.log(objA.dataset.abc);

console.log(objA.dataset.spmAnchorId);

3.6.2 设置data-开头的自定义属性

objA.dataset.userName = "zhangsan";

objA.dataset.backgroundPositionX = "10px";

3.7 排他操作:

// 绑定事件跟触发事件不是同时发生的, 我们能点击的时候, for循环已经结束了

// 排他操作的意思就是先清除所有,再设置当前

// 清除所有.item身上的.active类名

// 删除类名

// 添加类名

3.8 自定义属性操作:

HTML除了一些内置属性之外,程序员还可以根据需要自定义一些属性, 自定义的属性建议以data-开头

// DOM操作内置属性 DOM对象.内置属性名

// 获取自定义属性,也可以获取内置属性,但是获取类名的时候,需要使用class

// dom对象.getAttribute("自定义属性名或者内置属性名")

// 设置自定义属性,也可以设置内置属性,但是设置类名的时候,需要使用class

// dom对象.setAttribute("自定义属性名或者内置属性名", "属性值")

// 删除属性(包括删除内置属性以及删除自定义属性)

// dom对象.removeAttribute("属性名")

// 操作"自定义属性",建议使用 setAttribute,getAttribute

// 操作"内置属性",建议使用 dom对象.内置属性名

4、节点操作(操作DOM结构,添加标签,删除标签等):

4.1 节点概述:

// ​"网页中的所有内容都是节点"（元素节点、属性节点、文本节点、注释节点等），在DOM 中，节点使用 node 来表示

// ​HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

// 一般地，节点至少拥有"nodeType（节点类型）"、"nodeName（节点名称）"和"nodeValue（节点值）"这三个基本属性。

// nodeType节点类型常用值有以下3个:

// 元素节点 nodeType为1

// 属性节点 nodeType为2

// 文本节点 nodeType为3

4.2 补充内容:

// 通过dom对象.getAttributeNode("属性名") 方法从当前元素中通过名称获取属性节点。

// 父节点.firstChild 返回第一个子节点,找不到则返回null

// 节点层级

// ​利用 DOM 树可以把节点划分为不同的层级关系，常见的是"父子"层级(嵌套关系)或者"兄弟"层级关系。

4.3 获取元素节点:

var john = document.getElementById("john");

console.log(john.nodeType);

console.log(john.nodeName);

console.log(john.nodeValue);

4.4 获取属性节点:

var objName = john.getAttributeNode("name"); // 获取john这个dom对象身上的name属性节点

console.log(objName);

console.log(objName.nodeType);

console.log(objName.nodeName);

console.log(objName.nodeValue);

4.5 获取文本节点:

var objText = john.firstChild;

console.log(objText);

console.log(objText.nodeType);

console.log(objText.nodeName);

console.log(objText.nodeValue);

4.6 ❤父级节点 

// 节点.parentNode

// 子节点 重点 要记

// 获取所有子节点 了解

// 父节点.childNodes 返回包含指定节点的子节点的集合

4.7 ❤获取子元素节点

// 父节点.children

// 获取第1个子节点

// 父节点.firstChild 返回第一个子节点,找不到则返回null

// 包含所有的节点,不管是文本节点还是元素节点

// 获取最后1个子节点

// 父节点.lastChild 返回最后一个子节点,找不到则返回null

// 包含所有的节点,不管是文本节点还是元素节点

// 获取第1个子元素节点 

// ❤父节点.firstElementChild 返回第一个子元素节点,找不到则返回null

// 获取最后1个子元素节点 

// ❤父节点.lastElementChild 返回最后一个子元素节点,找不到则返回null

4.8 创建节点

// 需要先创建节点,才能添加节点

// 创建节点的语法

// document.createElement("标签名")

// 注意: document.createElement("标签名")会返回一个新的dom对象

4.9 添加节点 

// 添加节点到子元素列表最后

// document.createElement("标签名")

objUl.appendChild(newLi);

// 父节点.appendChild(指定节点) 方法将一个节点添加到指定父节点的子节点列表末尾

// 父节点.insertBefore(节点,指定元素) 方法将一个节点添加到父节点的指定子元素前面

// 添加节点到指定节点的前面

// 父节点对象.insertBefore(被添加节点, 哪个节点)

objUl.insertBefore(newLi, objUl.children[1]);

4.10 删除节点 

// 父节点.removeChild(节点) 从父节点中删除一个子节点,返回值是被删除的节点

// 或者指定节点.remove(); 删除指定节点

节点操作补充:

4.11 兄弟节点

// 下一个兄弟节点

// 当前元素.nextSibling 返回当前元素的下一个兄弟节点, 找不到返回null 包含元素节点或者 文本节点等等

// 上一个兄弟节点

// 当前元素.previousSibling 返回当前元素的上一个兄弟节点, 找不到返回null 包含元素节点或者 文本节点等等

// 下一个兄弟元素节点（ 有兼容性问题） IE9以上才支持

// 当前元素.nextElementSibling 返回当前元素的下一个兄弟元素节点, 找不到返回null

// 上一个兄弟元素节点（ 有兼容性问题） IE9以上才支持

// 当前元素.previousElementSibling 返回当前元素上一个兄弟元素节点, 找不到返回null

4.12 复制（克隆）节点:

// 节点.cloneNode( [布尔值] ) 克隆节点/拷贝节点 返回值是节点的一个副本

// 注意:

// 1. 如果括号参数为空或者false,则是浅拷贝节点,即只克隆复制节点本身,不克隆里面的子节点

// 2. 如果括号参数为true,则是深度拷贝节点,会复制节点本身以及里面所有的子节点

js动态创建元素的三种方式:

// 1. document.write()

// 2. element.innerHTML

// 3. document.createElement()

// 区别:

// 1. document.write是直接将内容写入页面的内容流,但是文档流已经执行完毕,则它会导致页面全部重绘

// 2. innerHTML是将内容写入某个DOM节点,不会导致页面全部重绘

// 3. innerHTML创建多个元素效率更好(可以拼接字符串,也可以采取数组形式拼接),结构稍微复杂

// 4. createElement()创建多个元素效率稍低一点点,但是结构更清晰