JavaScript之DOM操作-优快云博客

本文介绍了 HTML DOM 的基本概念及如何使用 DOM 对 HTML 文档进行操作的方法，包括获取元素节点、属性节点的操作，并通过实例展示了如何实现表格中复选框的选择控制及创建模态框。

什么是HTML DOM？

1.HTML Document Object Model（文档对象模型）

2.HTML DOM定义了访问和操作HTML的标准方法

3.HTML DOM把HTML文档呈现为带有元素，属性和文本的树结构（树节点）

一。获取元素节点　　（当获取多个元素时，存为数组）

1.直接查找：

    <div class="c1">
        <div id="i1">
            <a href="" class="c2-1" name="XXX"></a>
            <a href="" class="c2-2" name="XXX"></a>
        </div>
    </div>

document.getElementById(“i1”) 　　　　　　　  id　
document.getElementsByTagName(“a”)　　　　   标签
document.getElementsByName(“XXX”)　　　　　   name
document.getElementsByClassName(“c2-1”)　　  class

2.间接查找

    <div>
        <div id="i1">
            <a href="" class="c1-1">aaaaa</a>
            <a href="" class="c1-2">bbbbb</a>
        </div>
    </div>
    <div>
        <div id="i2">
            <a href="" class="c2-1">ccccc</a>
            <a href="" class="c2-2">ddddd</a>
        </div>
    </div>

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

二。属性节点的操作

1.对节点的类进行操作：　　12.6

tag.className => 直接整体做操作
tag.classList.add('样式名')   添加指定样式
tag.classList.remove('样式名')   删除指定样式

2.获取文本节点的值：　　

	innerText    innerHtml    
	value获取当前选中的value值
		1.input   value获取当前标签中的值
		2.select （selectedIndex）
		3.textarea  
	innerHTML 给节点添加html代码：
		该方法不是w3c的标准，但是主流浏览器支持	
		tag.innerHTML = “<p>要显示内容</p>”;

=====================================================================　　

表格案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<input type="button" value="全选" onclick="selectALL();"/>
<input type="button" value="取消" onclick="cancelALL();"/>
<input type="button" value="反选" onclick="ReverseALL();"/>
<table border="1">
    <thead>
    <tr>
        <th>操作</th>
        <th>IP</th>
        <th>端口</th>
    </tr>
    <tbody id="info">
    <tr>
        <td><input type="checkbox"/></td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td> </td>
        <td> </td>
    </tr>
    </tbody>
    </thead></table>
</body>

<script>
    function selectALL() {
        var myTodby = document.getElementById("info");
        var myTrs = myTodby.children;
        for(var i=0;i<myTrs.length;i++){
            var myInput=myTrs[i].children[0].children[0];
            myInput.checked = true;
        }
    }
        function cancelALL() {
            var myTodby = document.getElementById("info");
            var myTrs = myTodby.children;
            for (var i = 0; i < myTrs.length; i++) {
                var myInput = myTrs[i].children[0].children[0];
                myInput.checked = false;
            }
        }
        function ReverseALL() {
            var myTodby = document.getElementById("info");
            var myTrs = myTodby.children;
            for (var i = 0; i < myTrs.length; i++) {
                var myInput = myTrs[i].children[0].children[0];
                if(myInput.checked){
                    myInput.checked = false;
                }else {
                    myInput.checked = true;
                }
            }
        }
</script>

</html>

=====================================================================

模态框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            position: fixed;
            top:0;
            left: 0;
            right: 0;
            bottom:0;
            background-color:black;
            opacity: 0.6;
        }
        .info{
            position: fixed;
            top: 50px;
            left: 400px;
            right: 400px;
            background-color: white;
            height: 100px;
            width: 200px;
        }
        .hide{
            display: none;
        }
        .show{
            display: block;
        }
    </style>
</head>
<body>
    <div>
        <input type="button" value="点击" onclick="showModel()">
    </div>
    <!--遮罩层-->
    <div class="one hide"></div>

    <div class="info hide">
        <p>
            <input type="text"/>
            <input type="text"/>
            <input type="button" value="确定">
            <input type="button" value="取消" onclick="hideModel()">
        </p>
    </div>
</body>
    <script>
        function showModel() {
            var myone = document.getElementsByClassName("one")[0];
            var info = document.getElementsByClassName("info")[0];
            myone.classList.remove("hide");
            info.classList.remove("hide");
        }
        function hideModel() {
            var myone = document.getElementsByClassName("one")[0];
            var info = document.getElementsByClassName("info")[0];
            myone.classList.add("hide");
            info.classList.add("hide");
        }
    </script>
</html>

转载于:https://www.cnblogs.com/yizhixiaowenzi/p/6440820.html