【JS交互篇】DOM操作基础

一、DOM概述

在这里插入图片描述

1.1 什么是DOM

DOM(Document Object Model)文档对象模型，用来表示和操作html或xml文档内容的基础API;
当网页被加载时，浏览器会创建页面的文档对象模型DOM，而DOM模型被构造为对象的树（Dom Html Tree）;
DOM包含了所有的html标签元素、文本字符串、甚至是html注释；
利用DOM中的属性和方法，使程序有能力动态的访问和更新文档中的内容、结构以及样式，这样就使得页面的交互性大大增强；

原生JavaScipt案例合集
 JavaScript +DOM基础
 JavaScript 基础到高级
 Canvas游戏开发

1.2 DOM应用

通过DOM操作能够改变页面中所有HTML元素；
通过DOM操作能够改变页面中所有HTML属性；
通过DOM操作能够改变页面中所有CSS样式；
通过DOM操作能够对页面中所有事件做出反应；

1.3 DOM树

DOM把层次中的每一个对象都称之为节点，这个层次结构可以看作树形结构，就如同我们的目录，一个根目录下有子目录，子目录下面还有子目录。DOM树形图如下；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rCxjW8vT-1691456155382)(01_DOM基础.assets/image-20210220113047306.png)]

1.4 DOM节点类型与相关属性

DOM树中所有的对象都是节点，如：文档节点、元素节点、属性节点、文本节点、注释节点等；

节点相关的属性如下：

nodeName 获取节点的名称，只读
nodeValue 获取节点内容（适用于文本节点和注释节点）
nodeType 获取节点类型，只读

一个HTML或XML文档的文件，元素，属性等有不同的节点类型。有12种不同的节点类型，不同的节点类型也可以有不同的子节点类型如下：

节点类型	描述	子节点
1	Element	一个元素	Element, Text, Comment, ProcessingInstruction, CDATASection, Entity参考手册
2	Attr	一个属性	Text, Entity参考手册
3	Text	一个元素的文本内容或属性	None
4	CDATASection	一个文档的CDATA部分	None
5	Entity参考手册	实体引用	Element, ProcessingInstruction, Comment, Text, CDATASection, Entity参考手册
6	Entity	一个实体	Element, ProcessingInstruction, Comment, Text, CDATASection, Entity参考手册
7	ProcessingInstruction	一个处理指令	None
8	Comment	一个注释	None
9	Document	整个文档（DOM树的根节点）	Element, ProcessingInstruction, Comment, DocumentType
10	DocumentType	为文档实体提供接口	None
11	DocumentFragment	表示邻接节点和它们的子树。	Element, ProcessingInstruction, Comment, Text, CDATASection, Entity参考手册
12	Notation	代表一个符号在DTD中的声明	None

通过属性nodeType可以判断节点类型，那么根据节点类型DOM树可以分为以下两种：

第一种就是上面讲过的，包含了所有标签、属性、文本、注释等全部类型的DOM树，可以称为节点（node）树；
第二种就是只包含标签这一种类型，可以称为元素（element）树。元素树状图更加简洁，查找和操作起来也更加快捷。所以，一般除非必要情况，都使用元素树来操作。

1.5 DOM节点层级关系

所谓DOM树中的节点关系，和我们人类直系关系相似，无非就是父子关系、兄弟关系、祖孙关系；对应节点如下：

父节点（parent node）父节点可以拥有任意数量的子节点
子节点（child node）子节点只能拥有一个父节点
兄弟节点（sibling node）拥有相同父节点的同级节点
根节点(root node) 一个html文档一般只有一个根节点，根节点没有父节点，是最上层的节点
祖先节点包含子节点的节点都可以叫做祖先节点，包括父节点
后代节点一个节点内包好的所有节点，叫做后代节点，包括子节点

1.6 节点的层级访问

parentNode 获取当前节点的父节点
childNodes 获取当前元素节点的所有子节点
firstChild 获取当前元素节点的第一个子节点
lastChild 获取当前元素节点的最后一个子节点
previousSibling 获取当前节点的前一个同级节点
nextSibling 获取当前节点的后一个同级节点

1.7 元素的层级访问（Element元素节点之间的访问）

firstElementChild、lastElementChild 类似firstChild和lastChild,返回类型只有Element类型，忽略文本、注释、空白节点(IE8及以下返回undefined)
nextElementSibling、previousElementSibling 类似nextSibling和previousSibling,返回类型只有Element类型，忽略文本、注释、空白节点(IE8及以下返回undefined)
children 得到当前元素所有子元素的集合
childElementCount 子元素的数量
Element同样可以访问parentNode属性，只不过返回的结果都是Elment类型

1.8 document对象属性介绍

document.documentElement 获取文档的根节点
document.body 获取文档的主体对象
document.cookie 设置和获取cookie（后面本地存储讲）
document.readyState 获取当前文档的载入状态

二、DOM基础操作

2.1 获取元素的六种方式

getElementById() 通过id名获取元素
getElementsByTagName() 通过标签名获取元素
getElementsByClassName() 通过类名获取元素
getElementsByName() 通过name的值来获取元素，一般用在表单中(含有name属性的标签)
querySelector() 通过css选择器获取符合条件的第一个元素
querySelectorAll() 通过css选择器获取符合条件的所有元素

2.2 向页面输出内容的方式

document.write()
element.innerHTML
element.innerText

2.3 操作html属性的属性和方法

通过对象属性设置和获取元素属性，格式 element.att || element[att] 如：img.src li.type div.className div.id p.style 等
通过get/set方法设置和获取属性（所有html属性）
- element.getAttribute(name) 通过元素节点的属性名称获取属性的值
- element.setAttribute(name,value) 设置元素中的属性值
- element.removeAttribute(name) 删除指定属性

2.4 获取和设置css样式

内部样式

利用上面设置html属性的方式添加样式

p.style.color = "red";
p.style = "color:red;text-indent:2em;";
p.setAttribute("style","color:red;text-indent:2em;")

利用cssText添加多个样式

p.style.cssText = "color:red;text-indent:2em;";

清除内部样式

element.style.cssText = "";
element.removeAttribute("style","");
element.style="";

外部样式（考虑兼容性）

高级浏览器使用 window.getComputed(element, null)

IE低版本浏览器使用 element.currentStyle

// 浏览器兼容性写法
function getOutStyle(ele,attr) {
    if (window.getComputedStyle) { //兼容高版本
        return window.getComputedStyle(ele)[attr];
    } else { //兼容 IE8以下
        return ele.currentStyle[attr];
    }
}

三、DOM高级操作

3.1 节点创建

createElement() 创建一个元素节点
createTextNode() 创建文本节点
createAttribute() 创建属性节点，属性节点通过 nodeValue 或者 value 进行赋值

属性节点通过借助 setAttributeNode(attr) 方法进行设置
createComment() 创建注释节点

3.2 节点操作

appendChild() 向指定元素中追加一个子元素节点
insertBefore(newNode, oldNode) 向父元素内部指定元素的前面插入一个新的子元素节点
replaceChild(newNode, oldNode) 使用新的节点替换父元素内部的原有子节点
cloneNode(deep?) 克隆指定节点，参数deep默认false，仅克隆当前节点。设置true，克隆当前及后代所有节点
removeChild() 从父元素中删除指定子元素节点

remove(index?) 移除指定(索引)节点

例： 删除下拉列表中选中的菜单项
================================== html代码 ================================
<select id="mySelect">
function removeOption(){
    <option>苹果</option>
    <option>香蕉</option>
    <option>葡萄</option>
    <option>西瓜</option>
    <option>橙子</option>
</select>
<input type="button" onclick="removeOption()" value="移除选中的菜单项"/>
================================== js代码 ================================
function removeOption(){
    var myEle = document.getElementById("mySelect");
    myEle.remove(myEle.selectedIndex);
}
小贴士：selectedIndex 属性可设置或返回下拉列表中被选选项的索引号；若允许多重选择，则仅会返回第一个被选选项的索引号

element.removeAttributeNode(attributename) 删除指定属性节点并返回移除后的节点

hasChildNodes() 用来检查当前元素是否含有子节点

四、DOM操作案例

原生JavaScipt案例合集

4.1 选项卡切换

在这里插入图片描述

4.2 评论系统

在这里插入图片描述

4.3 微博评论

在这里插入图片描述

4.4 购物车

在这里插入图片描述

拓展：

xml、json都是用来存储数据，但是xml结构看起来清晰，而json字符串结构不容易查看；但是xml不够简洁，对于计算机来说，json字符串保存数据更经济。