css1-puchong1

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>

css1-puchong1的更多相关文章

CSS1，CSS2选择器详解
第一.CSS1选择器: 1.元素选择器(也叫标签选择器,是最基本的选择器) <style> html{background-color: red;} div{background-colo ...
CSS1 !important
CSS1 !important 提升指定样式规则的应用优先权 ie6并不支持.还是会被后面的样式覆盖
网页CSS1
样式的属性 1,背景与前景 background-color: //背景的颜色 background-image:url //背景图片 background-attachment:fixed; //背 ...
css1
背景属性:background;background-color;background-image;background-repeat;(背景是否重复,有repeat-x 横式重复,repeat-y竖 ...
css-1,css的三种引入方式基本选择器
<!-- (1)CSS 层叠样式表作用:修饰网页结构 (2)css的三种引入方式权重: 优先级高权重大谁在页面谁的权重大 - 行内样式注意:行内样式的优先级是最高的 - 内接样式 - ...
前端三部曲之Css-- 1（常见的居中方式）
下面来介绍一下web端页面最常见的居中方式页面的基本结构:一个简单的div <!DOCTYPE html> <html lang="en"> <he ...
康少带你玩转CSS-1
什么是CSS? 层叠样式表(假如HTML是一个人的话,css就是一个人的装饰品,比如裙子,衣服口红) 用来干什么的设置标签样式的 css注释单行注释/**/ 多行注释 /* */ 语法结构三种引 ...
前端之CSS1
CSS基本语法和引入方式 CSS介绍为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠 ...
基础系列（2）--- css1
css组成 css语法组成选择器和声明 (多个声明用分号隔开) 声明包括属性和属性值(多个属性值用空格隔开) 语法: 选择器{ 属性: 属性值; 属性: 属性值1 属性值2; } css样式表 ...
css1.0~3.0背景图使用多张折叠的概念与方法
需求:使用多张图片作为页面的背景图: 首先需要了解background的属性以及细节知识:https://www.cnblogs.com/chenglj/p/7372996.html backgrou ...

随机推荐

在PHPStorm中快速插入当前日期
在EditPlus中使用快捷键Ctrl+D即可插入当前日期,但在PHPStorm中似乎没有这样的快捷键,那如何实现快速插入当前日期呢?其实很简单,跟我做一遍你就会了: 目标为PHPStorm定义一个 ...
改善C++ 程序的150个建议学习之建议7：时刻提防内存溢出
作为一个程序员,对内存溢出问题肯定不陌生,它已经是软件开发历史上存在了近40年的大难题.在内存空间中,当要表示的数据超出了计算机为该数据分配的空间范围时,就产生了溢出,而溢出的多余数据则可以作为指令 ...
ThinkPHP从零开始（一）安装和配置
序: 对PHP一无所知的我,将从这里从零开始. 1.下载与安装 ThinkPHP的下载: ThinkPHP中文站下载页面有核心版和完整版两种,由于不了解.所以我选择了完整版. WampSer ...
hdu6444 Neko's Loop
要想A一道题,你需要正版ide,正版草稿纸,正版键盘,正版双手,但最重要的是正版大脑.(改编自wxf在微积分群的吐槽) 分析一下题意,选的所有数的下标模gcd(n,k)都是同余的,而且是在所有同余的下 ...
基于Maven构建Web项目
1.下载Maven,并配置好环境变量 2.打开命令行窗口,输入以下命令构建Maven Web项目 mvn archetype:generate -DgroupId=com.hello -Dartifa ...
Luogu 2469 [SDOI2010]星际竞速 / HYSBZ 1927 [Sdoi2010]星际竞速（网络流，最小费用流）
Luogu 2469 [SDOI2010]星际竞速 / HYSBZ 1927 [Sdoi2010]星际竞速 (网络流,最小费用流) Description 10年一度的银河系赛车大赛又要开始了.作为全 ...
C/C++如何整行读入字符串？
在写代码的过程中,经常要一行一行的读入字符串进行处理,这里我总结了一些方法,供大家参考. 方法一:scanf()读入char[] 使用方法: ]; scanf("%[^\n]",& ...
java web 验证码-数字不变形
controller代码: import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.a ...
maven 整合支付宝，导入alipay-sdk-java包到本地仓库
maven 整合支付宝,导入alipay-sdk-java包到本地仓库 1.环境变量添加: MAVEN_HOME:(maven位置) M2_HOME:(maven位置) PATH:%M2_HOME ...
openstack项目【day23】：虚拟化介绍
本节内容一什么是虚拟化二为何要学习虚拟化三虚拟化技术主要分类(了解) 四平台虚拟化技术又可以细分(了解) 一什么是虚拟化虚拟化说白了就是本来是一个完整的资源,切分或者说虚拟成多份,让 ...

css1-puchong1

一：HTML DOM 树

二：查找 HTML 元素

1）找到标签

2)间接

三：标签操作

1）innerText

2）className

3)checkbox

四：示例

1)模拟之对话框

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

3）示例之-左侧菜单

css1-puchong1的更多相关文章

随机推荐

热门专题

　　1）找到标签　　

　　2)间接

　　1）innerText

　　　　2）className

　　　　3)checkbox

　　1)模拟之对话框

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

　　3）示例之-左侧菜单