JavaScript基础知识总结 18:dom基本操作
目录
- 一、JavaScript多选框全选、全不选、反选
- 1、代码实例
- 2、浏览器显示
- 二、dom查询方法
- 1、body标签
- 2、html根标签
- 3、all
- 4、getElementsByClassName
- 三、dom增删改
- 1、代码实例
- 2、浏览器显示
- 四、修改CSS样式
- 1、修改尺寸
- 2、获取样式
- 五、读取元素的样式
- 1、获取元素的当前显示的样式
- 2、该方法会返回一个对象,对象中封装了当前元素对应的样式,可以通过对象.样式名来读取样式,如果获取的样式没有设置,则会获取到真实的值,而不是默认值
- 六、JavaScript思维导图
- 七、中国水利水电出版社优质书籍推荐
一、JavaScript多选框全选、全不选、反选
1、代码实例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选练习</title>
<script type="text/javascript">window.onload = function(){//获取四个多选框itemsvar items = document.getElementsByName("items");//获取全选/全不选的多选框var checkedAllBox = document.getElementById("checkedAllBox");/** 全选按钮* - 点击按钮以后,四个多选框全都被选中*///1.#checkedAllBtn//为id为checkedAllBtn的按钮绑定一个单击响应函数var checkedAllBtn = document.getElementById("checkedAllBtn");checkedAllBtn.onclick = function(){//遍历itemsfor(var i=0 ; i<items.length ; i++){//通过多选框的checked属性可以来获取或设置多选框的选中状态//alert(items[i].checked);//设置四个多选框变成选中状态items[i].checked = true;}//将全选/全不选设置为选中checkedAllBox.checked = true;};/** 全不选按钮* - 点击按钮以后,四个多选框都变成没选中的状态*///2.#checkedNoBtn//为id为checkedNoBtn的按钮绑定一个单击响应函数var checkedNoBtn = document.getElementById("checkedNoBtn");checkedNoBtn.onclick = function(){for(var i=0; i<items.length ; i++){//将四个多选框设置为没选中的状态items[i].checked = false;}//将全选/全不选设置为不选中checkedAllBox.checked = false;};/** 反选按钮* - 点击按钮以后,选中的变成没选中,没选中的变成选中*///3.#checkedRevBtnvar checkedRevBtn = document.getElementById("checkedRevBtn");checkedRevBtn.onclick = function(){//将checkedAllBox设置为选中状态checkedAllBox.checked = true;for(var i=0; i<items.length ; i++){//判断多选框状态/*if(items[i].checked){//证明多选框已选中,则设置为没选中状态items[i].checked = false;}else{//证明多选框没选中,则设置为选中状态items[i].checked = true;}*/items[i].checked = !items[i].checked;//判断四个多选框是否全选//只要有一个没选中则就不是全选if(!items[i].checked){//一旦进入判断,则证明不是全选状态//将checkedAllBox设置为没选中状态checkedAllBox.checked = false;}}//在反选时也需要判断四个多选框是否全都选中};/** 提交按钮:* - 点击按钮以后,将所有选中的多选框的value属性值弹出*///4.#sendBtn//为sendBtn绑定单击响应函数var sendBtn = document.getElementById("sendBtn");sendBtn.onclick = function(){//遍历itemsfor(var i=0 ; i<items.length ; i++){//判断多选框是否选中if(items[i].checked){alert(items[i].value);}}};//5.#checkedAllBox/** 全选/全不选 多选框* - 当它选中时,其余的也选中,当它取消时其余的也取消* * 在事件的响应函数中,响应函数是给谁绑定的this就是谁*///为checkedAllBox绑定单击响应函数checkedAllBox.onclick = function(){//alert(this === checkedAllBox);//设置多选框的选中状态for(var i=0; i <items.length ; i++){items[i].checked = this.checked;}};//6.items/** 如果四个多选框全都选中,则checkedAllBox也应该选中* 如果四个多选框没都选中,则checkedAllBox也不应该选中*///为四个多选框分别绑定点击响应函数for(var i=0 ; i<items.length ; i++){items[i].onclick = function(){//将checkedAllBox设置为选中状态checkedAllBox.checked = true;for(var j=0 ; j<items.length ; j++){//判断四个多选框是否全选//只要有一个没选中则就不是全选if(!items[j].checked){//一旦进入判断,则证明不是全选状态//将checkedAllBox设置为没选中状态checkedAllBox.checked = false;//一旦进入判断,则已经得出结果,不用再继续执行循环break;}}};}};</script>
</head>
<body><form method="post" action="">你喜欢谁?<input type="checkbox" id="checkedAllBox" />全选/全不选 <br /><input type="checkbox" name="items" value="哪吒" />哪吒<input type="checkbox" name="items" value="云韵" />云韵<input type="checkbox" name="items" value="比比东" />比比东<input type="checkbox" name="items" value="美杜莎" />美杜莎<input type="checkbox" name="items" value="雅妃" />雅妃<br /><input type="button" id="checkedAllBtn" value="全 选" /><input type="button" id="checkedNoBtn" value="全不选" /><input type="button" id="checkedRevBtn" value="反 选" /><input type="button" id="sendBtn" value="提 交" /></form>
</body>
</html>
2、浏览器显示
二、dom查询方法
1、body标签
//在document中有一个属性body,它保存的是body的引用
var body = document.body;
2、html根标签
//document.documentElement保存的是html根标签
var html = document.documentElement;
3、all
//document.all代表页面中所有的元素
var all = document.all;
4、getElementsByClassName
(1)getElementsByClassName()可以根据class属性值获取一组元素节点对象。
var box = document.getElementsByClassName("box");
(2)获取页面中的所有的div
var divs = document.getElementsByTagName("div");
(3)获取class为box1中的所有的div
var div = document.querySelector(".box1 div");
(4)document.querySelectorAll()
该方法和querySelector()用法类似,不同的是它会将符合条件的元素封装到一个数组中返回。
box1 = document.querySelectorAll(".box1");
box1 = document.querySelectorAll("#box2");
三、dom增删改
1、代码实例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="style/css.css" /><script type="text/javascript">window.onload = function() {//创建一个"云韵"节点,添加到#girl下myClick("btn01",function(){//创建云韵节点 <li>云韵</li>//创建li元素节点/** document.createElement()* 可以用于创建一个元素节点对象,* 它需要一个标签名作为参数,将会根据该标签名创建元素节点对象,* 并将创建好的对象作为返回值返回*/var li = document.createElement("li");//创建云韵文本节点/** document.createTextNode()* 可以用来创建一个文本节点对象* 需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回*/var gzText = document.createTextNode("云韵");//将gzText设置li的子节点/** appendChild()* - 向一个父节点中添加一个新的子节点* - 用法:父节点.appendChild(子节点);*/li.appendChild(gzText);//获取id为girl的节点var girl = document.getElementById("girl");//将云韵添加到girl下girl.appendChild(li);});//将"云韵"节点插入到#bbd前面myClick("btn02",function(){//创建一个云韵var li = document.createElement("li");var gzText = document.createTextNode("云韵");li.appendChild(gzText);//获取id为bbd的节点var bbd = document.getElementById("bbd");//获取girlvar girl = document.getElementById("girl");/** insertBefore()* - 可以在指定的子节点前插入新的子节点* - 语法:* 父节点.insertBefore(新节点,旧节点);*/girl.insertBefore(li , bbd);});//使用"云韵"节点替换#bbd节点myClick("btn03",function(){//创建一个云韵var li = document.createElement("li");var gzText = document.createTextNode("云韵");li.appendChild(gzText);//获取id为bbd的节点var bbd = document.getElementById("bbd");//获取girlvar girl = document.getElementById("girl");/** replaceChild()* - 可以使用指定的子节点替换已有的子节点* - 语法:父节点.replaceChild(新节点,旧节点);*/girl.replaceChild(li , bbd);});//删除#bbd节点myClick("btn04",function(){//获取id为bbd的节点var bbd = document.getElementById("bbd");//获取girlvar girl = document.getElementById("girl");/** removeChild()* - 可以删除一个子节点* - 语法:父节点.removeChild(子节点);* * 子节点.parentNode.removeChild(子节点);*///girl.removeChild(bbd);bbd.parentNode.removeChild(bbd);});//读取#girl内的HTML代码myClick("btn05",function(){//获取girlvar girl = document.getElementById("girl");alert(girl.innerHTML);});myClick("btn06",function(){//向girl中添加云韵var girl = document.getElementById("girl");/** 使用innerHTML也可以完成DOM的增删改的相关操作* 一般我们会两种方式结合使用*///girl.innerHTML += "<li>云韵</li>";//创建一个livar li = document.createElement("li");//向li中设置文本li.innerHTML = "云韵";//将li添加到girl中girl.appendChild(li);});};function myClick(idStr, fun) {var btn = document.getElementById(idStr);btn.onclick = fun;}</script></head><body><div id="total"><div class="inner"><p>你喜欢哪个美女?</p><ul id="girl"><li id="bbd">比比东</li><li>美杜莎</li><li>雅妃</li><li>哪吒</li></ul></div></div><div id="btnList"><div><button id="btn01">创建一个"云韵"节点,添加到#girl下</button></div><div><button id="btn02">将"云韵"节点插入到#bbd前面</button></div><div><button id="btn03">使用"云韵"节点替换#bbd节点</button></div><div><button id="btn04">删除#bbd节点</button></div><div><button id="btn05">读取#girl内的HTML代码</button></div><div><button id="btn06">创建一个"云韵"节点,添加到#girl下</button></div></div></body>
</html>
2、浏览器显示
四、修改CSS样式
1、修改尺寸
//获取box1
var box1 = document.getElementById("box1");
//为按钮绑定单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){box1.style.width = "300px";box1.style.height = "300px";box1.style.backgroundColor = "yellow";};
2、获取样式
//点击按钮以后,读取元素的样式
var btn = document.getElementById("btn");
btn.onclick = function(){//读取box1的样式/** 语法:元素.style.样式名* * 通过style属性设置和读取的都是内联样式* 无法读取样式表中的样式*///alert(box1.style.height);alert(box1.style.width);
};
五、读取元素的样式
1、获取元素的当前显示的样式
(1)currentStyle只有IE浏览器支持,其他的浏览器都不支持
alert(box1.currentStyle.width);
(2)在其他浏览器中可以使用getComputedStyle()这个方法来获取元素当前的样式
需要两个参数
- 第一个:要获取样式的元素
- 第二个:可以传递一个伪元素,一般都传null
2、该方法会返回一个对象,对象中封装了当前元素对应的样式,可以通过对象.样式名来读取样式,如果获取的样式没有设置,则会获取到真实的值,而不是默认值
六、JavaScript思维导图
七、中国水利水电出版社优质书籍推荐
- NoSQL数据库入门与实战
- SQL从入门到精通
- 手把手教你学Linux
- Vue.js3.0从入门到实战
JavaScript基础知识总结 18:dom基本操作相关推荐
- javascript基础知识系列:DOM学习
访问节点: 短距离的旅行: parentNode:获得父节点. firstChild:获得第一个子节点. lastChild:获得子节点的最后一个. 访问节点的文本: var x=[a.paragr ...
- JavaScript 基础知识 - DOM篇(二)
7. 节点操作 7.1 节点的属性 节点分类: 标签节点 文本节点 属性节点 注释节点 节点常用的属性: nodeType:节点的类型 nodeName:节点名称 nodeValue:节点值 常见的节 ...
- Javascript 基础知识学习
Javascript 基础知识学习 参考自:https://www.w3cschool.cn/javascript/ javascript 简介 JavaScript 是互联网上最流行的脚本语言,这门 ...
- js java用var_Java基础———JavaScript基础知识
原标题:Java基础---JavaScript基础知识 JavaScript基础知识(1) Javascript的历史,Javascript是什么? JavaScript 诞生于 1995 年. 它当 ...
- JavaScript 基础知识 - 入门篇(二)
11. 函数 11.1 函数的基础知识 为什么会有函数? 在写代码的时候,有一些常用的代码需要书写很多次,如果直接复制粘贴的话,会造成大量的代码冗余: 函数可以封装一段重复的javascript代码, ...
- JavaScript 基础知识
JavaScript 基础知识 文章目录 JavaScript 基础知识 @[toc] 一.JS的基本语法与结构 1.1 JavaScript 用法 1.2 JavaScript 输出 1.3 Jav ...
- javascript基础知识大全
发些javascript基础知识,便于大家学习,也便于我自己查看 1.javascript的数组API [js] <pre>//定义数组 var pageIds = new Arr ...
- jQuery+Javascript基础知识汇总
jQuery介绍 jQuery是一个Javascript库,里面提供了很多快速方便操作DOM的函数(方法).学习jQuery的本质就是学习调用这些函数(方法). jQuery的入口函数 等DOM结构渲 ...
- HTML5学习笔记 —— JavaScript基础知识
HTML5学习笔记 -- JavaScript基础知识 标签: html5javascriptweb前端 2017-05-11 21:51 883人阅读 评论(0) 收藏 举报 分类: JavaScr ...
最新文章
- 构建可以查找相似图像的图像搜索引擎的深度学习技术详解
- NLP:基于nltk和jieba库对文本实现提取文本摘要(两种方法实现:top_n_summary和mean_scored_summary)
- java属性修改前后_java 记录对象前后修改的内容(工具类)
- 用python倒序输出一个字符串_Python 反转字符串(reverse)的方法小结
- java 防渗透_「java、工程师工作经验怎么写」-看准网
- python 线性回归 技术方案亮点_基于Python的线性回归实战
- taro 重新加载小程序_Taro开发微信小程序的初体验
- mysql 执行查询_MySQL查询的执行过程
- static 二次理解
- Mysql执行计划查看
- svn删除文件文件夹(遇到的问题解决)
- 微信小程序设置底部导航栏
- Iconfont阿里矢量图库结合css3属性font-face的使用
- 用Excel公式,批量生成工作时间段时间点(打酱油专用)
- [生存志] 第138节 说苑列女事追前朝
- 美团项目 ---首页开发2
- 微软游戏服务器崩溃地平线4,极限竞速地平线4无法在电脑上启动或崩溃
- 海南大学838信号与系统专业课的感悟
- 数字孪生是什么,数字孪生能干什么?一文读懂
- 应广单片机例程EERPOM页写中一个BUG