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的更多相关文章

  1. Javascript - DOM文档对象模型

    文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Ja ...

  2. 认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构（节点树）。

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  3. JavaScript : DOM文档解析详解

    JavaScript DOM  文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...

  4. JavaScript的文档对象模型DOM

    小伙伴们之前我们讲过很多JavaScript的很多知识点,可以点击回顾一下: <JavaScript大厦之JS运算符>: <JavaScript工作原理:内存管理 + 如何处理4个常 ...

  5. xml.dom——文档对象模型API

    文档对象模型,或者“DOM”,是一个跨语言API的World Wide Web Consortium(W3C)来访问和修改XML文档.DOM的实现提供了一个XML文档树结构,或允许客户机代码从头开始建 ...

  6. JavaScript学习笔记7 之DOM文档对象模型

    一.什么是DOMDocument Object Model 文档 -------对象 ----模型-------缩写DOM DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘 ...

  7. JavaScript学习总结（一）DOM文档对象模型

    一.文档(D) 一个网页运行在浏览器中,他就是一个文档对象. 二.对象(O) "对象"是一种自足的数据集合.与某个特定对象相关联的变量被称为这个对象的属性,只能通过某个对象调用的函 ...

  8. JS第二部分--DOM文档对象模型

    一.DOM的概念 二.DOM可以做什么 三.DOM对象的获取 四.事件的介绍 五.DOM节点标签样式属性的操作 六.DOM节点对象对值的操作 七.DOM节点-标签属性的操作(例如id class sr ...

  9. JavaScirpt(JS)——DOM文档对象模型

    一.HTML DOM介绍 HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML). HTML DOM 定义了用于 HT ...

  10. DOM 文档对象模型

    document 对象(作为对象),是 DOM 的核心作用:对内容,属性,样式等操作属性:title:设置/返回当前文档的标题url:返回当前文档的 urlinnerHTML:获取指定对象内的内容bg ...

随机推荐

  1. PHP的魔术方法

    PHP中把以两个下划线__开头的方法称为魔术方法(Magic methods) 魔术方法包括: __construct(),类的构造函数 __destruct(),类的析构函数 __call(),在对 ...

  2. Python模块-pymssql

    目录 工作原理 常用封装 Python默认的数据库是 SQLlite,不过它对MySql以及SQL server的支持也可以.如果想链接操作SQL server,需使用第三方包pymssql pyms ...

  3. 消息队列1：RabbitMQ解析并基于Springboot实战

    RabbitMQ简介 AMQP:Advanced Message Queue,高级消息队列协议.它是应用层协议的一个开放标准,为面向消息的中间件设计,基于此协议的客户端与消息中间件可传递消息,并不受产 ...

  4. 在delphi中我用DBGrid选择多条记录,如何一次把选择的多条记录删掉

    procedure TForm1.btnDoSumClick(Sender: TObject);var  i: Integer;begin  if DBGrid1.SelectedRows.Count ...

  5. wireshark系列之wireshark过滤器

    一:过滤器 使用wireshark工具抓包,如果使用默认配置,会得到大量的数据,所以我们就很难找到我们要分析的封包数据.所以使用wireshark过滤器就显得尤为重要. wireshark过滤器分为两 ...

  6. oracle递归查询（查询条件ID下得所有子集）

    一.CREATE TABLE TBL_TEST ( ID    NUMBER, NAME  VARCHAR2(100 BYTE), PID   NUMBER                       ...

  7. 【java】JDK、JRE、JVM的关系

    目录结构: contents structure [-] 什么是JDK,JRE,JVM 安装JDK的时候为什么有两个jre 专用JRE 共用JRE 共用JRE和专用JRE的对比 java的跨平台特性 ...

  8. django模板中的自定义过滤器

    (1)在APP下创建templatetags文件夹,与Models.py.views.py等同级,templatetags文件夹下添加__init__.py文件,可为空,再添加一个模块文件,例如cpt ...

  9. python爬虫 抓取一个网站的所有网址链接

    sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction.htm?courseId=1005269003&utm_campai ...

  10. SQL记录-PLSQL变量与常量文字

    PL/SQL变量   变量是只不过是一个给定的存储区域,程序可以操纵的名称.PL/SQL每个变量具有一个特定的数据类型,它决定了大小和变量的存储器的值,可以说存储器和设置操作可以施加到可变内被存储的范 ...