1.15 初识DOM
2020-08-11 本文已影响0人
NULL_2022
DOM
- DOM:document object model 文档对象模型（提供一系列的属性和方法，能让我们操作页面中的DOM 元素-》简单理解为操作页面中的HTML标签）
- DOM 是JavaScript操作页面的接口
- DOM 将整个页面转换为JS对象，JS就可以用编程的方式来操作页面，JS可以操作页面上的任何内容，例如元素的增删改查等
DOM 树
- HTML/XML是具有一定层级关系的结构性文档，结构性文档中的每一个成员，都有自己的属性与上下文环境，浏览器根据文档的DOM结构，将HTML等结构话文档解析成一系列的节点， 这些节点根据结构化文档的成员关系，形成一个典型的“树状结构（DOM 树）”，整个DOM树，以及内部所有节点，浏览器都规定了规范的对外访问接口（属性、方法）
DOM本质
- DOM只是一个接口规范，可以用多种编程语言实现，例如：JavaScript、Java、PHP等，所以，DOM，并不是JavaScript语法的一部分，但却是JavaScript最常见的应用场景
节点
- 节点：'Node', DOM树中的最小单元，也是DOM的组成部分
- 为了对节点进行有效管理，需要对其分类，常用有7种：
- 'Document':整个文档树的顶层节点，代表当前文档，如HTML
- 'DocumentType':文档类型节点，特指：'<!DOCTYPE html>'标签
- 'Element':元素/标签节点，例如：'<body> 、<div>……'
- 'Attribute':元素的属性节点，例如：'class="nav"'
- 'Text':标签之间的包含的文本
- 'Comment':文档中的注释文本
- 'DocumentFragment':文档碎片/片段,文档片段详细介绍请查阅：https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentFragment
- 浏览器预定义了一个原生节点对象：'Node',所有节点均从该对象上继承共有属性和方法
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初始DOM对象</title>
</head>
<body>
<!-- 我是注释 -->
<h1>Dom很好玩</h1>
</body>
</html>
节点树
- 结构化的HTML/XML文档会被解析成一颗倒置的DOM树，而DOM树又是由不同类型的节点组成的。因此，这些节点本身就自然而然的形成了DOM树一一对应的"节点树"。所以，节点树与DOM树并无本质的差别，只是从不同的角度来描述文档罢了。
- 任何一款浏览器，都会提供一个原生对象'document'来表示整个文档
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初始DOM对象</title>
</head>
<body>
<!-- 我是注释 -->
<h1>DOM很好玩</h1>
<script>
console.log(document.documentElement);//=> 返回root根节点，html标签包含的所有子节点
console.log(document.doctype);//=> <!DOCTYPE html>
console.log(document.head);//=> 整个head
console.log(document.title);//=> 返回的是页面标题文本：初始DOM对象
console.log(document.body);//=> 返回页面主题body元素节点及所有子节点
</script>
</body>
</html>
- 除了<html> 节点外，每个节点根据上下文环境，都有三种层级关系节点
- 直接父节点：parentNode
- 所有子节点：childNodes
- 同级兄弟节点：sibling
- 节点对象有为每种层级节点又定义了访问接口
- 子节点：firstChild / lastChild ……
- 兄弟节点： previousSibling / nextSibling……
常见获取DOM元素的方法:
- document.body();// 获取页面中的body元素
- document.getElementById('id名');//基于元素的id获取到这个元素
- document.getElementsByClassName('class名')；//基于元素的class获取到这个元素
- document.getElementsByTagName('标签名')；//根据标签名获取到页面中（指定容器中）所有元素标签集合
- document.querySelector('类名/标签名/id名');//=》返回符合CSS选择器的第一个元素
- document.querySelectorAll('类名/标签名/id名');//=》返回符合CSS选择器的所有元素
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初始DOM对象</title>
</head>
<body>
<div class="box" id="box">
<h2 class="title" >前端课程体系</h2>
<ul>
<li>HTML5+CSS3</li>
<li>JavaScript(ES6)基础知识、核心原理、项目实战、组件封装、设计模式等</li>
<li>Ajax、HTTP</li>
<li>Vue、React、小程序开发</li>
<li>Webpack、node、git等常用的工具类</li>
</ul>
</div>
<script>
//=> 基于js获取到的DOM元素是“对象数据类型”值，里面包含很多浏览器自带的，用来操作元素的键值对，
let box = document.getElementById('box');
//获取box中所有的li
let itemList = box.getElementsByTagName('li');//=>获取box中所有的li 获取的是HTMLCollection元素集合
console.log(itemList);//=> 它是一个类数组，结构和数组非常的相似，但是不是数组
let title = box.getElementsByTagName('h2');
console.log(title);//=>获取box盒子中所有的h2,获取到的是元素集合HTMLCollection，即使只有一个h2标签，也是获取的元素集合
/*使用JS实现奇数和偶数行变色（CSS中：nth-child可以实现）*/
for(let i = 0 ; i < itemList.length; i++){
let itemLi = itemList[i];
/*
解析：
第一行 奇数行 => 索引0 索引偶数
第二行 偶数行 => 索引1 索引奇数
第三行 奇数行 => 索引2 索引偶数
……
可得：索引奇数代表偶数行
*/
i % 2 !== 0 ? itemLi.style.backgroundColor = 'skyBlue' : itemLi.style.backgroundColor = 'lightgreen';
}
</script>
</body>
</html>
