DOM操作系列目录
提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加
例如:第一章 Python 机器学习入门之pandas的使用
提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- DOM操作系列目录
- 前言
- 一、DOM是什么?
- 二、使用步骤
-
- 1.获取标签的方式
-
- 1. 通过标签id名 - document.getElementById('id名')
- 2. 通过类名 - document.getElementsByClassName('类名') 获取到的是所有类名是指定的类名的标签组成的一个集合
- 3. 通过标签名 - document.getElementsByTagName('标签名') - 获取到的是伪数组集合
- 4. 通过name属性来获取标签 - document.getElementsByName('name属性的值')
- 5. 通过css选择器来获取一个标签 - document.querySelector('css选择器')
- 6. 通过css选择器选择所有满足选择器的标签 - document.querySelectorAll('css选择器')
- 2.标签内容的小操作
- 3.属性操作
- 4.样式的操作
- 5.样式操作
- 6.如何获取页面卷去的距离
- 7.什么短路运算符?
- 8.节点是如何操作的
- 9.-节点是如何获取的?
- 10.其它节点操作
- 11.获取标签尺寸
- 12.获取标签位置
- 13.获取边框厚度
- 案例
前言
提示:这里可以添加本文要记录的大概内容:
介绍DOM的一些操作流程
提示:以下是本篇文章正文内容,下面案例可供参考
一、DOM是什么?
1 文档对象模型
DOM(Document Object Model): 文档对象模型
DOM描绘了一个层次化的节点树,即HTML文档中的所有内容都是节点(node)。
DOM树中的所有节点均可通过JS进行访问,允许开发人员添加、移除、修改和查询页面的某一部分。
W3C规定的三类DOM标准接口
1、Core DOM(核心DOM),适用于各种结构化文档
2、XML DOM(Java OOP),专用于XML文档
3、HTML DOM,专用于HTML文档
DOM模型的节点:文档可以说是由节点构成的集合。在DOM模型中有以下3种常用节点:
1、元素节点:各种标签就是这些元素节点的名称,例如
等
2、文本节点:文本节点总是被包含在元素节点里面的内容,就是开始标签到结束标签之间各种内容
3、属性节点:一般用来修饰元素节点就称之为属性节点,就是标签中的属性
2.我们可以操作什么?
其实就是操作 html 中的标签的一些能力
我们可以操作哪些内容
获取一个元素
移除一个元素
创建一个元素
向页面里面添加一个元素
给元素绑定一些事件
获取元素的属性
给元素添加一些 css 样式
…
DOM 的核心对象就是 document对象
document 对象是浏览器内置的一个对象,里面存储着专门用来操作元素的各种方法
DOM: 页面中的标签,我们通过 js 获取到以后,就把这个对象叫做 DOM 对象
是DOM中的核心对象,里面的方法专门用来操作节点的动态获取内容
二、使用步骤
1.获取标签的方式
1. 通过标签id名 - document.getElementById(‘id名’)
代码如下(示例):
<button id="btn">按钮</button>
var btn = document.getElementById('var')
console.log(btn);
2. 通过类名 - document.getElementsByClassName(‘类名’) 获取到的是所有类名是指定的类名的标签组成的一个集合
<div class="box">盒子2</div>
<div class="box">盒子3</div>
var box = document.getElementsByClassName('box')
console.log(box);
console.log(box[0]);
获取到的集合 - 伪数组, 不是数组, 但是可以像数组一样取下标, 有长度, 可以遍历 - 但是不能使用数组的方法
box.push(111) // 报错
3. 通过标签名 - document.getElementsByTagName(‘标签名’) - 获取到的是伪数组集合
<div class="box">盒子2</div>
<div class="box">盒子3</div>
var divs = document.getElementsByTagName('div')
console.log(divs);
4. 通过name属性来获取标签 - document.getElementsByName(‘name属性的值’)
<input type="text" name="username">
<input type="radio" name="sex">男
<input type="radio" name="sex">女
var username = document.getElementsByName('username')
console.log(username);
var sexes = document.getElementsByName('sex')
console.log(sexes);
5. 通过css选择器来获取一个标签 - document.querySelector(‘css选择器’)
<button id="btn">按钮</button>
<button id="var">按钮</button>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div class="box">盒子3</div>
<input type="text" name="username">
<input type="radio" name="sex">男
<input type="radio" name="sex">女
var username = document.querySelector('[name="username"]')
console.log(username);
var div = document.querySelector('div')
console.log(div);
var box = document.querySelector('.box')
console.log(box);
var btn = document.querySelector('#var')
console.log(btn);
6. 通过css选择器选择所有满足选择器的标签 - document.querySelectorAll(‘css选择器’)
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div class="box">盒子3</div>document.querySelectorAll('css选择器')
var divs = document.querySelectorAll('div')
console.log(divs);
2.标签内容的小操作
1.innerText的操作 —设置标签的内容 - 标签.innerText = 值
代码如下(示例):
<button>按钮</button>
<div>盒子</div>
var btn = document.querySelector('button')
console.log(btn);
// 设置标签的内容 - 标签.innerText = 值
btn.innerText = '确定'
// 获取标签内容
console.log(btn.innerText);
var div = document.querySelector('div')
console.log(div.innerText);
div.innerText = '哈哈'
div.innerText = '<b>哈哈</b>'
// innerText不能获取/设置 标签中包含的标签
2.innerHTML - 让设置的内容中的标签被解析,获取到包含标签的内容 --------设置标签的内容 - 标签.innerHTML= 值
代码如下(示例):
<div>盒子</div>
var div = document.querySelector('div')
div.innerHTML = '<b>哈哈</b>'
console.log( div.innerHTML );
3.表单元素通过value属性来进行操作的—设置表单元素的内容 - 表单元素.value = 值
<input type="text" value="哈哈">
var input = document.querySelector('input')
获取表单元素的内容 - 标签.value
console.log(input.value);
设置表单元素的内容 - 表单元素.value = 值
input.value = '呵呵'
4.小结:
双标签.innerText // 获取/设置标签中的文本内容
双标签.innerHTML // 获取/设置包含标签的内容
表单元素.value // 获取/设置表单元素的内容
3.属性操作
1.获取标签属性的值—标签.getAttribute(‘属性名’)
html代码
<img src="./images/1.webp" alt="">
js代码
var img = document.querySelector('img')
console.log(img.getAttribute('src'));
2.设置标签属性 - 标签.setAttribute(‘属性名’, ‘值’)
<img src="./images/1.webp" alt="">
var img = document.querySelector('img')
img.setAttribute('src', './images/2.webp')
3. 删除标签属性 - 标签.removeAttribute(‘属性名’)
<img src="./images/1.webp" alt="">
var img = document.querySelector('img')
img.removeAttribute('src')
补充:1.标签.XX - 对象访问属性的语法
<img src="./images/1.webp" alt="">
var img = document.querySelector('img')
console.log(img);
console.log(typeof img);
// dom中的元素,有一个特点,console.log只能输出标签的样子,不能输出原本的对象的样子
// 通过console.dir输出dom元素,就是对象形式了
console.dir(img)
2.将标签看做对象的话,对象也是有属性的
<img src="./images/1.webp" alt="">
var img = document.querySelector('img')
1.
//console.log( img.src );
// img.src = './images/2.webp'
2.
// console.log(img.age);
// img.age = 12
// console.log(img.age);
// 这种操作是将标签当做对象看待的,不会体现在标签上的
3.
img.setAttribute('age', 12)
console.log( img.getAttribute('age') );
3.单章小结
:
操作标签属性 - 让这个属性能在标签中体现
标签.setAttribute()
标签.getAttribute()
标签.removeAttribute()
操作对象属性 - 不体现在标签上的
标签.属性名
属性能体现在标签上的,也能在对象中出现的属性,两种方式都可以进行操作
4.样式的操作
1.获取标签样式 - window.getComputedStyle(标签对象)
<style>
.box{
width: 200px;
height: 200px;
border: 5px solid #aaa;
}
</style>
<div class="box"></div>
<script>
// 获取标签
var box = document.querySelector('.box')
// 获取标签样式 - window.getComputedStyle(标签对象)
var style = getComputedStyle(box)
console.log(style);
// 获取到标签所有css样式 键值对 组成的对象
// 获取宽
console.log( style.width );
console.log( style.border );
</script>
2.设置样式 - 标签对象.style.css键 = 值
<style>
.box{
width: 200px;
height: 200px;
border: 5px solid #aaa;
}
</style>
<div class="box"></div>
<script>
// 获取标签
var box = document.querySelector