javascript-dom文档对象模型1

Posted 狼来的日子里!

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript-dom文档对象模型1相关的知识,希望对你有一定的参考价值。

html DOM (文档对象模型)

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

HTML DOM 模型被构造为对象的树。

一:HTML DOM 树

技术分享

  通过可编程的对象模型,javascript 获得了足够的能力来创建动态的 HTML。

    •   JavaScript 能够改变页面中的所有 HTML 元素
    •   JavaScript 能够改变页面中的所有 HTML 属性
    • J  avaScript 能够改变页面中的所有 CSS 样式
    •   JavaScript 能够对页面中的所有事件做出反应

二:查找 HTML 元素

  通常,通过 JavaScript,您需要操作 HTML 元素。

  为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:

    •   通过 id 找到 HTML 元素
    •   通过标签名找到 HTML 元素
    •   通过类名找到 HTML 元素

  

  1)找到标签   

    获取单个元素 document.getElementById(‘i1‘)
    获取多个元素(列表)document.getElementsByTagName(‘div‘)
    获取多个元素(列表)document.getElementsByClassName(‘c1‘)
  a. 直接找
    document.getElementById 根据ID获取一个标签
    document.getElementsByName 根据name属性获取标签集合
    document.getElementsByClassName 根据class属性获取标签集合
    document.getElementsByTagName 根据标签名获取标签集合

 

  2)间接

    tag=document.getElementById("l1")

    parentElement   //父节点标签元素

    children    //所有子节点标签

    firstElementChild //第一个子标签元素

    lastElementChild //最后一个子标签元素

    nextElementSibling //下一个兄弟标签元素

    previousElementSibling //上一个兄弟标签元素

 

三:标签操作

  1)innerText

      获取标签中的文本内容

      标签.innerText

    

      对标签内容文本进行修改

      标签.innerText="内容"

 

    2)className

      tag.className  =>直接整体做操作,获取所有类里内容,字符串

      tag.classList 获取所有类里内容,返回列表

      tag.classList.add("样式名") 添加指定样式

      tag.classList.remove("样式名") 删除指定样式

     3)checkbox 

      获取值
        checkbox对象.checked
      设置值
        checkbox对象.checked = true

      PS:

        

        <div onclick=‘func();‘>点我</div>
        <script>
            function func(){

            }

        </script>

四:示例

  1)模拟之对话框

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none; //不显示
        }
        .c1{
            position: fixed;  //固定全屏覆盖
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: black;
            opacity: 0.6;   //透明度
            z-index: 9;    //权重
        }
        .c2{
            position: fixed;  //固定剧中
            left: 50%;
            top: 50%;
            width: 400px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: white;
            z-index: 10;
        }
    </style>
</head>
<body>
<div>
    <p>
        <input type="button" value="添加" onclick="show()"/>
    <table style="border-color: chocolate;border: 3px;">
        <thead>
        <tr>
            <th>主机</th>
            <th>端口</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1.1.1.1</td>
            <td>191</td>
        </tr>
        <tr>
            <td>1.1.1.2</td>
            <td>192</td>
        </tr>
        <tr>
            <td>1.1.1.1</td>
            <td>192</td>
        </tr>
        </tbody>
    </table>
    </p>
</div>
<!-- 遮罩层开始-->
<div id="c1" class="c1 hide"></div>
<!-- 遮罩层结束-->

<!-- 对话框开始-->
<div id="c2" class="c2 hide">
    <label for="name">用户名</label>
    <input id="name" type="text" name="name">
    <br/>
    <label for="password">密码</label>
    <input id="password" type="password" name="name">
    <br>
    <input type="reset" value="取消" onclick="showCancel()">
    <input type="reset" value="添加">
</div>
<!-- 对话框结束-->
    <script>
        function show(){
            document.getElementById("c1").classList.remove("hide")
            document.getElementById("c2").classList.remove("hide")
        }
        function showCancel(){
            document.getElementById("c1").classList.add("hide")
            document.getElementById("c2").classList.add("hide")
        }
    </script>
</body>
</html>

   2)示例之表格全选取消反选

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .c1{
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
        .c2{
            width: 500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        }
    </style>
</head>
<body style="margin: 0;">

    <div>
        <input type="button" value="添加" onclick="ShowModel();" />
        <input type="button" value="全选" onclick="ChooseAll();" />
        <input type="button" value="取消" onclick="CancleAll();" />
        <input type="button" value="反选" onclick="ReverseAll();" />

        <table>
            <thead>
                <tr>
                    <th>选择</th>
                    <th>主机名</th>
                    <th>端口</th>
                </tr>
            </thead>
            <tbody id="tb">

                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>1.1.1.1</td>
                    <td>190</td>
                </tr>
                <tr>
                    <td><input type="checkbox"f id="test" /></td>
                    <td>1.1.1.2</td>
                    <td>192</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.3</td>
                    <td>193</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- 遮罩层开始 -->
    <div id="i1" class="c1 hide"></div>
    <!-- 遮罩层结束 -->

    <!-- 弹出框开始 -->
    <div id="i2" class="c2 hide">
        <p><input type="text" /></p>
        <p><input type="text" /></p>
        <p>
            <input type="button" value="取消" onclick="HideModel();"/>
            <input type="button" value="确定"/>

        </p>

    </div>
    <!-- 弹出框结束 -->

    <script>
        function ShowModel(){
            document.getElementById(‘i1‘).classList.remove(‘hide‘);
            document.getElementById(‘i2‘).classList.remove(‘hide‘);
        }
        function HideModel(){
            document.getElementById(‘i1‘).classList.add(‘hide‘);
            document.getElementById(‘i2‘).classList.add(‘hide‘);
        }

        function ChooseAll(){
            var tbody = document.getElementById(‘tb‘);
            // 获取所有的tr
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                // 循环所有的tr,current_tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = true;

            }
        }

        function CancleAll(){
            var tbody = document.getElementById(‘tb‘);
            // 获取所有的tr
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                // 循环所有的tr,current_tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = false;

            }
        }

        function ReverseAll(){
            var tbody = document.getElementById(‘tb‘);
            // 获取所有的tr
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                // 循环所有的tr,current_tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}}

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

   3)示例之-左侧菜单

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .item{
            width: 48px;
        }
        .header{
            background-color: #ff18a4;
            text-align: center;
        }
        .content{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="item">
            <div id="header1" class="header" onclick="showMenu(‘header1‘);">菜单1</div>
            <div class="contents hide">
                <div class="content">内容1</div>
                <div class="content">内容2</div>
                <div class="content">内容3</div>
            </div>
        </div>
        <div class="item">
            <div id="header2" class="header" onclick="showMenu(‘header2‘);">菜单2</div>
            <div class="contents hide">
                <div class="content">内容1</div>
                <div class="content">内容2</div>
                <div class="content">内容3</div>
            </div>
        </div>
        <div class="item">
            <div id="header3" class="header" onclick="showMenu(‘header3‘);">菜单3</div>
            <div class="contents hide">
                <div class="content">内容1</div>
                <div class="content">内容2</div>
                <div class="content">内容3</div>
            </div>
        </div>
        <div class="item">
            <div id="header4" class="header" onclick="showMenu(‘header4‘);">菜单4</div>
            <div class="contents hide">
                <div class="content">内容1</div>
                <div class="content">内容2</div>
                <div class="content">内容3</div>
            </div>
        </div>
    </div>
    <script>
        function showMenu(headern){ //传递ID参数

            var header_id=document.getElementById(headern) //获取header元素
            var menu=header_id.parentElement.parentElement  //获取父级的父级的元素menu

            var menu_item=menu.children //获取menu下面的所有子元素

            for(var i=0 ;i<menu_item.length;i++){
                menu_item[i].children[1].classList.add("hide") //获取contents元素,并增加hide类
            }
            header_id.nextElementSibling.classList.remove("hide") //去除header元素兄弟,删除hide类
        }
    </script>
</body>
</html>

 

















以上是关于javascript-dom文档对象模型1的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript-DOM(文档对象模型)

JavaScript-DOM(文档对象模型)

JavaScript-DOM对象

JavaScript-DOM(重点)

Javascript-DOM总结

JavaScript-DOM