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

  1. CSS1,CSS2选择器详解

    第一.CSS1选择器: 1.元素选择器(也叫标签选择器,是最基本的选择器) <style> html{background-color: red;} div{background-colo ...

  2. CSS1 !important

    CSS1 !important 提升指定样式规则的应用优先权 ie6并不支持.还是会被后面的样式覆盖

  3. 网页CSS1

    样式的属性 1,背景与前景 background-color: //背景的颜色 background-image:url //背景图片 background-attachment:fixed; //背 ...

  4. css1

    背景属性:background;background-color;background-image;background-repeat;(背景是否重复,有repeat-x 横式重复,repeat-y竖 ...

  5. css-1,css的三种引入方式 基本选择器

    <!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...

  6. 前端三部曲之Css-- 1(常见的居中方式)

    下面来介绍一下web端页面最常见的居中方式 页面的基本结构:一个简单的div <!DOCTYPE html> <html lang="en"> <he ...

  7. 康少带你玩转CSS-1

    什么是CSS? 层叠样式表(假如HTML是一个人的话,css就是一个人的装饰品,比如裙子,衣服口红) 用来干什么的 设置标签样式的 css注释 单行注释/**/ 多行注释 /* */ 语法结构 三种引 ...

  8. 前端之CSS1

    CSS基本语法和引入方式 CSS介绍 为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠 ...

  9. 基础系列(2)--- css1

    css组成 css语法组成 选择器 和 声明 (多个声明用分号隔开) 声明包括 属性和属性值(多个属性值用空格隔开) 语法: 选择器{ 属性: 属性值; 属性: 属性值1 属性值2; } css样式表 ...

  10. css1.0~3.0背景图使用多张折叠的概念与方法

    需求:使用多张图片作为页面的背景图: 首先需要了解background的属性以及细节知识:https://www.cnblogs.com/chenglj/p/7372996.html backgrou ...

随机推荐

  1. TCP/IP之蓟辽督师 转

    原创: 刘欣 码农翻身 2016-11-07 本文续<TCP/IP之大明内阁>, 不了解背景的同学可以先看看上一篇文章, 当然这篇也是<TCP/IP之大明邮差>的前传, 主要讲 ...

  2. CentOS7 如何修改 内核版本

    1. 参考blog http://www.mamicode.com/info-detail-1758066.html https://www.cnblogs.com/sexiaoshuai/p/839 ...

  3. K8S 使用NFS 创建PV和PVC的例子 学习From https://blog.csdn.net/xts_huangxin/article/details/51494472

    1. 获取资料 网址: https://blog.csdn.net/xts_huangxin/article/details/51494472  感谢原作者 这里面 按照自己的机器情况进行了学习模仿 ...

  4. C#中几种创建对象的方式的对比

    最近学习了msil,发现了很多好玩的,今天介绍一个用IL来创建对象的方式 1.最常见的两种创建对象方式 public static T Create<T>() where T : new( ...

  5. 【题解】 bzoj1260: [CQOI2007]涂色paint (区间dp)

    bzoj1260,懒得复制,戳我戳我 Solution: 这种题目我不会做qwq,太菜了 区间打牌(dp) 用f[l][r]表示从l到r最少需要染几次色. 状态转移方程: 1.\(f[l][r]=mi ...

  6. 学习6__STM32--SPI外设之中断收发---

    <目标> STM32双机 SPI中断收发通信 <描述> # STM32双机配置为一主一从模式 # 采用主机中断发送,从机中断接收 # 收发机制采用不间断收发(发送为空就发送,接 ...

  7. 【洛谷P3916】图的遍历

    题目大意:给定一个 N 个点,M 条边的有向图,求每个点能够到达的节点的最大编号是多少. 题解:因为题中所给图不一定是一个 DAG,因此无法进行按照拓扑序来动态规划,需要另辟蹊径.由于求的是每个节点能 ...

  8. MySQL日志功能详解

    MySQL日志功能详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查询日志 它是用来保存所有跟查询相关的日志,这种日志类型默认是关闭状态的,因为MySQL的用户有很多,如果 ...

  9. Spring整合Quartz定时任务 在集群、分布式系统中的应用(Mysql数据库环境)

    Spring整合Quartz定时任务 在集群.分布式系统中的应用(Mysql数据库环境)   转载:http://www.cnblogs.com/jiafuwei/p/6145280.html 单个Q ...

  10. np.random.choice方法

    np.random.choice方法 觉得有用的话,欢迎一起讨论相互学习~Follow Me def choice(a, size=None, replace=True, p=None) 表示从a中随 ...