JS_DOM(1)

获取dom元素：

1.通过document.Selector()和document.SelecdtorAll()获取:

该方法属于新增方法

document.Selector()的括号内写字符串获取（符合条件的第一个标签）

例如：

标签：document.querySelector('div') 选第一个div标签

类：document.querySelector('.box') 选第一个box

id：document.querySelector('#id') 选第一个id

li：document.querySelector('ul li:first_child') 选ul的第一个li

注：document.querySelector('ul li')为错误写法

document.SelecdtorAll()也是在括号内写字符串获取元素，不过它获取的是所有符合写入的内容的标签，并形成一个类似数组的东西——NodeList，取用方法和数组类似

例如：

获取 ul 的所有的 li ：let lis = document.querySelectorAll('ul li')

获取所有类名叫“ah”的标签：let ahs = document.querySelectorAll(".ah")

取用：lis[0]  ahs[0]

2.通过getElementBy~~()获取：

该方法后面的~~要替换成ClassName（类名），Id（id），TegName（标签名）

用JS创建，复制，插入，删除HTML元素：

1.创建：

let d1 = document.creatElement('div')

代码如上，但是，该代码只是让你拥有了一个div，你拿在手里但是没有把它放在HTML的文档流里

想要让它显示，还需要使用：插入结点：appendChild(d1)

2.插入：

把d1插入body的尾部：document.body.appendChild(d1)

把d2插入到d1的尾部：d1.appendChild(d2)

注：当d2有内容时，要先给d2填好内容，再将d2插入d1，否则插入无效

3.复制：

let d2 = d1.cloneNode(false)

如上代码：表示只复制d1这个标签，但是不复制d1的子孙

把false改成true后，复制d1及其子孙标签

4.删除：

d1.removeChild(d2)

如上代码：表示删除d1标签的子代d2标签

对HTML元素内容的操作：

两个方法：

1.用d1.innerText(文本内容)：不识别标签

        d1.innerHTML(文本内容)：识别标签

2.通过创建一个文本节点，然后插入标签中：

let text = document.creatTextNode(文本内容)

d1.appendChild(text)

不识别标签

对，HTML一般属性的修改：

以img的src为例：（包括src，url，title）

第一步：获取你要修改的对象： const img = document.querySelector('img')

第二步：找到该对象中你要修改的属性，并重新赋值：img.src="~~~~"

对HTML样式的修改（表单除外）：

1.单个样式：

document.body.style.backgroundImage = `url(~~~)`

如上代码，首先找到body，然后找到style里的background-image =>有-，则使用小驼峰命名法：

backgroundImage

2.多个样式：

方法1：直接修改标签的类名：div.className = 'box'，但是原本的属性会丢失

方法2：给标签多加几个类名：div.classList.add('box')，

有加就有减，还有取反：

减：div.classList.remove('box')

取反：div.classList.toggle('box')