【web前端初级课程】第七章 你所不知道的DOM编程

系列文章传送门：

【wed前端初级课程】第一章 什么是HTML

【web前端初级课程】第二章 CSS层叠样式表

【web前端初级课程】第三章 CSS的特殊样式

【web前端初级课程】第四章 什么是JavaScript

【web前端初级课程】第五章 常用的内置模块

【web前端初级课程】第六章 BOM编程的五大对象

【web前端初级课程】第七章 你所不知道的DOM编程

【web前端初级课程】第八章 什么是事件？

文章目录：

一、如何获取document对象

二、操作dom对象的内容

三、修改dom对象的属性

四、操作dom对象的样式

一、如何获取document对象

DOM:document object model 文件对象模型

他是window对象的子对象，我们可以同使用document对象对页面上的标签进行各种操作。

（一）通过id获取标签

<div class="div_class" id="first_div">我是div</div>
<script>
    let div = document.getElementById("first_div")
    console.log(div)
</script>

（二）通过标签类型获取标签

let div = document.getElementsByTagName('div')
div[0].innerHTML = "111111"
console.log(div)

（三）通过class来获取标签

let div = document.getElementsByClassName("div_class")[0]
div.innerHTML = "4444"

（四）用选择器来获取标签

let li = document.querySelector("ul > li")
console.log(li)

（五）通过选择器表达式获取所有符合表达式的标签

let li = document.querySelector("ul > li")
console.log(li)

二、操作dom对象的内容

（一）给dom对象插入新的标签或文本

let div = document.getElementById("first_div")
div.innerHTML = "<h2>这是个标题1</h2>"

注意：1、权限管理 符合权限的群体才可以使用innerHTML；
           2、必须做过滤，检查插入的内容是否包含恶意代码。

（二）给dom对象插入文本内容（不能插入标签）

1、div.innerText = "<h2>这是个标题1</h2>"

（innerText非w3c规范）

2、div.textContent = "<h3>这是个标题1</h3>"

（textContent是w3c规范，推荐的属性）

三、修改dom对象的属性

（一）标签.属性名

let div = document.getElementById("first_div")
console.log(div.title)
div.title = "123321"

（二）标签[‘属性名称’]

console.log(div['title'])
div['title'] = "8888"
console.log(div['title'])

（三）对应修改

let title = div.getAttribute("title")
console.log(title)
div.setAttribute("title","3333")
console.log(div.getAttribute("title"))

之后该样式可以直接这样：div.style.background = "url('pic/衣服.jpg')"
                                           div.style.width = "400px"

四、操作dom对象的样式

（一）直接使用标签.style （只能获取到行内样式）

let li_arr = document.querySelectorAll("ul > li:nth-child(odd)")
console.log(li_arr)
for (item of li_arr){
	item.style.border = "1px solid red"
}
let div = document.getElementById("first_div")

PS：offsetwidth包含边框的宽度 offsetheight包含边框的高度

（二）使用getComputedStyle（能获取到标签所有样式）

console.log(getComputedStyle(div).width)
div.style.width = parseInt(getComputedStyle(div).width) + 5 + "px"
div.style.height = parseInt(getComputedStyle(div).height) + 5 + "px"
div.style.width = div.offsetWidth + "px"

都看到这里了，创作不易，大家点个赞再走呗！！- ̗̀(๑ᵔ⌔ᵔ๑)