WebAPI-DOM基础

DOM:Document Object Model dom是一个对象，对应html中的节点
一个页面对应一个dom树，window.document：dom树的根
dom：window.document中任意元素

<p>
	how <strong>are</strong> you
</p>
		   <p>
	 |------|-----|
	how	<strong>  you
		    |
		   are

一.获取dom

api	含义	备注
document.querySelector() / dom.querySelector()	根据css选择器获取dom	得到第一个匹配到dom
document.querySelectorAll() / dom.querySelectorAll()	根据css选择器获取dom	得到所有匹配到dom 伪数组
dom.children	获取dom的子元素	得到伪数组
dom.childNodes	获取dom的子节点	节点对象区别去dom元素
document.documentElement	获取html元素
document.body	获取body元素
document.head	获取head元素
document.parentElement	得到dom的父元素
dom.previousElementSibling	得到dom前一个兄弟元素
dom.nextElementSibling	得到dom后一个兄弟元素

二.创建dom

api	含义	备注
document.createElement	创建一个对象并且返回	传入元素的名称，创建的元素不在树结构中

三.更改dom

api	含义	备注
dom.remove()	从文档中删除	不是删除对象，只是将这个元素从树中移除
dom.removeChild()	删除dom的某个子元素	传入dom对象
dom.insertBefore()	在dom的子元素中，添加一个新元素到另一个元素之前
dom.appendChild()	添加一个新元素到dom的子节点末尾	传入dom对象

四.dom属性
属性是指HTML元素的属性
1.标准属性：HTML元素自身拥有的属性，例如：

<a>click</a>

const dom = document.querySelector('a')
dom.href = 'http://www.baidu.com/'
console.log(dom.href)
：http://www.baidu.com/

注意：所有标准属性均可通过dom.属性名的方式得到，其中：
*布尔属性会被自动转成Boolean，比如：下拉列表的checked属性
*路径类的属性会被转换为绝对路径 例如：

<a href='./test.com'>click</a>

const dom = document.querySelector('a')
console.log(dom.href)
：http://127.0.0.1:5500/test.com

*标准属性始终都是存在的，不管你是否有在元素中设置该属性
*class属性是关键字，所以获取时使用className

2.自定义属性
所有的自定义属性均可以通过下面的方式操作：
*dom.setAttribute(name, value)设置属性键值对
*dom.getAttribute(name)获取属性值

<a newAttr_1='123123'>click</a>

const dom = document.querySelector('a')
dom.setAttribute('newAttr_2', 123)
console.log(dom.getAttribute('newAttr_1'))
console.log(dom.getAttribute('newAttr_2'))
:123123
:123

五.dom内容

api	含义	备注
dom.innerText	获取或设置元素的文本内容	只能设置文本
dom.innerHTML	获取或设置元素的HTML内容	设置文本+html元素

六.dom样式
在JS中有两种样式：
*内联样式：元素的style属性中属性的样式，可以读写.
内联样式对象：dom.style

const dom = document.querySelector('a')
dom.style.color = 'red'
dom.style.fontSize = '17'

*计算样式：元素最终计算出来的样式，只读（最终样式-设置的内联样式不一定就是最终显示的效果，《css属性计算过程》）
getComputedStyle(dom)：获取该元素的计算样式，无法被重新赋值。

关于样式的注意事项：
*给样式赋空字符串时，相当于删除内联样式
*当给样式的赋值不合法时，赋值语句无效，不会报错
*css的短横线命名法，在属性名中表现为驼峰命名法