DOM 的基本概念及操作
- DOM(Document Object Model): 文档对象模型
- 其实就是操作 html 中的标签的一些能力
- 我们可以操作哪些内容
- 获取一个元素
- 移除一个元素
- 创建一个元素
- 向页面中添加一个元素
- 给元素绑定一些事件
- 获取元素的属性
- 给元素添加一些 css 样式
- ...
- DOM 的核心对象就是 document 对象
- document 对象是浏览器内置的一个对象, 里面存储这专门用来操作元素的各种方法
- DOM: 页面中的标签, 我们通过 JS 获取到以后, 就把这个对象叫做 DOM 对象
获取常规元素
-
通过 JS 代码来获取页面中的标签, 获取后我们就可以操作这些标签
/* 标签有两种属性 1、标签属性 2、对象属性 */ var div=document.querySelector("div"); console.log(div) 对象属性 不能再标签中看到，只能在获取DOM对象属性时可以获取到 div.a=1; div.b=10; console.log(div); //无法显示a与b 显示DOM对象的结果 console.dir(div); console.log(div.id) console.log(div.data) console.log(div.className) 标签属性和对象属性并不是完全共通的 部分系统的标签属性可以通过对象属性调用，部分系统标签属性被改换为其他属性名， 自定义标签属性名无法通过对象属性获取
querySelector
- querySelector 是按照选择器的方式来获取元素
- 也就是说, 按照我们写 css 的时候的选择器来获取
- 这个方法只能获取到一个元素, 并且是页面中第一个满足条件的元素
console.log(document.querySelector('div')) // 获取页面中第一个 div 元素
console.log(document.querySelector('.box')) // 获取页面中第一个 有 box 类名的元素
console.log(document.querySelector('#box')) // 获取页面中第一个 id 名为 box 的元素
querySelectorAll
-
querySelectorAll 是按照选择器的方式来获取元素
-
这个方法能获取到所有满足条件的元素, 以一个伪数组的形式返回
* 伪数组 * 长得很像数组, 也有下标, 也有 lengtg, 但是数组的方法, 很多都没有 console.log(document.querySelectorAll('div')) // 获取页面中的所有的 div 元素 console.log(document.querySelectorAll('.div'))// 获取页面中的所有的 类名为 box 的元素 -
获取到的是一组数据, 也是需要用索引来获取到准确的每一个 DOM 元素
getAttribute
- 获取元素的某个属性(包括自定义属性)
-
// 元素.getAttribute(标签属性名) 可以获取这个元素标签属性值 <div class="box" qwe="一个自定义属性" data-name="张三" data-bigbox="一个大盒子">一个普通的 DIV</div> var box = document.querySelector('.box') 1. 获取标签属性 // console.log(box.getAttribute('class')) //填写属性名 // var res = box.getAttribute('qwe') // console.log(res)
setAttribute
-
给元素设置的一个属性(包括自定义属性)
1. box.setAttribute('my_qwe', '这是通过 JS 添加的一个自定义属性') box.setAttribute('原有的/或新加的属性名', '要修改的属性值') box.setAttribute("show",""); //变相删除属性 2. box.setAttribute('class', 'qf001') console.log(box) 哪怕 class的值已经修改，但获取的标签依然有用 ，哪怕class的值此时不是.box 注意无论class以前有几个类名，一但用 box.setAttribute('class', 'qf001') 那qf001是唯一值，以前的都被覆盖 box.setAttribute('qwe', '通过 JS 将 qwe 的属性值 进行了一个修改') 3扩展： removeAttribute 删除属性标签 ： box2.removeAttribute('class')
操作属性
- 我们获取到元素后, 可以直接操作 DOM的属性, 然后直接把效果展示在页面上
innerHTML/innerText/value
* innerHTML/innerText/value
* innerHTML/innerText 能够给 输入框之外的标签 添加展示文本
* value 是专门给 输入框添加展示文本
*
* innerHTML/innerText
* innerHTML 能够获取到标签内部的所有结构, 包裹内部的标签
* 能够将内部的标签识别出来, 渲染为一个 html 标签
* innerText 能够获取到标签内部的所有文本, 获取不到内部的标签
*
* 推荐使用 innerText 能够防止用户注入恶意代码
通过属性获取文本
在控制台显示
// 例子1
<div class="box1">
你好 <span>国庆节</span>
</div>
console.log(box1.innerHTML) // 你好 <span>国庆节</span>
console.log(box1.innerText) // 你好 国庆节
//例子2
box1.innerHTML = '<p>一个新的文本</p>' //页面结果： 一个新的文本 // 能够将内部的标签识别出来, 渲染为一个 html 标签
box1.innerText = '<p>一个新的文本</p>' //页面结果：<p>一个新的文本</p> // 会将字符串中所有的内容渲染到页面中, 将字符串中的标签当字符串一起渲染到页面上
例子
<div id="msg">
<p>在 <span>5</span> 秒后可以重新获取验证码</p>
<p>您的验证码: QF001</p>
</div>
msg.innerHTML = '你好'
msg.innerText = '你好'
问题 ： 让文字显示在页面上 相当于 msg赋值为 你好 并显示在页面上
msg.value = '你好 ' // value 属性是给 input 输入框设置 展示文本, 所以 DIV 无法生效
inp.value = '你好 ' // 如果想要给 input 输入框添加展示文本 需要借助 value 属性
H5 自定义属性
* 3. H5 新增自定义属性
*
* h5 自定义属性在书写的时候有一个 固定的开头就是 data-
* 完整语法: data-属性名=属性值
*
* 获取的语法:
* 元素/标签.dataset.属性名(属性名不要带data-)
*
* 注意点: 在设置的时候 不要采用驼峰, 全小写, 因为哪怕你大写了, 浏览器也会转换为 小写
操作, 就是对这个数据结构的操作(对象操作语法)
<div data-a="100" class="box"></div>
var oDiv = document.querySelector('div')
// 增
oDiv.dataset.age = 18
oDiv.dataset.要加的属性名 = 属性值
// 删
delete oDiv.dataset.a
delete oDiv.dataset.要删的属性名
// 查
console.log(oDiv.dataset.age)
console.log(oDiv.dataset.要查的属性名)
style
- 专门用来个元素添加 css 样式的
- 添加修改的都是行内样式
- background-color 在这里语法不对，要删去“-”采用驼峰命名法 backgroundColor 。 C大写
<div></div>
var div = document.querySelector('div')
div.style.width = '100px' //添加修改行内样式 的宽
div.style.hright = '100px' //添加修改行内样式 的高
div.style.backgroundColor = 'pink'
---------------------------
1.<div style="width: 100px; height: 200px; background-color: skyblue;"></div>
var oDiv = document.querySelector('div')
console.log(oDiv.style.width) // 打印行内样式的宽
---------
2. <div class="box"></div>
var myDiv = document.querySelector('.box')
myDiv.style.backgroundColor = 'red' // 当前代码给 myDiv 标签 添加了一个行内样式,
宽度为 300px, 覆盖了 类名上的宽度
3. var obj={
width:"50px",
height:"50px",
backgroundColor:"blue"
}
Object.assign(div.style,obj);
就是指这个 给div增加行内样式
Object.assign(div.style, {
width: "50px",
height: "50px",
backgroundColor: "blue",
});
getComputedStyle('要查询样式的标签').要查询的样式名
* 能够获取到元素的样式 (行内和非行内都可以)
* 但是获取到的内容是只读的, 只允许查询, 不允许修改
var myDiv = document.querySelector('.box')
console.log(getComputedStyle(myDiv).width) //打印内部式里设置的宽度
className
-
专门用来操作元素的 类名
* 元素/标签.className => 能够得到元素目前拥有的类名 * 还可以给这个属性重新赋值, 然后修改当前标签的类名 * * 元素/标签.classList * 返回值 是一个伪数组 * 数组内下表对应的是我们的每一个类名 * value 属性对应的是我们完整类名的字符串 */ <div class='box fdf dfbfb'></div> var div = document.querySelector('.box') console.log(div.className) // 可以打印所有class类名 ------------------------------------ 1. className console.log(box.className) box.className = 'box2' // 当前方式 不管之前有多少类名, 全都重新覆盖掉 box.className = box.className + ' box2' box.className += ' box2' // 类名之间一定要加 空格 box.className = '' // 相当于清空之前的所有类名 2. classList console.log(box.classList) box.classList.add('box2') // 向这个标签上在追加一个类名, 原本的类名不受影响 box.classList.remove('fdf') // 删除指定类名 注意这里类名需要不需要加点 contains 判断是否有某个class console.log(div.classList.contains("div1")) 遍历样式 div.classList.forEach(item=>console.log(item)) 替换样式 div.classList.replace("div1","div3")
