DOM树里每一个内容都称之为节点

节点类型

元素节点

所有的标签

比如body、div、html是根节点

属性节点

所有的属性 比如href、src

文本节点

所有的文本

其他

…

查找节点

父节点查找

• parentNode 属性
• 返回最近一级的父节点找不到返回为null

子元素.parentNode //是属性 不需要加括号

子节点查找

children (重点)

• 仅获得所有元素节点
• 返回的还是一个伪数组

父元素.children

childNodes

获得所有子节点、包括文本节点(空格、换行)、注释节点等

兄弟关系查找

下一个兄弟节点

nextElementSibling属性

上一个兄弟节点

previousElementSibling属性

增加节点

创建节点

创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点

document.createElement('标签名')  //必须是字符串

追加节点

插入到父元素的最后一个子元素

父元素.appendChild(要插入的元素)

插入到父元素中某个子元素的前面

父元素.insertBefore(要插入的元素,在哪个元素前面)

克隆节点

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

元素.cloneNode(true or false)

• 默认为false
• 若为false，则代表克隆时不包含后代节点
• 若为true，则代表克隆时会包含后代节点一起克隆

注意:为了防止一个文档中出现两个ID重复的元素,使用cloneNode()方法克隆的节点在需要时应该指定另外一个与原ID值不同的ID

删除节点

在JavaScript原生DOM操作中，要删除元素必须通过父元素删除

Node.removeChild() 方法从DOM中删除一个子节点。返回删除的节点。

let oldChild = node.removeChild(child)

//OR

element.removeChild(child)

• child 是要移除的那个子节点
• node 是child的父节点
• oldChild保存对删除的子节点的引用. oldChild === child

被移除的这个子节点仍然存在于内存中,只是没有添加到当前文档的DOM树中,因此,你还可以把这个节点重新添加回文档中,当然,实现要用另外一个变量比如上例中的oldChild来保存这个节点的引用. 如果使用上述语法中的第二种方法, 即没有使用 oldChild 来保存对这个节点的引用, 则认为被移除的节点已经是无用的, 在短时间内将会被内存管理回收.

Node.removeChild | MDN

如果上例中的child节点不是node节点的子节点,则该方法会抛出异常

获取DOM元素

根据CSS选择器来获取DOM元素 (重点)

注意：括号内必须是字符串

1.选择匹配的第一个元素

语法：

document.querySelector('css选择器')

参数：

包含一个或多个有效的CSS选择器 字符串

返回值:

CSS选择器匹配的第一个元素,一个 HTMLElement对象。 如果没有匹配到，则返回null。

2.选择匹配的多个元素

语法：

document.querySelectorAll('css选择器')

参数：

包含一个或多个有效的CSS选择器 字符串

返回值:

CSS选择器匹配的NodeList 对象集合

得到的是一个伪数组:

• 有长度有索引号的数组
• 但是没有 pop() push() 等数组方法

想要得到里面的每一个对象，则需要遍历(for)的方式获得。

注意：

哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已

其他获取DOM元素方法(了解)

//根据id获取一个元素
document.getElementById('nav')
//根据标签获取一类元素 获取页面的所有div
document.getElementsByTagName('div')
//根据 类名获取元素 获取页面所有类名为pic的
document.getElementsByClassName('pic')

标签选择body， 因为body是唯一的标签，可以直接写 document.body.style

设置 / 修改DOM元素内容

1.document.write()

• 只能将文本内容追加到前面的位置
• 文本中包含的标签会被解析

2. 元素.innerText属性

• 将文本内容添加/更新到任意标签位置
• 文本中包含的标签不会被解析

3.元素.innerHTML属性

• 将文本内容添加/更新到任意标签位置
• 文本中包含的标签会被解析

设置 / 修改DOM元素属性

设置 / 修改元素常用属性

例如：元素.src = 元素.title =

let pic = document.querySelector("img")
pic.src = "./images/01.jpg"
pic.title = "123"

设置 / 修改元素样式属性

1.通过 style 属性操作CSS

语法：

对象.style.样式属性 = 值

注意:

1. 修改样式通过style属性引出
2. 如果属性有-连接符，需要转换为小驼峰命名法
3. 赋值的时候，需要的时候不要忘记加css单位

box.style.backgroundColor = '#fff'
box.style.color = 'blue'
box.style.marginBottom = '10px'

2.操作类名(className) 操作CSS

语法：

元素.className = 'box'

注意:

1. 由于class是关键字, 所以使用className去代替
2. className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

3.通过 classList 操作类控制CSS

classList.add( newClassName );
//添加新的类名，如已经存在，取消添加

classList.contains( oldClassName );
//确定元素中是否包含指定的类名，返回值为true 、false;

classList.remove( oldClassName );
//移除已经存在的类名;

classList.toggle( className );
//如果classList中存在给定的值，删除它，否则，添加它；

classList.replace( oldClassName, newClassName );
//类名替换

https://blog.csdn.net/qq_43495629/article/details/87867005

设置/修改 表单元素 属性

• 获取: DOM对象.属性名
• 设置: DOM对象.属性名 = 新值表单.value = '用户名' 表单.type = 'password' 表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true代表添加了该属性 如果是false代表移除了该属性比如: disabled、checked、selected

// 1. 获取元素
let input = document.querySelector('input')
// 2. 取值或者设置值  得到input里面的值可以用 value
input.value = '手机'
input.type = 'password'
// 2. 启用按钮
let btn = document.querySelector('button')
// disabled 不可用   =  false  这样可以让按钮启用
btn.disabled = false
// 3. 勾选复选框
let checkbox = document.querySelector('.agree')
checkbox.checked = false