DOM 文档对象模型，就是当前网页里面的所有内容。

因为网页是在浏览器中显示的，整个浏览器是BOM，所以DOM其实是BOM的一部分

BOM 就是 window对象 DOM 就是 document对象

（一）使用DOM获取网页元素

1.如果该网页元素，在一个网页中只会出现一次，通过document可以直接获取

document.title = "好好学习DOM"

document.body.style.backgroundColor = "lightblue"

2.如果网页元素，在网页中会经常使用，就需用通过特定的方法来获取

getElementsByTagName()方法，根据标签的名称获取所有该标签

let hs = document.getElementsByTagName('h2')

hs[0].innerText = '天津'

hs[1].innerText = '东京'

getElementById()方法，根据标签的id属性名称，获取对应的标签

// 如果id属性值不唯一，只获取第一个

let sh = document.getElementById('sh')

sh.innerText = '铁岭'

getElementsByName()方法，根据标签的name属性值，获取所有对应的标签

let red = document.getElementsByName('red')

for(let i=0;i<red.length;i++){

red[i].style.color="red"

}

getElementsByClassName()方法，根据标签的class属性值，获取所有对应的标签

let blue = document.getElementsByClassName('blue')

for(let i=0;i<blue.length;i++){

blue[i].style.backgroundColor = 'blue'

}

封装DOM获取

function$(id){

returndocument.getElementById(id)

}

（1）querySelector()方法，根据选择器规则，获取对应的第一个元素

如果选择器的返回的结果不止一个，只返回第一个。

let c = document.querySelector('.a .b .c')

c.innerText = '苹果'

（2）querySelectorAll()方法，根据选择器规则，获取对应的所有元素

注意：querySelectorAll()方法，返回的是集合对象，不是数组对象。可以利用展开运算符，将集合对象转为数组对象。

let cs = document.querySelectorAll('.c')

cs.forEach(r=>{

r.style.backgroundColor = 'pink'

})

（二）操作DOM元素的内容和样式

操作DOM的样式，有多种方式：

1.通过style属性直接设置如果样式名称是多个单词的组合，需要使用小驼峰命名规范

2.通过className属性设置类选择器

3.也可以通过classList属性添加多个类选择器

操作DOM的内容：

1.innerText属性，用于获取和操作 DOM的文本内容。

innerText属性设置内容时，不能识别html标签，会将html标签以文本的形式呈现

2.innerHTML属性，用于获取和操作 DOM的HTML内容。

innerHTML属性设置内容时，能够识别html标签

<div class="a"></div>

<div class="b"></div>

<div id="c">我正在学习JS-DOM</div>

<div id="d">我正在学习HTML</div>

<button id="size">添加大小</button>

<button id="color">添加颜色</button>

<button id="radius">添加圆角</button>

<button id="bgcolor">添加背景</button>

<br><br>

<button id="size2">移除大小</button>

<button id="color2">移除颜色</button>

<button id="radius2">移除圆角</button>

<button id="bgcolor2">移除背景</button>

<div id="e">我正在学习JavaScript</div

获取div#e元素

let e = document.querySelector('#e')

// 通过classList属性，给元素添加多个类选择器

//获取#size按钮，并给按钮注册一个点击事件

document.querySelector('#size').onclick = function(){

// 通过add方法，添加类选择器

e.classList.add('size')

}

颜色按钮点击事件

document.querySelector('#color').onclick = function(){

e.classList.add('color')

}

圆角按钮点击事件

document.querySelector('#radius').onclick = function(){

e.classList.add('radius')

}

背景按钮点击事件

document.querySelector('#bgcolor').onclick = function(){

e.classList.add('bgcolor')

}

下面是移除样式

document.querySelector('#size2').onclick = function(){

通过remove方法，移除类选择器

e.classList.remove('size')

}

颜色移除事件

document.querySelector('#color2').onclick = function(){

e.classList.remove('color')

}

圆角移除事件

document.querySelector('#radius2').onclick = function(){

e.classList.remove('radius')

}

背景颜色移除事件

document.querySelector('#bgcolor2').onclick = function(){

e.classList.remove('bgcolor')

}

（三）操作DOM的属性

获取和设置标签自带的属性(原生属性)，直接点

let src = img.src //src是图片标签的原生属性

获取和设置标签自定义的属性，需要通过getAttribute()和setAttribute()方法：

setAttribute()方法，设置元素的属性值，需要传两个参数（属性名和属性值）

getAttribute()方法，获取元素的属性值，只需要传一个参数（属性名）

（四）创建和删除DOM属性

createElement()方法，用于创建DOM元素

appendChild()方法，用于在当前DOM元素中添加子元素

删除元素有两种写法：

1.自删 remove()方法，是元素删除自己

2.通过父级删除子级 removeChild()方法，是删除元素里面指定的子元素

补充1：onclick是点击事件，on表示当，click表示点击

补充2：parentElement和parentNode属性，返回父级元素

DOM