DOM

最新推荐文章于 2022-06-14 17:09:32 发布

73、

最新推荐文章于 2022-06-14 17:09:32 发布

阅读量675

点赞数

分类专栏： # 前端基础文章标签： DOM模块

本文链接：https://blog.csdn.net/weixin_40318474/article/details/103544034

版权

前端基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文档对象模型（Document Object Model, DOM）是一种用于HTML和XML文档的编程接口，它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。

选择器

1、直接查找

document.getElementById('i1') 根据id获取单个元素
document.getElementsByName('n') 根据name属性获取标签列表集合
document.getElementsByTagName('div') 根据标签名获取标签集合 
document.getElementsByClassName('c1') 根据class属性获取标签集合

在这里插入图片描述

2、间接查找

var tag = document.getElementById(arg);
tag.parentElement	//父节点标签元素
tag.children	//所有子标签
tag.firstElementChild	//第一个子标签元素
tag.lastElementChild	//最后一个子标签元素
tag.nextElementSibling	//下一个兄弟标签元素
tag.previousElementSibling	//上一个兄弟标签元素

在这里插入图片描述

案例：表格中删除案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            /*边框合并*/
            border-collapse: collapse;
        }
        table th, table td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        table th {
            font-weight: bold;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>bob</td>
        <td>男</td>
        <td>
            <input type="button" value="删除" onclick="deleteRow(this);">
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>jack</td>
        <td>女</td>
        <td>
            <input type="button" value="删除" onclick="deleteRow(this);">
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>tom</td>
        <td>男</td>
        <td>
            <input type="button" value="删除" onclick="deleteRow(this);">
        </td>
    </tr>
    </tbody>
</table>
<script type="text/javascript">
    /*
    删除表格中当前行的数据
     */
    function deleteRow(self) {
        var rowTr = self.parentElement.parentElement;
        rowTr.remove();
    }
</script>
</body>
</html>

在这里插入图片描述

文本操作

innerText 仅文本
	标签对象.innerText，读取标签内容（仅文本）。
	标签对象.innerText="武"，修改标签内容（仅文本）。
outerText
innerHTML 全部内容
	标签对象.innerHTML，读取标签内容（含标签）。
	标签对象.innerText="<a href='#'>武</a>"，修改标签内容（可标签、课文本）。

在这里插入图片描述

值操作

value 
	input 	对于input系列生效，获取当前标签中的值或者改变它的值
	select 获取选中的值（除了value，还有一个selectedIndex）
	textarea 获取当前标签中的值或者改变它的值

1、文本框

在这里插入图片描述

2、下拉框

在这里插入图片描述

3、单选框

通过value可以取值。但在应用时常常是以选择形式出现，所以在使用过程中还会去判断他是否已被选中。

标签对象.checked 可以对选中状态进行读取和设置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript学习</title>
</head>
<body>
<input type="radio" name="gender" value="11"/>男
<input type="radio" name="gender" value="33"/>女
<input type="radio" name="gender" value="66"/>中
<input type="button" onclick="showGender();" value="点击获取选择"/>
<input type="button" onclick="setGender();" value="点击设置选择状态"/>
<script type="text/javascript">
    function showGender() {
        var radios = document.getElementsByName('gender');
        // 循环所有的radio标签，找到被选中的radio，获取他的value值。
        for (var i = 0; i < radios.length; i++) {
            if (radios[i].checked) {
                // 弹出选中值
                console.log(radios[i].value);
                // 选中后退出循环
                break;
            }
        }
    }
    function setGender(){
        var radios = document.getElementsByName('gender');
        // 循环所有的radio标签，找到被选中的radio，获取他的value值。
        for (var i = 0; i < radios.length; i++) {
            if (radios[i].value === "33") {
              radios[i].checked = true;
            }
        }
    }
</script>
</body>
</html>

4、复选框

通过value可以取值。但在应用时常常是以多选形式出现，所以在使用过程中还会去判断他是否已被选中。
标签对象.checked 可以对选中状态进行读取和设置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript学习</title>
</head>
<body>
<h1>爱好</h1>
<input class="hobby" type="checkbox" value="1">足球
<input class="hobby" type="checkbox" value="2">篮球
<input class="hobby" type="checkbox" value="3">乒乓球
<input type="button" onclick="showHobby();" value="点击获取选择"/>
<input type="button" onclick="setHobby();" value="点击设置选择"/>
<script type="text/javascript">
    function showHobby() {
        var valueList = [];
        var checkboxList = document.getElementsByClassName('hobby');
        for (var i = 0; i < checkboxList.length; i++) {
            if (checkboxList[i].checked) {
                // 弹出选中值
                valueList.push(checkboxList[i].value);
            }
        }
        console.log(valueList);
    }
    function setHobby() {
         var checkboxList = document.getElementsByClassName('hobby');
        for (var i = 0; i < checkboxList.length; i++) {
            if(checkboxList[i].value === '1' || checkboxList[i].value === '3') {
                checkboxList[i].checked = true;
            }else{
                checkboxList[i].checked = false;
            }
        }
    }
</script>
</body>
</html>

案例：搜索框提示信息

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div style="width: 600px; margin: 0 auto;">
            <!-- onfocus: 当标签获取焦点时，执行函数 onblur: 失去焦点，执行函数-->
            <input id="i1" οnfοcus="Focus();" οnblur="Blur();" type="text" value="请输入关键字" />
        </div>
        <script>
            function Focus(){
                var tag = document.getElementById('i1');
                var val = tag.value;
                if(val == "请输入关键字"){
                    tag.value = "";
                }
            }
            function Blur(){
                var tag = document.getElementById('i1');
                var val = tag.value;
                if(val.length == 0){
                    tag.value = "请输入关键字";
                }
            }
        </script>
    </body>
</html>

案例：表格多选、反选、取消

https://blog.csdn.net/weixin_40318474/article/details/103546263

属性操作

1、class属性

className //直接整体做操作
classList
classList.add("样式名")
classList.remove("样式名")

在这里插入图片描述

案例：模态对话框

https://blog.csdn.net/weixin_40318474/article/details/103545748

案例：后台管理左侧菜单

https://blog.csdn.net/weixin_40318474/article/details/103547638

2、attribute属性

attributes //获取所有标签的属性
setAttribute(key, value) //设置标签属性
getAttribute
removeAttribute

在这里插入图片描述

style样式操作

如果想要对样式操作的粒度更细一些，可以使用style样式操作，他比class属性对样式的操作粒度更细。

obj.style.fontSize = "16px";
obj.style.backgroundColor = "red";
obj.style.color = "blue";

// 方式一
var obj = "<input type="text" />";
xxx.insertAdjacentHTML("beforeEnd", obj);
xxx.insertAdjacentElement("afterBegin", document.createElement('p'));
// 注意：第一个参数只能是'beforeBegin'、'afterBegin'、'beforeEnd'、'afterEnd'

// 方式二
var tag = document.createElement('a');
xxx.appendChild(tag);
xxx.insertBefore(tag, xxx[1]);

示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input type="button" οnclick="addEle1();" value="+" />
        <input type="button" οnclick="addEle2();" value="+" />
        <div id="i1">
            <input type="text" />
            <hr />
        </div>
        <script>
            function addEle1(){
                // 创建一个标签
                // 将标签添加到i1里面
                var tag = "<input type='text' />";
                document.getElementById('i1').insertAdjacentHTML("beforeEnd", tag);
            }
            function addEle2(){
                // 创建一个标签
                // 将标签添加到i1里面
                var tag = document.createElement('input');
                tag.setAttribute('type', 'text');
                tag.style.fontSize= '16px';
                tag.style.color = 'red';

                var p = document.createElement('p');
                p.appendChild(tag);

                document.getElementById('i1').appendChild(p );
            }
        </script>
    </body>
</html>

提交表单

// 任何标签通过DOM都可以提交表单
document.getElementById('form').submit()

示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <form id="f1" action="http://www.baidu.com">
            <input type="text" />
            <input type="submit" value="提交" />
            <a οnclick="submitForm();">提交吧</a>
        </form>
        <script>
            function submitForm(){
                document.getElementById('f1').submit()
            }
        </script>
    </body>
</html>

其它操作

console.log		输出框
alert 			弹出框
confirm			确认框
	var v = confirm("真的要删除吗？");
	console.log(v); // 输出true or false

// URL和刷新
location.href			获取URL,也可以设置当前URL，跳转到设置的页面
location.href = "url"	重定向
location.reload()		重新加载 ==> location.href == location.herf

// 定时器
setInterval			多次定时器
clearInterval		清除多次定时器
//用法：定时器已知在执行，这两个一般都是一起用的
	var obj = setInterval(function(){
		console.log(1);
		clearInterval(obj); // 放这，只输出一次
	}, 5000);
	clearInterval(obj); // 放这，没任何输出
	
setTimeout			单次定时器
clearTimeout		清除单次定时器，当你嫌等的时间太久了就可以用这个让他停下来
//用法：定时器只执行一次，这两个一般都是分开用的
	var obj = setTimeout(function(){
		console.log("timeout")
	}, 5000); //5秒钟之后出现打印信息

setTimeout应用

类似于qq邮箱删除邮件的提示功能

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="status"></div>
        <input type="button" value="delete" οnclick="deleteEle();" />
        <script>
            function deleteEle(){
                document.getElementById('status').innerText = "已删除";
                setTimeout(function(){
                    document.getElementById('status').innerText = "";
                }, 5000);
            }
        </script>
    </body>
</html>

事件

DOM中可以为标签设置事件，给指定标签绑定事件之后，只要对应事件被处罚，就会执行对应代码。常见事件有：

onclick，单击时触发事件
ondblclick，双击触发事件
onchange，内容修改时触发事件
onfocus，获取焦点时触发事件
onblur，失去焦点触发事件
其他事件

行为、样式、结构相分离的界面

上面的内容我们已经学过了三种事件onclick onblur onfocus
先来做一个面试题，写一个行为、样式、结构相分离的界面？
分析：行为即js，样式即css，结构即html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /* 样式 */
            #i1{
                background-color: red;
                height: 400px;
                width: 300px;
            }
        </style>
    </head>
    <body>
        <!--div id="i1" οnclick="t1();"-->
        <div id="i1">
            结构
        </div>
        <script>
            //function t1(){
            //    console.log(1);
            //}
            // 行为
            var myDiv = document.getElementById("i1");
            //console.log(myDiv);
            myDiv.onclick = function(){
                console.log("sadf")
            }
        </script>
    </body>
</html>

新的事件onmouseover、onmouseout

示例：实现鼠标移到标签上面高亮显示的功能，并且把结构、行为、样式相分离。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #i1{
				border: 1px solid red;
				width: 300px;
			}
        </style>
    </head>
    <body>
        <table id="i1">
            <!--
            <tr οnmοuseοver="t1(0);" οnmοuseοut="t2(0);"><td>1</td><td>2</td><td>3</td></tr>
            <tr οnmοuseοver="t1(1);" οnmοuseοut="t2(1);"><td>1</td><td>2</td><td>3</td></tr>
            <tr οnmοuseοver="t1(2);" οnmοuseοut="t2(2);"><td>1</td><td>2</td><td>3</td></tr>
            -->
            <tr><td>1</td><td>2</td><td>3</td></tr>
            <tr><td>1</td><td>2</td><td>3</td></tr>
            <tr><td>1</td><td>2</td><td>3</td></tr>
        </table>
        <script>
            //function t1(n){
            //    var myTrs = document.getElementsByTagName("tr")[n];
            //    //console.log(myTrs);
            //    myTrs.style.backgroundColor = "red";
            //}
            //function t2(n){
            //    var myTrs = document.getElementsByTagName("tr")[n];
            //    //console.log(myTrs);
            //    myTrs.style.backgroundColor = "";
            //}
            var myTrs = document.getElementsByTagName("tr");
            var len = myTrs.length;
            for(var i=0; i<len; i++){
                myTrs[i].onmouseover = function(){
                	//这里为什么不能用myTrs[i]，而只能用this呢？
                	//答：i的作用域导致的
                    this.style.backgroundColor = "red"; // 谁调用这个函数，this就指向谁
                }
                myTrs[i].onmouseout = function(){
                    this.style.backgroundColor = ""; // 谁调用这个函数，this就指向谁
                }
            }
        </script>
    </body>
</html>

在这里插入图片描述

DOM绑定事件的第三种方式

例子:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            // 样式
            #i1{
                background-color: red;
                height: 400px;
                width: 300px;
            }
        </style>
    </head>
    <body>
        <!--div id="i1" οnclick="t1();"-->
        <div id="i1">
            结构
        </div>
        <script>
            var myDiv = document.getElementById("i1");
            // 点击一次div标签，同时打印两条信息，可以拿来做一次点击，出现两个弹窗的功能
            myDiv.addEventListener('click', function(){console.log('aaa')}, false);
            myDiv.addEventListener('click', function(){console.log('bbb')}, false);
        </script>
    </body>
</html>

在这里插入图片描述
示例如下，面试题：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #main{
                background-color: red;
                height: 400px;
                width: 300px;
            }
            #content{
                background-color: pink;
                height: 200px;
                width: 150px;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div id="content"></div>
        </div>
        <script>
            var myMain = document.getElementById("main");
            var myContent = document.getElementById("content");
            // 点击一次div标签，同时打印两条信息，可以拿来做一次点击，出现两个弹窗的功能
            myMain.addEventListener('click', function(){console.log('main')}, false);
            myContent.addEventListener('click', function(){console.log('content')}, false);
        </script>
    </body>
</html>

上面的代码，第三个参数为false时，点击粉色区域，先打印content，在打印mian，为true时，刚好反过来
在这里插入图片描述

小结：
	绑定事件三种方式：
		a.直接标签绑定 onclick='xxx()'
			<input type="button" onclick="ClivkOn(this)" />
			function ClickOn(self){
				//self 当前点击的标签
			}
		b.先获取Dpm对象，然后进行绑定
			<input id="i1" type="button" />
			document.getElementById('xx').onclick = function(){
				//this 当前点击的标签
			}
		c.绑定时间
			var myDiv = document.getElementById("i1");
            // 点击一次div标签，同时打印两条信息，可以拿来做一次点击，出现两个弹窗的功能
            myDiv.addEventListener('click', function(){console.log('aaa')}, false);
            myDiv.addEventListener('click', function(){console.log('bbb')}, false);