Javascript

JS之DOM操作与事件练习

本文主要是介绍JS之DOM操作与事件练习，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

今日内容概要

  • DOM操作
  • DOM操作之查找标签
  • DOM操作之操作标签

内容详细

1.DOM操作

1. DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法

2. 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

3. HTML DOM 模型被构造为对象的树

# DOM标准规定HTML文档中的每个成分都是一个节点(node)：
	文档节点(document对象)：代表整个文档
	元素节点(element 对象)：代表一个元素（标签）
	文本节点(text对象)：代表元素（标签）中的文本
	属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
	注释是注释节点(comment对象)

image

2.DOM操作之查找标签

# 1.直接查找
	document.getElementById           根据ID获取一个标签
	document.getElementsByClassName   根据class属性获取
	document.getElementsByTagName     根据标签名获取标签合集
	"""
	如果我们的js代码需要页面上某个标签加载完毕
	那么该js代码应该写在body内部最下方或者引入外部js文件
	
	p.c$*3 一键写出三个类标签
	<p class="c1"></p>
	<p class="c2"></p>
	<p class="c3"></p>
	
	p#d$*3 一键写出三个id标签
	<p id="d1"></p>
	<p id="d2"></p>
	<p id="d3"></p>
	"""
    
# 2.间接查找
	parentElement            父节点标签元素
	children                 所有子标签
	firstElementChild        第一个子标签元素
	lastElementChild         最后一个子标签元素
	nextElementSibling       下一个兄弟标签元素
	previousElementSibling   上一个兄弟标签元素
    
    
    
# HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1"></div>
<div id="d2">
    <p id="d4">
        <span></span>
    </p>
    <span id="d5"></span>
    <a id="d6"></a>
</div>
<div id="d3"></div>
</body>
</html>

image

3.节点操作

# 创建节点
	语法：createElement(标签名)

# 示例：
var aEle = document.createElement('a');  # 创建标签
aEle.setAttribute('href','https://www.mmzztt.com/')  # 设置属性
aEle.innerText = '好不好看?'  # 设置内容文本
document.getElementsByTagName('p')[0].appendChild(aEle)  # 动态添加
"""一定要明确当前手上是什么对象"""
imgEle.getAttribute('title')  # 获取标签属性


# 删除节点：
	语法：获得要删除的元素，通过父元素调用该方法删除
	somenode.removeChild(要删除的节点);

# 替换节点：
	语法：somenode.replaceChild(newnode, 某个节点);
    
# 属性节点
	获取文本节点的值：
	var divEle = document.getElementById("d1")
	divEle.innerText
	divEle.innerHTML
    
	设置文本节点的值：
	var divEle = document.getElementById("d1")
	divEle.innerText="1"
	divEle.innerHTML="<p>2</p>"
"""    
innerText
	不加赋值符号是获取内部文本
	加了赋值符号是设置内置文本
	# 不可以识别HTML标签
	
innerHTML
	不加赋值符号是获取内部标签+文本
	加了赋值符号是设置内置标签+文本
	# 可以识别HTML标签
"""
   
# attribute操作
	变量名.getAttribute("属性")
	获取属性值
    
    
    
# HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>今日不努力 明日变垃圾
        <a href="#">只有靠自己</a>
        <span>哈哈哈</span>
    </p>
</body>
</html>

image

4.获取值操作

# 普通的文本数据获取    
	标签对象.value
    
# 特殊的文件数据获取    
	标签对象.value  '''仅仅获取一个文件地址而已'''    
	标签对象.files[0]  '''获取单个文件数据'''    
	标签对象.files  '''获取所有文件数据'''

5.class操作

# class的操作
	classList  查看所有的类
	className  获取所有样式类名(字符串)
	classList.remove(cls)  删除指定类
	classList.add(cls)  添加类
	classList.contains(cls)  存在返回true，否则返回false
	classList.toggle(cls)  存在就删除，否则添加


# 样式操作
	标签对象.style.属性名 = 属性值

    
# HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            width: 400px;
            height: 400px;
            border-radius: 50%;
        }
        .c2 {
            background-color: red;
        }
        .c3 {
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <p>恍恍惚惚一个上午又过去了 是否有所收货</p>
    <div id="d1" class="c1 c2 c3"></div>
</body>
</html>

image

image

6.事件

"""就是给HTML元素添加自定义的功能"""

# 绑定事件的方式1(不常用)
	<button onclick="func()">点我</button>
	<script>
		function func() {
		alert(123)
		}
	</script>


# 绑定事件的方式2
	<button id="d1">选我</button>
	<script>
		// 1.先查找标签
		var btnEle = document.getElementById('d1')
		// 2.绑定事件
		btnEle.onclick = function () {
			alert(456)
		}
	</script>
    
    
    
# HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--    <button onclick="func()">点我</button>-->
    <button id="d1">选我</button>
    <script>
        // function func() {
        //     alert(123)
        // }

        // 1.先查找标签
        var btnEle = document.getElementById('d1')
        // 2.绑定事件
        btnEle.onclick = function () {
            alert(456)
        }
    </script>
</body>
</html>

7.内置参数this

# this指代的就是当前被操作对象本身
	// 在事件的函数体代码内部使用
	var btnEle = document.getElementById('d1')
	btnEle.onclick = function () {
		alert(456)
		console.log(this)
	}

8.事件练习

onclick		单击事件
onfocus		聚焦事件
onblur		失去焦点事件
onchange	文本域变化事件
onload		等待...加载完毕后执行的事件
"""如果某个标签已经有事件了 那么绑定会冲突"""

# 定时器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="d2">
    <button id="d1">出来！</button>
    <button id="d3">站住！</button>

    <script>
        // 1.先查找按钮标签
        var btnEle = document.getElementById('d1')
        var btn1Ele = document.getElementById('d3')
        // 1.1定义一个存储定时器的全局变量
        var t = null
        // 1.2单独编写一个展示时间的函数
        function showTime(){
            // 1.3获取当前时间
            var cTime = new Date().toLocaleString()
            // 1.4将时间添加到input文本框中
            var iEle = document.getElementById('d2')
            iEle.value = cTime
        }
        // 2.绑定点击事件
        btnEle.onclick = function () {
            if(!t){
                t = setInterval(showTime,1000)
            }
        }
        // 3.绑定点击事件
        btn1Ele.onclick = function () {
            clearInterval(t)
            // 把t清空
            t = null
        }
    </script>
</body>
</html>



# 数据校验
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <p>username:
            <input type="text" id="d1">
            <span id="username" style="color: red"></span>
        </p>
        <p>password:
            <input type="text" id="d2">
            <span id="pwd" style="color: red"></span>
        </p>
        <button id="d3">登录</button>
    </div>

    <script>
        // 1.查找按钮标签
        var btnEle = document.getElementById('d3')
        // 2.绑定事件
        btnEle.onclick = function () {
            // 3.获取input数据
            var userNameEle = document.getElementById('d1').value
            var passWordEle = document.getElementById('d2').value
            // 4.判断数据是否合法
            if (!userNameEle){
                var sp1Ele = document.getElementById('username')
                sp1Ele.innerText = '用户名不能为空'
            }
            if (!passWordEle){
                var sp2Ele = document.getElementById('pwd')
                sp2Ele.innerText = '密码不能为空'
            }
        }
    </script>
</body>
</html>



# 省市联动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<p>省:
    <select name="" id="d1"></select>
</p>
<p>区:
    <select name="" id="d2"></select>
</p>

<script>
    var data = {"河北": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"], "安徽":["合肥","芜湖"]};
    var se1Ele = document.getElementById('d1')
    var se2Ele = document.getElementById('d2')
    for (let pro in data){
        var opEle = document.createElement('option')
        opEle.innerText = pro
        opEle.value = pro
        se1Ele.appendChild(opEle)
    }
    se1Ele.onchange = function () {
        var cutpro = this.value
        cityList = data[cutpro]
        se2Ele.innerHTML = ''
        for (let i=0;i<cityList.length;i++){
            var opEle = document.createElement('option')
            opEle.innerText = cityList[i]
            opEle.value = cityList[i]
            se2Ele.appendChild(opEle)
        }
    }
</script>
</body>
</html>

image

image

image

这篇关于JS之DOM操作与事件练习的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航