概述
DOM(文档对象模型)是一种用于处理HTML和XML文档的编程接口。它定义了一种表示文档的标准模型,使得可以通过编程方式访问和操作文档的内容、结构和样式。通过DOM,可以使用JavaScript等编程语言来访问和修改文档的结构和内容。可以通过DOM提供的方法和属性来查找、添加、删除和修改文档中的元素和属性,或者改变元素的样式和事件处理。在Web开发中,通过DOM可以实现动态地更新页面内容,响应用户的交互操作,以及实现各种功能和效果。
浏览器中红色框的部分为上节介绍的Bom部分,网页的显示区域就是dom区域,也是我们需要编写操作的区域
1. 通过js获取页面上的元素
方法如下:
根据元素属性获取元素,2,3两种方式返回伪数组
1、根据id名来获取: document.getElementById(id名)
2、根据类名来获取: document.getElementsByClassName(类名)
3、根据标签名来获取:document.getElementsByTagName(标签名)
根据css选择器获取, 2 会返回伪数组
1、通过选择器获取,只会匹配第一个: document.querySelector(css选择器)
2、通过选择器获取,获取所有的: document.querySelectorAll(css选择器)
html结构1
<style>
ul{
list-style: none;
}
</style>
<div class="box">
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<p id="first">这是p标签</p>
<p class="text">这是class为text的p标签</p>
</div>
var ul = document.getElementById("first")
var box = document.getElementsByClassName("box")
var p = document.getElementsByTagName('li')
console.log(ul)
console.log(box)
console.log(p)
console.log('-------------------')
var p_first = document.querySelector('#first')
var li_first = document.querySelector('li')
var li = document.querySelectorAll('li')
console.log(p_first)
console.log(li_first) // 指挥获取第一个
console.log(li)
2. 操作元素
2.1 操作元素的样式
方法如下:
1、设置元素的样式, 通过js给元素设置的样式都是行内样式
元素.style.css属性名 = css属性值
2、 获取元素的样式
元素.style.css属性名
getComputedStyle(元素).css属性名
以上述‘html结构1’的结构为例, 操作页面元素样式。
// 将box的背景通过操作dom元素变为黄色
var box = document.querySelector('.box')
box.style.backgroundColor = 'yellow'
// 将css样式的 -去掉, 驼峰命名法书写
// 比如 background-color -> backgroundColor
console.log(box.style.backgroundColor)
console.log(getComputedStyle(box).backgroundColor)
2.2 操作元素的类名
1、获取元素的类名
元素.className
元素.classList.value
2、设置元素的类名(会覆盖原有的类名)
元素.className = 类名
元素.classList.value = 类名
3、新增类名()
元素.classList.add(类名)
4、 删除类名
元素.classList.remove(类名)
5、判断有没有类名
元素.classList.contains(类名)
以上述‘html结构1’的结构为例, 操作页面元素样式。
首先先写一个类名为active的css,待会通过操作类名给元素添加样式
<style>
ul{
list-style: none;
}
.active{
background-color: red;
}
</style>
var li_first = document.querySelector('ul li:first-child')
// 添加一个类名
li_first.classList.add('active')
console.log(li_first.className)
// 移除一个类名
li_first.classList.remove('active')
console.log(li_first.className)
2.3 操作元素属性
1、 原生属性
元素有本身带有的一些属性,例如:img标签的src、
input标签的value
等
2、data- 属性
我们可以给元素添加一个以data-
开头 自己定义的属性: 例如 data-age=18
js会将data- 后面的age当作key存储, 18当作对应的值存储。我们一个访问这个自定义的属性。
以上述‘html结构1’的结构为例,更改一些属性
<div class="box">
<ul id="list">
<li>1</li>
<li>2</li>
<!-- 添加一个data-属性 -->
<li data-index="3">3</li>
</ul>
<p id="first">这是p标签</p>
<p class="text">这是class为text的p标签</p>
</div>
var img = document.querySelector('img')
img.src = 'https://img1.baidu.com/it/u=1919509102,1927615551&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500'
var liArr = document.querySelectorAll('ul li')
// 获取
console.log(liArr[2].dataset.index)
// 设置
liArr[2].dataset.index = 999
console.log(liArr[2].dataset.index)
2.4 操作元素的内容
1、元素.innerHTML
2、元素.innerText
以上述‘html结构1’的结构为例
var p1 = document.querySelector('#first')
var p2 = document.querySelector('.text')
console.log(p1.innerHTML, p1.innerText)
console.log(p2.innerHTML, p2.innerText)
p1.innerHTML = '<p style="background-color:red">这是一个新的标签,innerHTML可以解析标签<p>'
p2.innerText = '<p style="background-color:red">这是一个新的标签,innerText并不能解析标签<p>'
console.log(p1.innerHTML, p1.innerText)
console.log(p2.innerHTML, p2.innerText)
2.5 获取元素在dom中的一些信息
1、 获取元素的尺寸
真实的宽度、 真实的高度
- 元素.offsetWidth
- 元素.clientWidth
- 元素.offsetHeight
- 元素.clientHeight
2、获取元素的偏移
偏移:元素左上角点相对于页面左上角点的距离就是偏移
元素的偏移距离是有两个方向的 一个是距离页面左边的偏移 一个是距离页面上边的偏移
左边的偏移量
- 元素.offsetLeft
上边的偏移量
- 元素.offsetTop
-
3、获取元素左边框和上边框的宽度
左边框宽度
- 元素.clientLeft
上边框宽度
- 元素.clientTop
3、利用js来生成、添加、删除、修改、克隆元素
- 生成: document.createElement(标签名)
- 添加:父元素.appendChild(子元素) | 父元素.insertBefore(新子元素, 旧子元素)
- 修改: 修改内容:见2.4 | 修改标签名:父元素.replaceChild(新元素, 旧元素)
- 删除:父元素.removeChild(子元素)
- 克隆:要克隆的元素.cloneNode() 只会克隆当前元素 | 要克隆的元素.cloneNode(true) 既会克隆当前元素 也会克隆子元素