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文档对象模型
文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Ja ...
- 认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构（节点树）。
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...
- JavaScript : DOM文档解析详解
JavaScript DOM 文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...
- JavaScript的文档对象模型DOM
小伙伴们之前我们讲过很多JavaScript的很多知识点,可以点击回顾一下: <JavaScript大厦之JS运算符>: <JavaScript工作原理:内存管理 + 如何处理4个常 ...
- xml.dom——文档对象模型API
文档对象模型,或者“DOM”,是一个跨语言API的World Wide Web Consortium(W3C)来访问和修改XML文档.DOM的实现提供了一个XML文档树结构,或允许客户机代码从头开始建 ...
- JavaScript学习笔记7 之DOM文档对象模型
一.什么是DOMDocument Object Model 文档 -------对象 ----模型-------缩写DOM DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘 ...
- JavaScript学习总结（一）DOM文档对象模型
一.文档(D) 一个网页运行在浏览器中,他就是一个文档对象. 二.对象(O) "对象"是一种自足的数据集合.与某个特定对象相关联的变量被称为这个对象的属性,只能通过某个对象调用的函 ...
- JS第二部分--DOM文档对象模型
一.DOM的概念 二.DOM可以做什么 三.DOM对象的获取 四.事件的介绍 五.DOM节点标签样式属性的操作 六.DOM节点对象对值的操作 七.DOM节点-标签属性的操作(例如id class sr ...
- JavaScirpt(JS)——DOM文档对象模型
一.HTML DOM介绍 HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML). HTML DOM 定义了用于 HT ...
- DOM 文档对象模型
document 对象(作为对象),是 DOM 的核心作用:对内容,属性,样式等操作属性:title:设置/返回当前文档的标题url:返回当前文档的 urlinnerHTML:获取指定对象内的内容bg ...
随机推荐
- ejabberd在windows10上安装记录
安装完ejabberd:ejabberd-17.11-windows-installer.exe 启动报错:bash ejabberdctl register "admin" &q ...
- QEMU简单知识 以及磁盘格式转换的简单命令
From 百度百科 QEMU,是由 Fabrice Bellard开发的通用.开源机器模拟与虚拟化软件,Fabrice Bellard是另一个著名的C编译器的作者.QEMU可以在不同的机器上运行独自开 ...
- MYSQL 解决中文字符集乱码问题的方法
修改 /etc/mysql/my.cnf 增加内容 [client] default-character-set = utf8mb4 [mysql] default-character-set = u ...
- asp.net使用动态模版导出word
具体思路: 1.先制作Word模版,使用文本框+书签的方式来设计模版: 2.模版制作完之后,根据模版生成新文件,使用File.Copy方法,生成.doc格式新文件: 3.后台取得数据,参照网页渲染的方 ...
- MySQL5.7安装(RPM)笔记
1. 检查MySQL是否安装,如果有安装,则移除(rpm –e 名称)[root@localhost ~]# rpm -qa | grep -i mysqlmysql-libs-xxxxxxxxxx. ...
- Simple Cycles Edges CodeForces - 962F（点双连通分量）
题意: 求出简单环的所有边,简单环即为边在一个环内 解析: 求出点双连通分量,如果一个连通分量的点数和边数相等,则为一个简单环 点双连通分量 任意两个点都至少存在两条点不重复的路径 即任意两条边都 ...
- POJ 1182 食物链 （带权并查集）
食物链 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 78551 Accepted: 23406 Description ...
- 【codevs1297】硬币 完全背包
题目大意:给定 N 种不同种类的硬币,每种硬币的重量范围在一个可变区间内,但是价值恒定,求给定一个重量 W,求有多少种面值不同的组合方式. 题解:如果硬币的重量恒定,那么就是一道裸的完全背包问题.因此 ...
- （转） eclipse项目中.classpath文件详解
背景:对于java项目中.classpath文件中的相关定义一直不是很了解,有必要进行深入的学习. 1 前言 在使用eclipse或者myeclipse进行Java项目开发的时候,每个project( ...
- GROUP BY和 HAVING 及 统计函数 执行顺序等
[我理解:where是对最外层结果进行条件筛选,而having是对分组时分组中的数据进行 组内条件筛选,注意:只能进行筛选,不能进行统计或计算,所有统计或计算都要放在最外层的select 后面,无论是 ...