js之DOM操作
2022/2/14 23:43:24
本文主要是介绍js之DOM操作，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
js之DOM操作
DOM 是 Document Object Model(文档对象模型)的缩写。下面是MDN对DOM的解释：
文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。 DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。
上图就是为了表示通过DOM树可以通过一个标签找到跟他有关系的任何一个标签
DOM作用：
就是为了操作HTML中的元素，使得网页被下载到浏览器后改变网页内容成为可能
DOM操作之查找标签
准备工作:
<div class="d1">d1
<div id="d2">d2
<p id="p1">p1</p>
<span id="s1">span1</span>
</div>
</div>
前缀关键字：document
基本查找用法：
根据ID获取一个标签：document.getElementById('id')
根据class属性获取：document.getElementsByClassName('class')
根据标签名获取标签合集：document.getElementsByTagName('标签名')
注意:涉及到DOM操作的JS代码应该放在文档的哪个位置。
# 我们看上图出现的现象，在通过DOM操作查找标签的时候，并没有查找到。 原因：这是因为在html代码体中，执行顺序是从上到下的，所以先执行的为script标签中的代码，这时查找的话，系统还没有找到下面的id='d2'的标签，认为就没有，所以就返回为null 解决：所以我们在写js代码时需要注意： 如果我们的js代码需要页面上某个标签加载完毕，那么该js代码应该写在body内部最下方或者引入外部js文件。
补充:
1、可通过变量名来接收标签查找的结果，通常以后缀为Ele为结束字符来命名。
eg： var divEle = document.getElementsByTagName('div');
2、在通过类属性或标签名查找标签时返回结果为一个数组,可直接通过索引的方式定义所需要的标签
eg：var pEle = document.getElementsByTagName('p')[0]; // 找到索引为0的p标签
核心查找用法:
parentElement 父节点标签元素 children 所有子标签 firstElementChild 第一个子标签元素 lastElementChild 最后一个子标签元素 nextElementSibling 下一个兄弟标签元素 previousElementSibling 上一个兄弟标签元素
用法实例：
var div1Ele = document.getElementsByClassName('d1')[0]; // 通过class找到第一个div标签
var div2Ele = document.getElementById('d2'); // 通过id找到第二个div标签
var pEle = document.getElementsByTagName('p')[0]; // 通过标签名找到p标签
节点操作
// js是可以动态改变html的文档内容的，但只是动态修改，未保存。
// 创建标签
关键字：createElement
eg ： var aEle = document.createElement('a'); // 创建一个a标签
// 添加属性
关键字：setAttribute // 如果是默认属性的话可直接通过(.)的方式添加
eg ：aEle = setAttribute('href','https://www.mmzztt.com/')
//获取属性
关键字：getAttribute
eg ：aEle.getAttribute('href') // 获取a标签的href属性
// 插入文本
关键字：innerText
eg ：aEle.innerText = '点我有你好看';
// 动态添加：(添加到指定标签后)
关键字：appendchild
eg ：document.getElementsByTagName('p')[0].appendChild(aEle) // 添加在p标签后
补充:
innerText
不加赋值符号是获取内部文本
加了赋值符号是设置内置文本
// 不可以识别HTML标签
innerHTML
不加赋值符号是获取内部标签+文本
加了赋值符号是设置内置标签+文本
// 可以识别HTML标签
获取值操作
// 普通文数据获取 格式：标签对象.value // 特殊文件数据获取 标签对象.value // 仅仅获取一个文件地址而已 获取真正的文件对象格式：标签对象.files[0] // 获取单个文件数据 标签对象.files // 获取多个文件数据
实例：
准备工作：
<form action="">
<p>username:
<input type="text" id="d1">
</p>
<p>files:
<input type="file" id="d2" multiple>
</p>
</form>
class操作
准备工作：
// html:
<body>
<div id='d1' class="c1 c2 c3"></div>
</body>
// css:
<style>
.c1 {
width: 200px;
height: 200px;
border-radius: 50%;
}
.c2 {
background-color: darkgray;
}
.c3 {
background-color: yellow;
}
</style>
classList 查看所有的类 classList.remove(cls) 删除指定类 classList.add(cls) 添加类 classList.contains(cls) 存在返回true，否则返回false classList.toggle(cls) 存在就删除，否则添加
实例：
// 删除c3类
divEle.classList.remove('c3'); // 颜色由黄色变为灰色 (模拟灯泡)
// 添加c3类
divEle.classList.add('c3'); // 颜色再次变为了黄色
divEle.classList.contains('c3');
true
divEle.classList.contains('c4');
false
divEle.classList.toggle('c3');
样式操作
格式：标签对象.style.属性名='属性值'
1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：
obj.style.margin obj.style.width obj.style.left obj.style.position
2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：
obj.style.marginTop obj.style.borderLeftWidth obj.style.zIndex obj.style.fontFamily
事件(重点)
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
常用事件：
onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 // 练习：输入框 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onselect 在文本框中的文本被选中时发生。 onsubmit 确认按钮被点击，使用的对象是form。
实例：
<body>
<button onclick="func()">点我1111</button>
<button id="d1">点我2222</button>
<script>
// 方式一:
function func(){
alert('方式一弹')
}
// 方式二(推荐):
// 查找标签
var btnEle = document.getElementById('d1')
// 绑定事件
btnEle.ondblclick = function (){
alert('方式二弹')
}
</script>
</body>
内置参数this
// this指代的就是当前被操作对象本身
在事件的函数体代码内部使用
btnEle.onclick = function () {
alert(456)
console.log(this)
}
也可以直接使用this方法去操作标签：
eg：
btnEle.onclick = function () {
alert(456)
console.log(this)
this.innerText('点我3333')
}
事件实例:
实例一:动态时间
点击查看代码
需求：创建一个开始和暂停按钮，实现一个动态时间，点击暂停暂停时间，点击开始继续动态运作。
代码块：
<body>
<input type="text" id="i1">
<button id = 't1'>开始</button>
<button id = 't2'>暂停</button>
<script>
var btnEle = document.getElementById('t1') // 查询标签开始按钮
var btn2Ele = document.getElementById('t2') // 查询标签暂停按钮
var t = null // 定义全局变量t
function showtime(){ // 定义展示时间的函数
var time = new Date().toLocaleString() // 定义新的时间对象并格式化展示
var inputEle = document.getElementById('i1') //潮汛标签inout框
inputEle.value = time // 将时间对象添加给value属性
}
btnEle.onclick = function (){ // 定义事件：单击开始按钮事件
if(!t){ // 判断是否已经创建了定时任务(如果这里不判段的话，连续点击开始就无法暂停)
t = setInterval(showtime,1000) // 创建定时任务(每一秒执行一次showtime函数)
}
}
btn2Ele.onclick = function (){ // 定义事件：单击暂停按钮事件
clearInterval(t) // 清除定时任务
t = null // 重置全局变量(不重置的话再次点击开始按钮是无法执行的，定时任务判断为flase)
}
</script>
</body>
示例二：校验用户名密码
点击查看代码
需求：在输入用户名和密码为空时，会提示不能为空。
<body>
<p>username:
<input type="text" id="i1">
<span id="p1"></span>
</p>
<p>password:
<input type="password" id="i2">
<span id="p2"></span>
</p>
<button id="b1">登录</button>
<script>
var i1ELe = document.getElementById('i1') // 查询标签input用户名
var i2Ele = document.getElementById('i2') // 查询标签input密码
var butEle = document.getElementById('b1') // 查询标签button登录按钮
var span1Ele = document.getElementById('p1') // 提示信息span1
var span2Ele = document.getElementById('p2') // 提示信息span2
butEle.onclick = function (){ // 创建事件：单击按钮事件
if(i1ELe.value===''){ // 如果input用户名框数据为空
span1Ele.innerText = '输入账号不能为空' // span1标签添加文本
span1Ele.style.color = 'red' // 添加文本样式：字体颜色
span1Ele.style.fontSize = '12px' // 字体大小
}
if(i2Ele.value===''){
span2Ele.innerText = '输入密码不能为空' // span2标签提示
span2Ele.style.color = 'red'
span2Ele.style.fontSize = '12px'
}
}
i1ELe.onfocus = function (){ // input1创建事件：聚焦事件
span1Ele.innerText = '' // span1标签文本数据改为空
}
i2Ele.onfocus = function (){ // input2创建事件：聚焦事件
span2Ele.innerText = '' // span2标签文本数据改为空
}
</script>
</body>
这篇关于js之DOM操作的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-16Vue3资料：新手入门必读教程
- 2024-11-16Vue3资料：新手入门全面指南
- 2024-11-16Vue资料：新手入门完全指南
- 2024-11-16Vue项目实战：新手入门指南
- 2024-11-16React Hooks之useEffect案例详解
- 2024-11-16useRef案例详解：React中的useRef使用教程
- 2024-11-16React Hooks之useState案例详解
- 2024-11-16Vue入门指南：从零开始搭建第一个Vue项目
- 2024-11-16Vue3学习：新手入门教程与实践指南
- 2024-11-16Vue3学习：从入门到初级实战教程
