js之DOM操作

本文主要是介绍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操作的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Javascript

js之DOM操作

js之DOM操作

DOM操作之查找标签

节点操作

获取值操作

class操作

样式操作

事件(重点)

内置参数this

事件实例:

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯