Java后端需要掌握的JS-------DOM

最新推荐文章于 2023-10-17 22:22:09 发布

我是日中天

最新推荐文章于 2023-10-17 22:22:09 发布

阅读量368

点赞数 4

文章标签： javascript

本文链接：https://blog.csdn.net/qq_39594037/article/details/107471532

版权

Java后端需要掌握的JS-------DOM

一、什么是DOM

它的全称是Document Object Model文档对象模型。

作用：将标记语言文档的各个部分，封装成对象，通过这些对象对标记语言文档进行操作（CRUD）

二、DOM的常用对象

Document:文档对象

Element:元素对象

Attribute:属性对象

Text:文本对象

Node:节点对象

Comment:注释对象

上面加黑的是常用的几个对象。

三、常用对象的使用

1.Document文档对象

常用的方法如下：

获取Element对象

<input type="button" id="btn">
<h2>我是h2</h2>
<div class="div1">我是div</div>
<input type="button" name="name" value="按钮">
<script>
    var btn = document.getElementById("btn");//根据id属性值获取元素对象
    
    var h2 = document.getElementsByTagName("h2");//根据元素名称获取元素对象们。返回值是一个数组
    
    var div1 = document.getElementsByClassName("div1");//根据Class属性值获取元素对象们。返回值是一个数组
    
    var name = document.getElementsByName("name");//根据name属性值获取元素对象们。返回值是一个数组
</script>

主要就是以上四种方法，其中第一个用的最多。

创建其余的DOM对象

createAttribute(name)

createComment()
createElement()
createTextNode()

用的比较多的就是上面的几个了，这里就不举例子了。

2.Element元素对象

常用的方法如下：

1. removeAttribute()：删除属性
2. setAttribute()：设置属性

3.Node节点对象

1. 这个对象很重要，经常使用，下面的几个方法是常用的方法：

appendChild()：向节点的子节点列表的结尾添加新的子节点。

removeChild() ：删除（并返回）当前节点的指定子节点。

replaceChild()：用新节点替换一个子节点。

使用上面的三个方法可以对dom树进行CRUD

2.很重要的一个属性

parentNode:返回节点的父节点（俗称找爸爸）

四、其他常用

1.标签体的设置和获取：innerHTML

这个在今后的开发中常常用的到，举个简单的例子，你就知道它的功能强大了。

实现动态表格案例：

普通版：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">

</div>


    <table id="table">
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>

        <tr>
            <td>1</td>
            <td>小明</td>
            <td>男</td>
            <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
        </tr>
    </table>



<script>
    
    //1.获取btn
    var btn_add = document.getElementById("btn_add");
    //2.绑定单击事件
    btn_add.onclick = function(){
        //获取每一个输入框内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        //获取表格
        var table = document.getElementById("table");
        
        //创建tr
        var tr = document.createElement("tr");
        //创建td
        var td_id = document.createElement("td");
        var text_id = document.createTextNode(id);
        td_id.appendChild(text_id);
        tr.appendChild(td_id);

        var td_name = document.createElement("td");
        var text_name = document.createTextNode(name);
        td_name.appendChild(text_name);
        tr.appendChild(td_name);

        var td_gender = document.createElement("td");
        var text_gender = document.createTextNode(gender);
        td_gender.appendChild(text_gender);
        tr.appendChild(td_gender);

        var td_option = document.createElement("td");

        var a = document.createElement("a");
        a.setAttribute("href","javascript:void(0);");
        a.setAttribute("onclick","delTr(this)");
        var text_a = document.createTextNode("删除");
        a.appendChild(text_a);
        td_option.appendChild(a);
        tr.appendChild(td_option);

        table.appendChild(tr);

    }

    function delTr(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }

</script>
</body>
</html>

上面我们使用CRUD来实现的，代码很复杂，并且很容易出错，再看下面的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">

</div>


<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td>1</td>
        <td>小明</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
</table>

<script>
   //使用innerHTML添加
    document.getElementById("btn_add").onclick = function() {
        //2.获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        //获取table
        var table = document.getElementsByTagName("table")[0];

        //追加一行
        table.innerHTML += "<tr>\n" +
            "        <td>"+id+"</td>\n" +
            "        <td>"+name+"</td>\n" +
            "        <td>"+gender+"</td>\n" +
            "        <td><a href=\"javascript:void(0);\" οnclick=\"delTr(this);\" >删除</a></td>\n" +
            "    </tr>";
    }


    //删除方法
    function delTr(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;

        table.removeChild(tr);
    }


</script>

</body>
</html>

显而易见，开发中会选择后者，关于innerHTML的操作还有好多用处，后面的博客里还会接收到。

五、事件

常见的事件：

	1. 点击事件：
		1. onclick：单击事件
		2. ondblclick：双击事件
	2. 焦点事件
		1. onblur：失去焦点
		2. onfocus:元素获得焦点。

	3. 加载事件：
		1. onload：一张页面或一幅图像完成加载。

	4. 鼠标事件：
		1. onmousedown	鼠标按钮被按下。
		2. onmouseup	鼠标按键被松开。
		3. onmousemove	鼠标被移动。
		4. onmouseover	鼠标移到某元素之上。
		5. onmouseout	鼠标从某元素移开。
	5. 键盘事件：
		1. onkeydown	某个键盘按键被按下。	
		2. onkeyup		某个键盘按键被松开。
		3. onkeypress	某个键盘按键被按下并松开。
	6. 选择和改变
		1. onchange	域的内容被改变。
		2. onselect	文本被选中。
	7. 表单事件：
		1. onsubmit	确认按钮被点击。
		2. onreset	重置按钮被点击。

我是日中天

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Java后端需要掌握的JS-------DOM

Java后端需要掌握的JS-------DOM一、什么是DOM 它的全称是Document Object Model文档对象模型。作用：将标记语言文档的各个部分，封装成对象，通过这些对象对标记语言文档进行操作（CRUD）二、DOM的常用对象Document:文档对象Element:元素对象Attribute:属性对象Text:文本对象Node:节点对象Comment:注释对象上面加黑的是常用的几个对象。三、常用对象的使用1.Document文档对象常用的方法如下：
复制链接

扫一扫