DOM操作系列目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

介绍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、元素节点：各种标签就是这些元素节点的名称，例如

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')获取表单元素的内容 - 标签.valueconsole.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('.box')// 设置样式 - 标签对象.style.css键 = 值// 给标签设置的样式的值，一定是字符串box.style.background = 'red'// box.style.background-color = 'blue' // 有连字符就不能使用.的操作形式box.style['background-color'] = 'blue'// js为了方便我们设置样式 - 如果键中带有连字符，就可以将这个键写成小驼峰形式box.style.backgroundColor = 'green'</script>

5.样式操作

1.类名的设置 - 标签.className = ‘类名’

<style>.box {width: 200px;height: 200px;background-color: red;}.border {border: 10px solid #000;}
</style>
<body><div>盒子</div><button>按钮</button>
</body>
<script>// 获取标签var div = document.querySelector('div')1.// 类名的设置 - 标签.className = '类名'div.className = 'box'
2.// 设置多个类名// div.className = 'box border'
3.
// document.querySelector('button').onclick = function() {//     // div.className = ''//     div.className = 'box'// }</script>

2.获取类名 - 标签.className

<style>.box {width: 200px;height: 200px;background-color: red;}.border {border: 10px solid #000;}
</style>
<body>
<div class="box">盒子</div><button>按钮</button>
</body>
<script>// 获取标签var div = document.querySelector('div')document.querySelector('button').onclick = function () {// 在div原本的类名基础上新增一个类名// 先获取原本的类名var cname = div.classNameconsole.log(cname);// 将原本的类名跟新的类名拼接在一起cname += ' border'console.log(cname);// 将拼接好的两个类名赋值给标签div.className = cname}

3.标签.classList - 获取到标签所有的类名 - 返回伪数组

<style>.box {width: 200px;height: 200px;background-color: red;}.border {border: 10px solid #000;}
</style>
<body>
<div class="box">盒子</div><button>按钮</button>
</body>
<script>// 获取标签var div = document.querySelector('div')// classList有add方法，可以添加类名document.querySelector('button').onclick = function () {// div.classList.add('border')// // classList可以删除了黎明 - 用remove方法// div.classList.remove('box')// 如果标签有类名，就删除，没有类名就添加 - togglediv.classList.toggle('border')// 可以判断标签是否带有某个类名 - contains - 返回布尔值var bool = div.classList.contains('border')console.log(bool);}</script>

4.小结：

    设置类名 - 标签.className = '类名'设置类名 - 标签.className = '类名 类名'获取类名 - 标签.className方便的操作类名标签.classList.add(类名) - 给标签添加一个类名标签.classList.remove(类名) - 给标签删除一个类名标签.classList.toggle(类名) - 给标签切换一个类名标签.classList.contains(类名) - 判断标签是否有某个类名 - 返回布尔值

6.如何获取页面卷去的距离

1.语法：document.documentElement.scrollTop

`

<body>
<div style="width: 20px;">暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能
</div>
<button>获取</button>
</body>
<script>
// 点击按钮，获取卷去的距离var btn = document.querySelector('button')btn.onclick = function() {     /// 获取卷去的距离 - document.documentElement.scrollTopvar t = document.documentElement.scrollTopconsole.log(t);
}
// 在网页滚动过程中获取卷去的距离
window.onscroll = function() {var t = document.documentElement.scrollTop// 这种获取卷去距离的方式，有兼容问题：当网页的文档声明不存在的时候是获取不到的console.log(t);
}
</script>

// 在网页滚动过程中获取卷去的距离

2.上面这个语法当html没有文档声明的时候，是获取不到的，彼时，需要用到另外一个语法来获取：document.body.scollTop

<body>
<div style="width: 20px;">暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能
</div>
<button>获取</button>
</body>
<script>
// 点击按钮，获取卷去的距离var btn = document.querySelector('button')btn.onclick = function() {     /// 获取卷去的距离 - document.documentElement.scrollTopvar t = document.documentElement.scrollTopconsole.log(t);
}
// 在网页滚动过程中获取卷去的距离
window.onscroll = function() {var t = document.documentElement.scrollTop// 这种获取卷去距离的方式，有兼容问题：当网页的文档声明不存在的时候是获取不到的// 当网页文档声明不存在的时候，我们需要使用另外一种方式获取卷去的距离// var t = document.body.scrollTop// 兼容写法，不管在什么时候都能获取到卷去的距离var t = document.documentElement.scrollTop || document.body.scrollTopconsole.log(t);
}
</script>

3.兼容写法 - 不管什么情况下都能获取到

<body>
<div style="width: 20px;">暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能暗示法节快乐拉克丝记得发空气炮为日只能写密码才能
</div>
<button>获取</button>
</body>
<script>
// 点击按钮，获取卷去的距离
// var btn = document.querySelector('button')
// btn.onclick = function() {//     // 获取卷去的距离 - document.documentElement.scrollTop
//     var t = document.documentElement.scrollTop
//     console.log(t);
// }// 在网页滚动过程中获取卷去的距离
window.onscroll = function() {// var t = document.documentElement.scrollTop// 这种获取卷去距离的方式，有兼容问题：当网页的文档声明不存在的时候是获取不到的// 当网页文档声明不存在的时候，我们需要使用另外一种方式获取卷去的距离// var t = document.body.scrollTop// 兼容写法，不管在什么时候都能获取到卷去的距离var t = document.documentElement.scrollTop || document.body.scrollTopconsole.log(t);
}

4.小结

：
获取卷去的距离：
document.documentElement.scrollTop - 有文档声明的时候
document.body.scrollTop - 没有文档声明的时候
兼容写法：
var t = documentElement.scollTop || document.body.scrollTop

7.什么短路运算符？

1.短路运算：

是针对于赋值操作的。根据逻辑运算的规则，使用逻辑运算符中的&&和||，将两个数据中的其中一个，赋值给变量。

 var b = true && falseconsole.log(b); // falsevar a = 0 && 1console.log(a); // 0var b = 2 && 3console.log(b); // 3false || true ==> truefalse || false ==> falsetrue || true ==> truetrue || false == > truevar a = 0 || 1console.log(a); // 1var b = 2 || 3console.log(b); // 2

2.短路运算：

短路运算左右两边，不止局限于布尔值，如果是非布尔值，在判断是否能执行到右边的值的时候，会将非布尔值数据转成布尔值去判断，赋值的时候，会将数据直接赋值

3.小结

：
短路运算的最终目的是什么？利用逻辑运算的规则，从两个数据中选择其中一个赋值个变量
var 变量 = a && b
当a为true，就将b赋值给变量
当a为false，就将a赋值给变量
var 变量 = a || b
当a为true，就将a赋值给变量
当a为false，就将b赋值给变量

8.节点是如何操作的

1. 节点是有什么组成的？

节点： .组成线，先组成面；用到html中，整个html网页，有多个东西组成的，每个东西包含：标签 + 文本 + 属性 + 注释。每个东西就叫做html的节点

     <body><ul><li>1</li><li>2</li><li>3</li><!-- 注释 --></ul></body>
<script>
console.log(document.querySelector('ul').childNodes);// 实际在应用中，文本 - 字符串 - 将他放在标签中，修改内容// 属性：属性操作// 注释：对开发来讲，没有意义// 要学习的节点操作：重点是学习标签操作
</script>

2.创建节点和插入节点

1.标签创建节点—document.createElement(‘标签名’)

//创建节点var div = document.createElement('div')// 添加内容div.innerText = '盒子'console.log(div);

2.插入节点—语法：父.appendChild(子)

var div = document.createElement('div')
// 添加内容
div.innerText = '盒子'
// console.log(div);// 节点插入：
// 将标签放在另一个标签中的最后面 - 给一个父标签，追加一个子标签
// 语法：父.appendChild(子)
// 将div追加到body中
document.body.appendChild(div)

3.将标签添加到某个子标签的前面 —父.insertBefore(新的标签, 旧的子标签

)

   var div = document.createElement('div')// 添加内容div.innerText = '盒子'// console.log(div);// 节点插入：// 将标签放在另一个标签中的最后面 - 给一个父标签，追加一个子标签// 语法：父.appendChild(子)// 将div追加到body中document.body.appendChild(div)// 将标签添加到某个子标签的前面 // 语法：父.insertBefore(新的标签, 旧的子标签)var span = document.createElement('span')span.innerText = 'span标签'// 将span放在div的前面document.body.insertBefore(span, div)

4.小结

：
标签创建document.createElement()
标签插入：
父.appendChild(子)
父.insertBefore(新, 旧的子)

9.-节点是如何获取的？

1. 获取所有子标签节点 - 父.children

<body>
<ul><li>1</li><li>2</li><li class="three">3</li><li>4</li><li>5</li>
</ul>
</body>
<script>
// 根据标签之间的关系来获取标签
// 获取所有子标签节点 - 父.children
var ul = document.querySelector('ul')
var children = ul.children
console.log(children);
</script>

2.获取第一个子标签 - 父.firstElementChild

<ul><li>1</li><li>2</li><li class="three">3</li><li>4</li><li>5</li>
</ul>
</body>
<script>
// 根据标签之间的关系来获取标签
// 获取第一个子标签 - 父.firstElementChild
var ul = document.querySelector('ul')
var first = ul.firstElementChild
console.log(first);
</script>

3.获取最后一个子标签 - 父.lastElementChild

<ul><li>1</li><li>2</li><li class="three">3</li><li>4</li><li>5</li>
</ul>
</body>
<script>
// 根据标签之间的关系来获取标签
// 获取最后一个子标签 - 父.lastElementChild
var ul = document.querySelector('ul')
var last = ul.lastElementChild
console.log(last);
</script>

4.获取上一个兄弟标签节点 - 标签.previousElementSibling

<ul><li>1</li><li>2</li><li class="three">3</li><li>4</li><li>5</li>
</ul>
</body>
<script>
// 根据标签之间的关系来获取标签
// 获取最后一个子标签 - 父.lastElementChild
var ul = document.querySelector('ul')
var last = ul.lastElementChild
console.log(last);
// 获取上一个兄弟标签节点 - 标签.previousElementSibling
var prev = last.previousElementSibling
console.log(prev);
</script>

5.获取下一个兄弟标签节点 - 标签.nextElementSibling

<ul><li>1</li><li>2</li><li class="three">3</li><li>4</li><li>5</li>
</ul>
</body>
<script>
// 根据标签之间的关系来获取标签
// 获取第一个子标签 - 父.firstElementChild
var ul = document.querySelector('ul')
var first = ul.firstElementChild
console.log(first);
</script>
// 获取下一个兄弟标签节点 - 标签.nextElementSibling
var next = first.nextElementSibling
console.log(next);

6.获取父标签 - 子.parentElement

<ul><li>1</li><li>2</li><li class="three">3</li><li>4</li><li>5</li>
</ul>
</body>
<script>
// 根据标签之间的关系来获取标签
// 获取第一个子标签 - 父.firstElementChild
var ul = document.querySelector('ul')
var first = ul.firstElementChild
console.log(first);
</script>
// 获取下一个兄弟标签节点 - 标签.nextElementSibling
var next = first.nextElementSibling
console.log(next);
console.log( next.parentElement );

7.小结：

所有子：父.children
第一个子：父.firstElementChild
最后一个子：父.lastElementChild
上一个兄弟：标签.previousElementSibling
下一个兄弟：标签.nextElementSibling
父：子.parentElement

10.其它节点操作

1.标签的替换—父.replaceChild(新, 旧子)

body><div>盒子</div>
</body>
<script>// 标签替换：父.replaceChild(新, 旧子)var p = document.createElement('p')p.innerText = '段落'// 用p标签替换掉页面中的divvar div = document.querySelector('div')document.body.replaceChild(p, div)</script>

2.标签复制：标签.cloneNode() - 返回复制出来的新标签

<body><div>盒子</div>
</body>
<script>// 标签替换：父.replaceChild(新, 旧子)var p = document.createElement('p')p.innerText = '段落'// 用p标签替换掉页面中的divvar div = document.querySelector('div')document.body.replaceChild(p, div)// 标签复制：标签.cloneNode() - 返回复制出来的新标签console.log(p.cloneNode());// 默认只能复制空标签 - 要复制标签中的内容，需要给方法添加参数：trueconsole.log(p.cloneNode(true));document.body.appendChild(p.cloneNode(true))</script>

3.标签删除：父.removeChild(子)

body><div>盒子</div>
</body>
<script>// 标签替换：父.replaceChild(新, 旧子)var p = document.createElement('p')p.innerText = '段落'// 用p标签替换掉页面中的divvar div = document.querySelector('div')document.body.replaceChild(p, div)// 标签删除：父.removeChild(子)document.body.removeChild(p)</script>

4.小结：

    标签替换：父.replaceChild(新, 旧)标签复制：标签.cloneNode(true)标签删除：父.removeChild(子)

11.获取标签尺寸

1.不包含边框 - 标签.clientWidth 标签.clientHeight

<style>
.box{width: 100px;height: 100px;padding: 10px;border: 12px solid #000;margin: 15px;
}
</style>
<body>
<div class="box"></div>
</body>
<script>
// 获取标签尺寸
var box = document.querySelector('.box')
// 不包含边框 - 标签.clientWidth   标签.clientHeight
var w1 = box.clientWidth
var h1 = box.clientHeight
console.log(w1, h1); // 得到数字 120 120console.log( getComputedStyle(box).width );
</script>

2. 包含边框的 - 标签.offsetWidth 标签.offsetHeight

<style>
.box{width: 100px;height: 100px;padding: 10px;border: 12px solid #000;margin: 15px;
}
</style>
<body>
<div class="box"></div>
</body>
<script>
// 获取标签尺寸
var box = document.querySelector('.box')// 包含边框的 - 标签.offsetWidth   标签.offsetHeightvar w2 = box.offsetWidthvar h2 = box.offsetHeightconsole.log(w2, h2);</script>

3.小结：

获取包含边框尺寸：标签.offsetWidth 标签.offsetHeight
获取不包含边框尺寸： 标签.clientWidth 标签.clientHeight

12.获取标签位置

1.获取位置：标签.offsetLeft 标签.offsetTop

<style>
.big{width: 300px;height: 300px;background-color: #0f0;margin: 0 auto;/* position: relative; */
}
.small{width: 100px;height: 100px;background-color: #00f;
}
</style>
<body>
<div class="big"><div class="small"></div>
</div>
</body>
<script>
// 获取位置：标签.offsetLeft   标签.offsetTop
// 获取small的位置
var small = document.querySelector('.small')
var l = small.offsetLeft
console.log(l);
// 获取到的位置是相对于设置过定位的父标签的位置 - 如果所有祖宗标签都没有设置过定位，获取到的就是相对于浏览器的位置var t = small.offsetTop
console.log(t);
</script>

13.获取边框厚度

1.获取边框厚度 - 标签.clientLeft 标签.clientTop

<style>.box{width: 100px;height: 100px;padding: 10px;border-top: 12px solid #000;border-bottom: 13px solid #000;border-left: 14px solid #000;border-right: 15px solid #000;margin: 15px;}</style>
<body><div class="box"></div>
</body>
<script>
// 获取边框厚度 - 标签.clientLeft   标签.clientTop
var box = document.querySelector('.box')
var l = box.clientLeft
console.log(l);var t = box.clientTop
console.log(t);
</script>

案例

1.随机点名

<style>
.box{width: 300px;margin: 50px auto;
}
h1{font-size: 30px;text-align: center;
}
.namebox{width: 300px;height: 150px;border: 5px solid #aaa;text-align: center;line-height: 150px;font-size: 80px;font-weight: bold;
}
.btn{width: 100px;height: 50px;text-align: center;line-height: 50px;font-weight: bold;font-size: 30px;border: 3px solid #aaa;margin: 20px auto;cursor: pointer;
}
</style>
<body>
<div class="box"><h1>随机点名</h1><div class="namebox">周杰伦</div><div class="btn">开始</div>
</div>
</body>
<script>
// 效果：点击按钮，让namebox中的姓名，快速的切换一个随机姓名，按钮中的文字设置为停止 - 下次再点击按钮(停止)，姓名停止切换
// 定义数组，存放很多姓名
var arr = ['春阳', '天', '力', '娟', '华', '武', '军', '豪', '亮', '冲', '德', '进', '青', '的', '武', '鸣']
// 获取我们需要操作的标签
var btn = document.querySelector('.btn')
var namebox = document.querySelector('.namebox')
var timer
// 点击按钮
btn.onclick = function() {if(btn.innerText === '开始') {// 将按钮文字换成停止btn.innerText = '停止'//* 让姓名自动每隔一会自动切换 - 定时器timer = setInterval(function() {// 获取一个随机姓名，放在namebox中// 要有很多姓名，选择一个随机的// 获取数组的随机下标var index = parseInt(Math.random() * arr.length)// 根据随机下标获取姓名var name = arr[index]// console.log(name);// 将姓名放在namebox中namebox.innerText = name}, 100)} else {btn.innerText = '开始'clearInterval(timer)}
}
</script>

2.点击切换图片

<style>img{width: 300px;height: 200px;}
</style>
<body>
<button>切换</button>
<br>
<img src="./images/1.webp" alt="">
</body>
<script>
// 获取标签
var btn = document.querySelector('button')
var img = document.querySelector('img')
// 点击
var num = 1
btn.onclick = function() {// 换图片 - 更换img的src属性的值// 换随机图片// 获取1~3的随机数// var num = parseInt(Math.random() * 3) + 1// img.setAttribute('src', './images/'+num+'.webp')// img.src = './images/'+num+'.webp'// 图片按照顺序切换 - 1 2 3 1 2 3 1 2 3num++// 限制最大值if(num > 3) {num = 1}img.src = './images/'+num+'.webp'
}
</script>

3.表格的动态创建

<body><table width=500 border=1><thead><tr><th>序号</th><th>姓名</th><th>年龄</th></tr></thead><tbody></tbody></table>
</body>
<script>var arr = [{id: 1,name: '张三',age: 12},{id: 2,name: '李四',age: 15},{id: 3,name: '王五',age: 22}]var tbody = document.querySelector('tbody')// 遍历数组arr.forEach(function (v) {console.log(v);// 创建trvar tr = document.createElement('tr')// 遍历对象for (var key in v) {// 创建tdvar td = document.createElement('td')// 给td放入内容td.innerText = v[key]// 将td放在tr中tr.appendChild(td)}// 将tr放在tbody中tbody.appendChild(tr)})/*给标签添加文本内容 - 标签.innerText给标签添加带标签的内容：标签.innerHTML = 字符串标签.appendChild(标签对象)标签.insertBefore(新标签对象, 旧标签对象)*/
</script>

4.表格的删除操作

<script>
var arr = [{id: 1,name: '张三',age: 12},{id: 2,name: '李四',age: 15},{id: 3,name: '王五',age: 22}
]
var tbody = document.querySelector('tbody')
// 遍历数组
arr.forEach(function(v) {// 创建trvar tr = document.createElement('tr')// 遍历对象for(var key in v) {// 创建tdvar td = document.createElement('td')// 给td放入内容td.innerText = v[key]// 将td放在tr中tr.appendChild(td)}// 创建删除的tdvar td = document.createElement('td')// 给td放内容td.innerText = '删除'// 将td放在tr中tr.appendChild(td)// 将tr放在tbody中tbody.appendChild(tr)
})
// 当页面中有了删除的td后 - 获取所有删除的td
var tds = document.querySelectorAll('td:last-child')
console.log(tds);
// 遍历添加事件
for(var a=0; a<tds.length; a++) {tds[a].onclick = function() {// 将点击的这个td的父标签tr删除// 事件函数中，关键字this代表当前正在触发事件的标签console.log(this); // this在事件函数中，就代表触发当前事件的事件源// 父.removeChild(子) - tbody.removeChild(当前td所在的tr)tbody.removeChild(this.parentElement)}
}
</script>

5.顶部悬浮和回到顶部

  <style>.totop {width: 50px;height: 50px;border: 1px solid #aaa;position: fixed;right: 50px;bottom: 50px;letter-spacing: 2px;text-align: center;display: flex;align-items: center;cursor: pointer;}.top {width: 100%;height: 0;background-color: #f00;color: #fff;text-align: center;line-height: 100px;font-size: 50px;transition: height 1s;position: fixed;top: 0;left: 0;}div+.recommend {width: 50px;height: 50px;border: 1px solid #aaa;position: fixed;right: 50px;bottom: 150px;letter-spacing: 2px;text-align: center;display: flex;align-items: center;cursor: pointer;}</style>
</head><body><div class="top">我是顶部</div><div class="recommend">为你推荐</div><div class="totop">回调顶部</div><div style="width: 20px;">养心是一门技术活儿，看似简单，实则不易。读书养心。茶余饭后，夜深人静，一册在手，书中找乐。用汉书下酒，用史记疗饥。隔着时空，看清照皱眉，看李白饮酒，与庄周梦蝶。选择了一本好书，就是选择了一个好的朋友，在文字中穿行，丢弃浮躁，沉淀心性。<h1 class="recommend">为你推荐</h1>西汉经学家刘向说：书犹药也，善读者能医愚。细嚼方知，这一味治愚的药便是读书养心。</div>
</body>
<script>// 获取回到顶部按钮var totop = document.querySelector('.totop')// 定义定时器变量var timer// 点击事件totop.onclick = function () {// 回到顶部 - 卷去的距离，可以获取，也可以赋值，设置卷去的距离// document.documentElement.scrollTop = document.body.scrollTop = 0// 让回到顶部的效果是动画效果 - 定时器 - 动画是由多个不同的状态连贯在一起组成的timer = setInterval(function () {// 不停的向上滚动// 获取卷去的距离var t = document.documentElement.scrollTop || document.body.scrollTop// 将卷去的距离减小t -= 20// 将减小后的数字赋值给卷去的距离document.documentElement.scrollTop = document.body.scrollTop = t// 查看定时器是否停止// console.log(t);// 如果t小于等于0了，就应该将定时器停止if (t <= 0) {clearInterval(timer)}}, 10)}// 滚动条只要在滚动，就要获取到卷去的距离是多少，当卷去的距离大于等于某个数字的时候就让顶部显示 var dingbu = document.querySelector('.top')window.onscroll = function () {// 这个事件是只要滚动条在动就会执行var t = document.documentElement.scrollTop || document.body.scrollTop// 判断这个t是否大于等于某个数字if (t >= 1500) {// 让顶部显示dingbu.style.transition = 'height 1s';dingbu.style.height = '100px'} else {// display样式没有动画效果的dingbu.style.transition = 'height 0s';dingbu.style.height = 0}}var recommends = document.querySelectorAll('.recommend')recommends[0].onclick = function () {// 获取为你推荐标题距离顶部的距离var length = recommends[1].offsetTopconsole.log(length);// 希望页面滚动到某个位置 - 给卷去的距离赋值document.documentElement.scrollTop = document.body.scrollTop = length - 100}
</script>

DOM的一些操作流程相关推荐

1. 黑马程序员pink老师前端入门教程，零基础必看的JavaScript基础语法视频教程（DOM）

   API DOM DOM简介 什么是DOM DOM树 获取元素 getElementById获取元素 得到一个元素对象object 用dir打印,还可以得到它的属性 div#time getElemen ...

2. 无人机倾斜摄影—三维建模和DSM，DEM，DOM（正射影像）的生成「CC(Smart3D)），Pix4d，Photoscan，Inpho」

   CC(Smart3D)),Pix4d,Photoscan,Inpho所有教程做了个汇总 已下为文章目录 由于文章较多,在CSDN中做单个超链接比较麻烦 所所以大家可以关注微信公众号-GIS前沿 关注后 ...

3. 【JavaScript总结】JavaScript语法基础：DOM

   ->DOM的理解:文档对应dom树 ->有了DOM能做什么:DOM的操作 html文档做为DOM树模型,DOM树的节点就是对象.对象会触发事件来执行一些事件代码. C#中的事件是一个委托变 ...

4. DOM相关内容(课程来源:B站 后盾人)

   课程来源:B站后盾人 有关DOM的介绍 在此引用一位大佬的博客的部分内容: JS-DOM https://blog.csdn.net/weixin_45077672/article/details/1 ...

5. 获取DOM节点的几种方式

   DOM 是一个树形结构,操作一个DOM节点,实际上就是这几个操作:更新.删除.添加.遍历 在操作DOM节点之前,需要通过各种方式先拿到这个DOM节点,常用的方法有: 一.通过元素类型的方法来操作: d ...

6. java script DOM操作

   ---恢复内容开始--- 一.javascript功能: 1.进行数据运算 2.控制浏览器功能 3.控制元素的属性.样式.内容 二.javascript书写位置 1.可以写在HTML文件的任意位置,书 ...

7. jQuery和dom的相互转换

   1.将DOM对象转换成jQuery对象 $div = $(objDom); 2.将jQuery对象转换成DOM对象 objDom = $(objJqeury).get(0); 3.判断一个元素是否存在 ...

8. IE9 : DOM Exception: INVALID_CHARACTER_ERR (5)

   以下代码在IE8下运行通过,在IE9中出错: document.createElement('<iframe id="yui-history-iframe" src=&quo ...

9. dom vue 加载完 执行_前端面试题——Vue

   前言 前几天整理了一些 html + css + JavaScript 常见的面试题(https://segmentfault.com/u/youdangde_5c8b208a23f95/articl ...

最新文章

1. (转)Spring AOP的底层实现技术
2. linux eclipse java_实验一 Java开发环境的熟悉(Linux + Eclipse)
3. 求解:nhibernate2.0操作oralce提交事务时报错
4. 前端学习（1967）vue之电商管理系统电商系统之切换面板获取
5. LAMP平台－－部署Discuz论坛
6. fastdfs-02-上传与下载流程
7. YAML 学习笔记 .yml
8. Linux系统文件用户共享,Linux操作系统下的共享文件夹用户设定
9. 12012.memtester内存测试
10. 当关闭winform窗体时触发
11. Nodejs ---- 升级到指定版本
12. 码流、码率、比特率、帧速率、分辨率、 高清的区别 基础知识
13. 基于微信小程序的药店管理系统毕业设计
14. DrGraph - SVG模块之一：显示与节点选择
15. 0002计算机组成原理与体系结构02
16. arcgis属性表中的某一字段保留1位小数
17. 一年365天每天进步 5‰或1%和每天退步 5‰或1%最后的结果分别是多少
18. RLC元件上电压，电流关系
19. model.compile中metrics的参数accuracy
20. 植物大战僵尸：无冷却分析方法

热门文章

1. spss--K_means快速聚类（随笔笔记）以及和Python实现K_means聚类的比较
2. 莽荒纪计算机游戏,莽荒纪HD 电脑版
3. java开发经理面试题，灵魂拷问
4. FBX网格，材质和贴图
5. win7修复计算机无法修复工具栏,win7系统鼠标点不了下面任务栏的修复办法
6. 在项目中使用vue过滤器小结
7. 一级缓存、二级缓存、三级缓存区别是什么 详解它们的区分方法
8. 设计模式---创建型模式（工厂模式、抽象工厂模式、单例模式、建造者模式、原型模式）
9. Android app 读取xls和xlsx格式的excel文件
10. 做一名steam培训老师_Steam夏季音乐节前10名（第一部分）