DOM对象_hehe.employment.over.10.3

2021-02-04 14:57:56 阅读：172 来源： 互联网

标签：over.10 employment getElementById var td document hehe 节点 div1

10.9 DOM_概述

DOM： Document Object Model 文档对象模型
- 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。
W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
  - Document： 文档对象
  - Element： 元素对象
  - Attribute： 属性对象
  - Text： 文本对象
  - Comment: 注释对象
  - Node： 节点对象，其他5个的父对象
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型

10.10 DOM_Document对象

Document：文档对象
1.创建(获取)： 在html dom模型中可以使用window对象来获取。
- window.document
- document
2.方法：
- 1.获取 Element 对象：
  - getElementById() ：根据id属性值获取元素对象。id属性值一般唯一。
  - getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组。
  - getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组。
  - getElementsByName() : 根据name属性值获取元素对象们。返回值是一个数组。
- 2.创建其他DOM对象：
  - createAttribute(name)
  - createComment()
  - createElement() 创建新的元素节点。
  - createTextNode()创建新的文本节点。
示例：

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

</head>
<body>

    <div id="div1">div1</div>
    <div id="div2">div2</div>
    
    <div id="div3">div3</div>
    
    <div class="cls1">div4</div>
    <div class="cls1">div5</div>
    
    <input type="text" name="username">
    
    <script>
    
        //2.根据元素名称获取元素对象们。返回值是一个数组
        var divs = document.getElementsByTagName("div");
        //alert(divs.length);
        //3.根据Class属性值获取元素对象们。返回值是一个数组
        var div_cls = document.getElementsByClassName("cls1");
        // alert(div_cls.length);
        //4.根据name属性值获取元素对象们。返回值是一个数组
        var ele_username = document.getElementsByName("username");
        //alert(ele_username.length);
    
        var table = document.createElement("table");
        alert(table);
        
    </script>
</body>
</html>

10.11 DOM_Element对象

Element：元素对象
1.获取/创建： 通过document来获取和创建.
2.方法：
- removeAttribute()：删除属性
- setAttribute()：设置属性
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element对象</title>
</head>
<body>
    <a>连接</a>
    <input type="button" id="btn_set" value="设置属性">
    <input type="button" id="btn_remove" value="删除属性">
<script>
    //获取btn
    var btn_set =document.getElementById("btn_set");
    btn_set.onclick = function(){
        //1.获取a标签
        var element_a = document.getElementsByTagName("a")[0];
        //设置属性
        element_a.setAttribute("href","https://www.baidu.com");
    }

    //获取btn
    var btn_remove =document.getElementById("btn_remove");
    btn_remove.onclick = function(){
        //1.获取a标签
        var element_a = document.getElementsByTagName("a")[0];
        //删除属性
        element_a.removeAttribute("href");
    }
</script>
</body>
</html>

10.12 DOM_Node对象

Node：节点对象，其他5个的父对象
- 特点： 所有dom对象都可以被认为是一个节点.
方法：
- CRUD dom树：
  - appendChild()：向节点的子节点列表的结尾添加新的子节点。
  - removeChild() ：删除（并返回）当前节点的指定子节点。
  - replaceChild()：用新节点替换一个子节点。
属性：
- parentNode : 返回节点的父节点。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 1px solid red;
        }
        #div1{
            width: 200px;
            height: 200px;
        }
        #div2{
            width: 100px;
            height: 100px;
        }
        #div3{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>

</body>

<!--超链接功能：-->
<!--1.可以被点击：样式-->
<!--2.点击后跳转到href指定的url-->

<!--需求：保留1功能，去掉2功能-->
<!--实现：href="javascript:void(0);"-->

    <div id="div1">
        <div id="div2">div2</div>
        div1
    </div>
    <a href="javascript:void(0);" id="del">删除子节点</a>
    <a href="javascript:void(0);" id="add">添加子节点</a>
    <!--<input type="button" id="del" value="删除子节点">-->

    <script>
        //1.获取超链接
        var element_a = document.getElementById("del");
        //2.绑定单击事件
        element_a.onclick = function(){
            var div1 = document.getElementById("div1");
            var div2 = document.getElementById("div2");
            div1.removeChild(div2);
        }

        //1.获取超链接
        var element_add = document.getElementById("add");
        //2.绑定单击事件
        element_add.onclick = function(){
            var div1 = document.getElementById("div1");
            //给div1添加子节点
            //创建div节点
            var div3 = document.createElement("div");
            div3.setAttribute("id","div3");
            div1.appendChild(div3);
        }

        //返回节点div2的父节点
        var div2 = document.getElementById("div2");
        var div1 = div2.parentNode;
        alert(div1);
    </script>
</html>

10.13 DOM_Node案例_动态表格

<!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>hehe</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>

    <tr>
        <td>2</td>
        <td>xww</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>

    <tr>
        <td>3</td>
        <td>jianjie</td>
        <td>?</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></td>
    </tr>
</table>
<script>
    /*
       分析：
           1.添加：
               1. 给添加按钮绑定单击事件
               2. 获取文本框的内容
               3. 创建td，设置td的文本为文本框的内容。
               4. 创建tr
               5. 将td添加到tr中
               6. 获取table，将tr添加到table中
           2.删除：
               1.确定点击的是哪一个超链接
                   <a href="javascript:void(0);" οnclick="delTr(this);" >删除</a>
               2.怎么删除？
                   removeChild():通过父节点删除子节点

    */
    //1.获取按钮
    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;

        //3.创建td，赋值td的标签体
        //id 的 td
        var td_id = document.createElement("td");
        var text_id = document.createTextNode(id);
        td_id.appendChild(text_id);
        //name 的 td
        var td_name = document.createElement("td");
        var text_name = document.createTextNode(name);
        td_name.appendChild(text_name);
        //gender 的 td
        var td_gender = document.createElement("td");
        var text_gender = document.createTextNode(gender);
        td_gender.appendChild(text_gender);
        //a标签的td
        var td_a = document.createElement("td");
        var ele_a = document.createElement("a");
        ele_a.setAttribute("href","javascript:void(0);");
        ele_a.setAttribute("onclick","delTr(this);");
        var text_a = document.createTextNode("删除");
        ele_a.appendChild(text_a);
        td_a.appendChild(ele_a);

        //4.创建tr
        var tr = document.createElement("tr");
        //5.添加td到tr中
        tr.appendChild(td_id);
        tr.appendChild(td_name);
        tr.appendChild(td_gender);
        tr.appendChild(td_a);
        //6.获取table
        var table = document.getElementsByTagName("table")[0];
        table.appendChild(tr);
    }
    
    //使用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;
        //删除tr
        table.removeChild(tr);
    }
</script>
</body>
</html>

10.14 DOM_HTML DOM

HTML DOM
1.标签体的设置和获取： innerHTML
2.使用 html元素对象的属性
3.控制元素样式
- (1).使用元素的style属性来设置;
- (2).提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTMLDOM</title>
</head>
<body>
<div id="div3">
    innerHTML
</div>

<div id="div1">
    innerHTML控制样式1
</div>

<div id="div2">
    innerHTML控制样式2
</div>
<script >
    //1. innerHTML
    var div = document.getElementById("div3");
    var innerHTML = div.innerHTML;
    //alert(innerHTML);

    //div标签中替换一个文本输入框
    // div.innerHTML = "<input type='text'>";

    //div标签中追加一个文本输入框
    div.innerHTML += "<input type='text'>";
    
    //2. 通过style控制样式
    var div1 = document.getElementById("div1");
    div1.onclick = function(){
        //修改样式方式1
        div1.style.border = "1px solid red";

        div1.style.width = "200px";

        //font-size--> fontSize
        div1.style.fontSize = "20px";

    }
    //3. 通过className控制样式
    var div2 = document.getElementById("div2");
    div2.onclick = function(){
        div2.className = "d1";
    }
</script>
</body>
</html>

标签：over.10,employment,getElementById,var,td,document,hehe,节点,div1
来源： https://blog.csdn.net/qq_44686266/article/details/113631939

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