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 ...
随机推荐
- Jmeter当获取正则表达式匹配数字为负数时获取所有匹配的值
需求说明:如果http的bodyData中有类似于{"idList":["6505","6506","2222".... ...
- postman 官方 test 脚本样例
Test examples 样例来源: https://learning.getpostman.com/docs/postman/scripts/test_examples/ Test scripts ...
- PSP(3.13——3.15)以及周记录
3.13 0:00 4:00 10 230 Cordova插件1,的尝试 N min 10:50 11:30 10 30 英语百词斩 N min 18:00 22:55 20 275 写博客 Y mi ...
- mybatis之接口方法多参数的三种实现方式
关键代码举例: DaoMapper.xml <!-- 传入多个参数时,自动转换为map形式 --> <insert id="insertByColumns" us ...
- 深入理解ajax系列第八篇——表单提交
前面的话 在以前,网站的用户与后端交互的主要方式是通过HTML表单的使用.表单的引入在1993年,由于其简单性和易用性,直到电子商务出现之前一直保持着重要位置.理解表单提交,对于更深入地理解ajax是 ...
- 【设计模式】—— 职责链模式ChainOfResponsibility
前言:[模式总览]——————————by xingoo 模式意图 避免请求的发送者,和接受者过度的耦合在一起.一个请求者只需要发送一个请求即可,它的请求具体由后面哪个对象进行响应,并不需要关心.而请 ...
- Integration Guide
This document, along with the samples and Javadoc™ in the IBM Sametime Software Development Kit (SDK ...
- POJ 2584 T-Shirt Gumbo
T-Shirt Gumbo Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 3689 Accepted: 1755 Des ...
- ctags相关
ctags相关 首先肯定是下载安装了.这点不用多讲,根据自己的操作系统或者平台,使用相应的包管理工具或者源码编译安装都可以. 下载完之后,在想要使用ctags帮助查找的文件夹(一般是项目的根目录)下输 ...
- 【Luogu4609】建筑师(第一类斯特林数,组合数学)
[Luogu4609]建筑师(组合数学) 题面 洛谷 题解 首先发现整个数组一定被最高值切成左右两半,因此除去最高值之后在左右分开考虑. 考虑一个暴力\(dp\) ,设\(f[i][j]\)表示用了\ ...