本文详细介绍了DOM（文档对象模型）的概念及其在Web前端中的重要作用，包括DOM树的结构、获取元素的方法以及如何操作元素的内容和样式。通过实例展示了如何使用DOM获取元素并实现网页开关灯、京东密码查看、百度换肤等功能，强调了DOM在改变网页内容、结构和样式上的应用。此外，还提及了获取网页尺寸和滚动位置的技术。
知识总结：姬清，鲁雷，撒世兰
最近学习DOM的操作，DOM主要用来改变网页的内容，结构和样式。所以在整个web前端里面是非常重要的内容，今天给大家整理了DOM获取元素&操作元素的样式属性内容，供大家参考：
知识目录：
1.DOM的定义
2.DOM的作用
3.DOM树
4.获取元素
5.获取元素要干什么
6.获取当前网页文档的高度，宽度，滚动高度，滚动宽度
7. 案例：网页开关灯 仿京东密码 百度换肤
1：DOM的定义：
文档对象模型：(DocumentObject Model，简称DOM)，是[W3C]组织推荐的处理[可宽展标记语言](提供一系列的属性和方法，供我们获取和操作DOM元素)
DOM 是一项 W3C(World Wide Web Consortium) 标准。
DOM 定义了访问文档的标准：
“W3C 文档对象模型(DOM)是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3个不同的部分：
1．CoreDOM - 所有文档类型的标准模型
2．XMLDOM - XML 文档的标准模型
3．HTMLDOM - HTML 文档的标准模型
Dom树又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面
Ø 文档：一个页面就是一个文档，DOM中使用document 表示
Ø 节点：网页中的所有内容，在文档树中都是节点(标签、属性、文本、注释等)，使用node 表示
Ø 标签节点：网页中的所有标签，通常称为元素节点，有简称为“元素”，使用element表示
什么是 HTML DOM？
HTMLDOM 是 HTML 的标准对象模型和编程接口。它定义了：
Ø 作为对象的 HTML 元素
Ø 所有 HTML 元素的属性
Ø 访问所有 HTML 元素的方法
Ø 所有 HTML 元素的事件
2：DOM的作用：
改变网页的内容，结构和样式
文档(doucument)：一个页面就是一个文档
元素(element)：页面中的所有的标签都是元素，每一个元素都看成是一个对象
节点(node)：页面中所有的内容都是节点(标签、属性、文本[文字、空格、换行等])根元素：
由文档及文档中的所有的元素(标签)组成的一个树形结构图，叫树状图(DOM树)
DOM就是把html中的所有的标签模拟成一个树形结构图,然后每一个标签就是一个元素,每一个 元素就是一个对象。
Dom把html中所有的内容都视为对象，所以，无论是标签还是回车换行还是空白都是对象。
3：DOM树
DOM树又称为文档树模型，把文档映射成树型结构。
节点：网页中所有的内容，在文档树中都称为节点(标签，属性，文本，注释等)，使用node表示
标签节点：网页中所有标签，通常称为元素节点，又简称为“元素”，使用element表示
文档：一个页面就是一个文档，DOM中使用document表示
4：获取元素
1.document.getElementById('id名') 根据id名返回第一个元素对象
2.document.getElementsByTagName('标签名')根据标签返回元素对象集合 类数组 - 遍历length
3.document.getElementsByClassName('类名') 根据类名返回元素对象集合- 类数组 -遍历 length
4.document.querySelector('选择器')根据选择器返回第一个对象
5.document.querSelectorAll('选择器')根据选择器返回元素对象集合
6.获取指定元素document.body document.documentElement
操作元素的内容
内容 元素对象.innerHTML=“值”识别标签
元素对象.innerText = “值” 不识别标签
获取 元素对象.innerHTML 获取的是全部内容 (包括标签 空格 换行)
元素对象.innerText 获取的是文本内容 (不包括 标签 空格 换行)
操作元素的属性
普通属性 src href id className ……等
表单专用属性 type value checked disabled……等
1.checked selected disabled 在html中属性名和属性值是一样的，在dom里面用true和false来表示不同的状态
设置 元素对象.属性名=属性值
获取 元素对象.属性名
操作元素的样式
样式：color background- font- border padding margin text-align……
css中类似于 font-size dom中去掉-，第二个单词首字母大写
设置
1. 元素对象.style.样式名=‘值’一个一个设置设置样式 行内样式
2.元素对象.clssName=‘类名’ 一次性设置多个样式 利用类名
获取
一般不获取 只能获取行内样式 元素对象.style.样式名
5：获取元素要干什么
比如说，你点击一个按钮，按钮需要改变颜色，那么你就得获取这个按钮的元素，然后对按钮进行修饰。
6：获取当前网页文档的高度，宽度，滚动高度，滚动宽度
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
滚动条的高：document.body.scrollTop
滚动条的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availweight
屏幕可用工作区宽度：window.screen.availwidth
7：案例
下面是我用获取元素，点击事件 做出了一个网页开关灯首先要找出它的事件源，事件类型，事件处理程序， 先获取button通过点击按钮对页面进行操作
7.1---网页开关灯
<button class="button">开关灯button>
<script>
var oBut = document.querySelector('button')
var count = 0
oBut.onclick = function () {
if (count % 2 == 0) {
document.body.style.backgroundColor = '#000'
} else {
document.body.style.backgroundColor = '#fff'
}
count++
}
script>
首先声明一个计次的变量每点击一次数字就会加1然后用if语句进行判断如果点击的次数是双数就是关灯
如果点击的次数是单数就是开灯
7.2---仿京东密码案例
<body>
<div>
<p>仿京东密码p>
<input type="password">
<img src="../../images/close.png" alt="">
div>
<script>
var iNput = document.querySelector('input')
var oImg = document.querySelector('img')
flag = 1; // 1 是true 0是false
oImg.onclick = function () {
if (flag) {
oImg.src = '../../images/close.png'
iNput.type = 'password'
flag = 0;
} else {
oImg.src = '../../images/open.png'
iNput.type = 'text'
flag = 1;
}
}
script>
body>
当你输入密码之后想看一下密码对不对，你就可以点击旁边的小眼睛，点击之后小眼睛睁开就是把密码框转换为文本框，里面的内容就可以看的到了。
7.3---百度换肤
<body>
<div class="box">
<img src="./图片/1.jpg" alt="">
<img src="./图片/2.jpg" alt="">
<img src="./图片/3.jpg" alt="">
<img src="./图片/4.jpg" alt="">
div>
<script>
var oLi = document.querySelectorAll('img')
for (var i = 0; i oLi.length; i++) {
oLi[i].onclick = function () {
// this.src 是点击的当前的图片路径
document.body.style.background = 'url(' + this.src + ')'
document.body.style.backgroundRepeat = 'no-repeat'
document.body.style.backgroundSize = 'cover'
}
}
script>
body>
通过获取元素点击图片对页面进行换图 this.src 是获取当前点击的图片路径进行换图
7.4---下拉类表框
7.5---密码登录
登录成功时
登录失败时
以上就是我们总结的本节内容，文中有不当之处还希望大家之处，我们一起进步。
扫一扫
470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
