DOM是文档对象模型，允许通过JavaScript访问和修改页面内容。document对象作为入口点，可以获取html、body、head等元素。通过document我们可以使用方法如getElementById、getElementsByClassName等查找元素，以及使用querySelector和querySelectorAll进行更复杂的CSS选择。此外，还能改变元素的样式和内容。
DOM：文档对象模型（Document Object Model）,将页面所有的内容表示为可以修改的对象；
浏览器会对我们编写的HTML、CSS进行渲染，同时它又要考虑我们可能会通过JavaScript来对其进行操作：
学习DOM，就是在学习JavaScript对文档进行操作如何通过的
一、document对象
它是DOM的入口点，可以从document开始去访问任何节点元素
对于最顶层的html、head、body元素，我们可以直接在document对象中获取到
- html元素： <html>= document.documentElement
- body元素： <body>= document.body
- head元素： <head> = document.head
- 文档声明： <!DOCTYPE html> = document.doctype
我们使用comsole.log 将对象输出到控制台中
// 取出文档类型 <!DOCTYPE html>
console.log(document.doctype)
// 取出body的第二个孩子children
console.log(document.body.children[1])
//根据标签名找，多个标签时返回数组
console.log(document.getElementsByTagName("div"))
//根据id找
console.log(document.getElementById("id"))
// 根据class名字取找
console.log(document.getElementsByClassName("class"))
// css 选择器 id选择器 # 类选择器 .
console.log(document.querySelector("#id"))//改变样式
let id = document.getElementById("id")
id.style.color = "green"
//改变内容
let id2 = document.querySelector(".id2")
id2.innerHTML = "<a href='https://www.baidu.com'>百度一下</a>"
扫一扫
380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
