1、HTML DOM 简介

HTML DOM 树
在这里插入图片描述

什么是 XML DOM？

XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。

什么是 HTML DOM？

HTML DOM 是：

HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

2、HTML DOM 节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

3、HTML DOM 方法

方法是我们可以在节点（HTML 元素）上执行的动作。
一些常用的 HTML DOM 方法：

getElementById(id) ------ 获取带有指定 id 的节点（元素）
appendChild(node) ------ 插入新的子节点（元素）
removeChild(node) ------ 删除子节点（元素）

一些常用的 HTML DOM 属性：

innerHTML -------- 节点（元素）的文本值
parentNode ------- 节点（元素）的父节点
childNodes -------- 节点（元素）的子节点
attributes ----------- 节点（元素）的属性节点

一些 DOM 对象方法

getElementById()--------------------返回带有指定 ID 的元素。
getElementsByTagName()--------返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()-----返回包含带有指定类名的所有元素的节点列表。

4、HTML DOM 属性

innerHTML 属性：获取元素内容的最简单方法是使用 innerHTML 属性。

innerHTML 属性对于获取或替换 HTML 元素的内容很有用。
nodeName 属性：nodeName 属性规定节点的名称。

nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document

注释：nodeName 始终包含 HTML 元素的大写字母标签名。

nodeValue 属性：nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

nodeType 属性：nodeType 属性返回节点的类型。nodeType 是只读的。
元素类型 NodeType
元素--------------------------1
属性--------------------------2
文本 -------------------------3
注释--------------------------8
文档 -------------------------9

<body>
    <!-- 注释说明 -->
    <h1>JavaScript语言中HTML DOM</h1>
    <h3 id ="hid">我们重点学习HTML DOM的什么操作：</h3>
    <ul id="uid">
        <li>如何改变 HTML 元素的内容</li>
        <li>如何改变 HTML 元素的样式（CSS）</li>
        <li>如何对 HTML DOM 事件作出反应</li>
        <li>如何添加和删除 HTML 元素</li>
    </ul>
</body>
<script>
   //获取h3元素节点对象
   var hid = document.getElementById("hid");
   //输出当前节点的名字、值和类型
   console.log(hid.nodeName); //H3
   console.log(hid.nodeValue); //null
   console.log(hid.nodeType);  //1
   //获取当前节点对象的第一个子节点的值和类型
   console.log(hid.childNodes[0].nodeValue); //就是内容
   console.log(hid.childNodes[0].nodeType); //3
   
</script>

5、HTML DOM Document 对象

5.1、a链接操作

<body>
    <h1>JavaScript语言中HTML DOM 操作</h1>
    <ul>
        <li><a href="https://www.baidu.com">百度</a></li>
        <li><a href="https://www.163.com">网易</a></li>
        <li><a href="https://www.sina.com">新浪</a></li>
        <li><a href="https://www.qq.com">腾讯</a></li>
    </ul>
</body>
<script>
    //获取当前页面中的所有链接
    //var alist = document.getElementsByTagName("a");
    var alist = document.links;
    for(var i=0; i<alist.length; i++){
    
    
        console.log(alist[i].href,alist[i].innerHTML);
        alist[i].title = alist[i].innerHTML+"的链接";
    }
</script>

在这里插入图片描述

5.2、图片延迟加载

<body>
    <h1>JavaScript语言中HTML DOM 操作--图片延迟加载</h1>
    <img src="./images/HLL-11_xuandong.gif" res="./images/11.jpg"/>
    <img src="./images/HLL-11_xuandong.gif" res="./images/22.jpg"/>
    <img src="./images/HLL-11_xuandong.gif" res="./images/33.jpg"/>
    <img src="./images/HLL-11_xuandong.gif" res="./images/44.jpg"/>
</body>
<script>
    setTimeout(function(){
    
    
        //获取网页中所有的图片
        var mlist = document.images;
        //遍历
        for(var i=0; i<mlist.length; i++){
    
    
            mlist[i].src = mlist[i].getAttribute("res");
            mlist[i].width = 100;
        }
    },3000);
    
</script>

在这里插入图片描述

5.3、form表单操作

在这里插入图片描述

<body>
    <h1>JavaScript语言中HTML DOM 操作</h1>
    <form></form>
    <form action="js01.html" method="post" name="myform">
        账号：<input type="text" name="uname" value="wangwu7"/><br/>
    </form>
    <button onclick="doSubmit()">点击提交</button>
</body>
<script>
    console.log(document.forms.length);
    //获取上面form表单中账号信息
    console.log(document.forms[1].uname.value); //*
    console.log(document.forms.item(1).uname.value);
    console.log(document.myform.uname.value); //*
    console.log(document['myform'].uname.value);
    console.log(document.forms.myform.uname.value);
    console.log(document.forms['myform'].uname.value);

    function doSubmit(){
    
    
        document.myform.action = "js02.html";
        //document.myform.method = "get";
        document.myform.submit(); //获取form表单并执行提交
    }
</script>

5.4、input多选框操作

在这里插入图片描述

<body>
    <h1>JavaScript语言中HTML DOM 操作</h1>
    <ul>
        <li><input type="checkbox" name="likes[]" value="篮球"/>篮球</li>
        <li><input type="checkbox" name="likes[]" value="足球"/>足球</li>
        <li><input type="checkbox" name="likes[]" value="羽毛球"/>羽毛球</li>
        <li><input type="checkbox" name="likes[]" value="乒乓球"/>乒乓球</li>
        <li><input type="checkbox" name="likes[]" value="棒球"/>棒球</li>
    </ul>
    <button onclick="dofun()">获取</button>
</body>
<script>
    function dofun(){
    
    
        //获取网页中所有input标签
        var list = document.getElementsByTagName("input"); 
        var res = new Array();
        //遍历
        for(var i=0; i<list.length; i++){
    
    
            //判断是否是多选框并且已选中
            if(list[i].type == "checkbox" && list[i].checked){
    
    
                res.push(list[i].value);
            }
        }
        alert(res);
    }
</script>

5.5、select操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript中的DOM</title>
    <style>
        select{
    
    width:100px;height:200px;border:1px solid #ddd;float:left;}
        div{
    
    width:100px;height:200px;float:left;text-align:center;padding-top:50px;}
    </style>
</head>
<body>
    <h1>JavaScript语言中HTML DOM 操作-select对象</h1>
    <select id="sid1" size="10" multiple>
        <option value="0">邓丽君</option>
        <option value="1">张国荣</option>
        <option value="2">梅艳芳</option>
        <option value="3">黄家驹</option>
        <option value="4">迈克尔.杰克逊</option>
        <option value="5">姚贝娜</option>
        <option value="6">张雨生</option>
    </select>
    <div>
        <button onclick="doMove('sid1','sid2')">>></button>
        <br/><br/><br/><br/>
        <button onclick="doMove('sid2','sid1')"><<</button>
    </div>
    <select id="sid2" size="10" multiple></select>
</body>
<script>
   function doMove(d1,d2){
    
    
       //分别获取两个下拉框的元素节点对象
       var select1 = document.getElementById(d1);
       var select2 = document.getElementById(d2);
       //获取第一个下拉框中所有的下拉项
       var olist = select1.options;
       //遍历
       for(var i=0; i<olist.length; i++){
    
    
           //console.log(olist[i].value);
           //判断当前项是否被选中
           if(olist[i].selected){
    
    
               olist[i].selected = false; //取消选中
               var ob = olist[i];
               select1.remove(i);
               select2.add(ob);
               i--;
           }
       }
   }
</script>
</html>

5.6、table表格操作

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript中的DOM</title>
    <style>
        select,option,div,button{
    
    margin:0px;padding:0px;}
        #lid,#rid,div{
    
    
            width:80px;
            height:260px;
            float:left;
        }
        div{
    
    
            text-align:center;
            padding-top:60px;
        }
    </style>
</head>
<body>
    <h1>JavaScript语言中HTML DOM 操作-table对象</h1>
    <table id="tid" width="500" border="1">
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1001</td>
                <td>张三</td>
                <td>男</td>
                <td>20</td>
                <td><button onclick="dodel(this)">删除</button></td>
            </tr>
            <tr>
                <td>1002</td>
                <td>李四</td>
                <td>女</td>
                <td>21</td>
                <td><button onclick="dodel(this)">删除</button></td>
            </tr>
            <tr>
                <td>1003</td>
                <td>王五</td>
                <td>男</td>
                <td>22</td>
                <td><button onclick="dodel(this)">删除</button></td>
            </tr>
        </tbody>
    </table>
    <br/><br/><br/>
    <h2>添加学生信息</h2>
    <form action="#" name="myform" onsubmit="return doAdd()">
        学号：<input type="text" name="sno"/><br/><br/>
        姓名：<input type="text" name="name"/><br/><br/>
        性别：<input type="text" name="sex"/><br/><br/>
        年龄：<input type="text" name="age"/><br/><br/>
        <input type="submit" value="添加"/>
    </form>
</body>
<script>
   //执行数据删除操作
   function dodel(bt){
    
    
       //获取当前表格元素节点对象
       var tab  = document.getElementById("tid");
       tab.deleteRow(bt.parentNode.parentNode.rowIndex);
   }
   
   function doAdd(){
    
    
       //获取输入框中的内容
       var sno = document.myform.sno.value;
       var name = document.myform.name.value;
       var sex = document.myform.sex.value;
       var age = document.myform.age.value;

       //获取当前表格对象并申请添加一行
       var row = document.getElementById("tid").insertRow();
       //为当前行添加一个个字段信息
       row.insertCell(0).innerHTML = sno;
       row.insertCell(1).innerHTML = name;
       row.insertCell(2).innerHTML = sex;
       row.insertCell(3).innerHTML = age;
       row.insertCell(4).innerHTML = '<button οnclick="dodel(this)">删除</button>';

       //清空form表单
       document.myform.reset();
       
       return false;
   }
</script>
</html>

HTML DOM详解（a链接、图片延迟加载、form表单、input多选框、select、table表格）

1、HTML DOM 简介

什么是 XML DOM？

什么是 HTML DOM？

2、HTML DOM 节点

3、HTML DOM 方法

4、HTML DOM 属性

5、HTML DOM Document 对象

5.1、a链接操作

5.2、图片延迟加载

5.3、form表单操作

5.4、input多选框操作

5.5、select操作

5.6、table表格操作

猜你喜欢