JS之DOM操作与事件练习

2022-02-14 21:33:55 阅读：112 来源： 互联网

标签：function DOM 标签练习 JS getElementById var document 节点

今日内容概要

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对象)

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>

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>

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>

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>

标签：function,DOM,标签,练习,JS,getElementById,var,document,节点
来源： https://www.cnblogs.com/jgx0/p/15894183.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9