JavaScript之Web API
1 Web API
API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序
与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。
API 是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能.
Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。
1.1 DOM 重点核心
关于dom操作,我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。
创建
1. document.write
2. innerHTML
3. createElement
增
1. appendChild
2. insertBefore
删
1.removeChild
改
主要修改dom的元素属性,dom元素的内容、属性, 表单的值等
1. 修改元素属性: src、href、title等
2. 修改普通元素内容: innerHTML 、innerText
3. 修改表单元素: value、type、disabled等
4. 修改元素样式: style、classNam
查
主要获取查询dom的元素
1. DOM提供的API 方法: getElementById、getElementsByTagName 古老用法 不太推荐
2. H5提供的新方法: querySelector、querySelectorAll 提倡
3. 利用节点操作获取元素: 父(parentNode)、子(children)、兄(previousElementSibling、
nextElementSibling) 提倡
属性操作
主要针对于自定义属性。
1. setAttribute:设置dom的属性值
2. getAttribute:得到dom的属性值
3. removeAttribute移除属性
1.2 DOM
文档对象模型(Document Object Model,简称 DOM)
1.2.1 DOM树
1.2.2 获取元素
根据 ID 获取
根据标签名获取
通过 HTML5 新增的方法获取
特殊元素获取
1.2.2.1 根据 ID 获取
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< / head>
< body>
< div id= "time" > 2019 - 9 - 9 < / div>
< script>
var timer = document. getElementById ( 'time' ) ;
console. log ( timer) ;
console. log ( typeof timer) ;
console. dir ( timer) ;
< / script>
< / body>
< / html>
1.2.2.2 根据标签名获取
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< / head>
< body>
< ul>
< li> 知否知否,应是等你好久11 < / li>
< li> 知否知否,应是等你好久11 < / li>
< li> 知否知否,应是等你好久11 < / li>
< li> 知否知否,应是等你好久11 < / li>
< / ul>
< ol id= "ol" >
< li> 生僻字< / li>
< li> 生僻字< / li>
< li> 生僻字< / li>
< li> 生僻字< / li>
< / ol>
< script>
var lis = document. getElementsByTagName ( 'li' ) ;
console. log ( lis) ;
console. log ( lis[ 0 ] ) ;
for ( var i = 0 ; i < lis. length; i++ ) {
console. log ( lis[ i] ) ;
}
var ol = document. getElementById ( 'ol' ) ;
console. log ( ol. getElementsByTagName ( 'li' ) ) ;
< / script>
< / body>
< / html>
1.2.2.3 通过 HTML5 新增的方法获取
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< / head>
< body>
< div class = "box" > 盒子1 < / div>
< div class = "box" > 盒子2 < / div>
< div id= "nav" >
< ul>
< li> 首页< / li>
< li> 产品< / li>
< / ul>
< / div>
< script>
var boxs = document. getElementsByClassName ( 'box' ) ;
console. log ( boxs) ;
var firstBox = document. querySelector ( '.box' ) ;
console. log ( firstBox) ;
var nav = document. querySelector ( '#nav' ) ;
console. log ( nav) ;
var li = document. querySelector ( 'li' ) ;
console. log ( li) ;
var allBox = document. querySelectorAll ( '.box' ) ;
console. log ( allBox) ;
var lis = document. querySelectorAll ( 'li' ) ;
console. log ( lis) ;
< / script>
< / body>
< / html>
1.2.2.4 获取body 元素/获取html 元素
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< / head>
< body>
< script>
var bodyEle = document. body;
console. log ( bodyEle) ;
console. dir ( bodyEle) ;
var htmlEle = document. documentElement;
console. log ( htmlEle) ;
< / script>
< / body>
< / html>
1.2.3 事件是有三部分组成(事件源 事件类型 事件处理程序)
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< / head>
< body>
< button id= "btn" > 唐伯虎< / button>
< script>
var btn = document. getElementById ( 'btn' ) ;
btn. onclick = function ( ) {
alert ( '点秋香' ) ;
}
< / script>
< / body>
< / html>
1.2.4 innerText和innerHTML的区别
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< / head>
< body>
< div> < / div>
< p>
我是文字
< span> 123 < / span>
< / p>
< script>
var div = document. querySelector ( 'div' ) ;
div. innerHTML = '<strong>今天是:</strong> 2019' ;
var p = document. querySelector ( 'p' ) ;
console. log ( p. innerText) ;
console. log ( p. innerHTML) ;
< / script>
< / body>
< / html>
1.2.5 操作元素之修改元素属性
1.2.5.1 操作常见元素属性
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< style>
img {
width: 300 px;
}
< / style>
< / head>
< body>
< button id= "ldh" > 刘德华< / button>
< button id= "zxy" > 张学友< / button> < br>
< img src= "images/ldh.jpg" alt= "" title= "刘德华" >
< script>
var ldh = document. getElementById ( 'ldh' ) ;
var zxy = document. getElementById ( 'zxy' ) ;
var img = document. querySelector ( 'img' ) ;
zxy. onclick = function ( ) {
img. src = 'images/zxy.jpg' ;
img. title = '张学友思密达' ;
}
ldh. onclick = function ( ) {
img. src = 'images/ldh.jpg' ;
img. title = '刘德华' ;
}
< / script>
< / body>
< / html>
1.2.5.2 操作表单元素属性
<input>/<select>/<textarea>//<datalist>/<keygen>/<output>
特殊:<button></button>改内容用innerHTML,因为没有value属性。
1.2.5.2.1 设置表单元素属性
type、value、checked、selected、disabled
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
</ head>
< body>
< button> 按钮</ button>
< input type = " text" value = " 输入内容" >
< script>
var btn = document. querySelector ( 'button' ) ;
var input = document. querySelector ( 'input' ) ;
btn. onclick = function ( ) {
input. value = '被点击了' ;
this . disabled = true ;
}
</ script>
</ body>
</ html>
1.2.5.2.2 仿京东显示隐藏密码
点击按钮将密码框切换为文本框,并可以查看密码明文
1 核心思路: 点击眼睛按钮,把密码框类型改为文本框就可以看见里面的密码
2 一个按钮两个状态,点击一次,切换为文本框,继续点击一次切换为密码框
3 算法:利用一个flag变量,来判断flag的值,如果是1 就切换为文本框,flag 设置为0,如果是0 就切换为密码框,flag设置为1
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
< style>
.box {
position : relative;
width : 400px;
border-bottom : 1px solid #ccc;
margin : 100px auto;
}
.box input {
width : 370px;
height : 30px;
border : 0;
outline : none;
}
.box img {
position : absolute;
top : 2px;
right : 2px;
width : 24px;
}
</ style>
</ head>
< body>
< div class = " box" >
< label for = " " >
< img src = " images/close.png" alt = " " id = " eye" >
</ label>
< input type = " password" name = " " id = " pwd" >
</ div>
< script>
var eye = document. getElementById ( 'eye' ) ;
var pwd = document. getElementById ( 'pwd' ) ;
var flag = 0 ;
eye. onclick = function ( ) {
if ( flag == 0 ) {
pwd. type = 'text' ;
eye. src = 'images/open.png' ;
flag = 1 ;
} else {
pwd. type = 'password' ;
eye. src = 'images/close.png' ;
flag = 0 ;
}
}
</ script>
</ body>
</ html>
1.2.6 操作元素样式属性
1. element.style 行内样式操作
2. element.className 类名样式操作
1.JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor
2.JS 修改 style 样式操作,产生的是行内样式,CSS 权重比较高
1.2.6.1 element.style(行内样式操作)
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
< style>
div {
width : 200px;
height : 200px;
background-color : pink;
}
</ style>
</ head>
< body>
< div> </ div>
< script>
var div = document. querySelector ( 'div' ) ;
div. onclick = function ( ) {
this . style. backgroundColor = 'purple' ;
this . style. width = '250px' ;
}
</ script>
</ body>
</ html>
1.2.6.1.1 显示隐藏文本框内容
当鼠标点击文本框时,里面的默认文字隐藏,当鼠标离开文本框时,里面的文字显示
1 首先表单需要2个新事件,获得焦点 onfocus 失去焦点 onblur
2 如果获得焦点, 判断表单里面内容是否为默认文字,如果是默认文字,就清空表单内容
3 如果失去焦点, 判断表单内容是否为空,如果为空,则表单内容改为默认文字
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
< style>
input {
color : #999;
}
</ style>
</ head>
< body>
< input type = " text" value = " 手机" >
< script>
var text = document. querySelector ( 'input' ) ;
text. onfocus = function ( ) {
if ( this . value === '手机' ) {
this . value = '' ;
}
this . style. color = '#333' ;
}
text. onblur = function ( ) {
if ( this . value === '' ) {
this . value = '手机' ;
}
this . style. color = '#999' ;
}
</ script>
</ body>
</ html>
1.2.6.1.2 关闭淘宝二维码案例
当鼠标点击二维码关闭按钮的时候,则关闭整个二维码。
1 核心思路: 利用样式的显示和隐藏完成, display:none 隐藏元素 display:block 显示元素
2 点击按钮,就让这个二维码盒子隐藏起来即可
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
< style>
.box {
position : relative;
width : 74px;
height : 88px;
border : 1px solid #ccc;
margin : 100px auto;
font-size : 12px;
text-align : center;
color : #f40;
}
.box img {
width : 60px;
margin-top : 5px;
}
.close-btn {
position : absolute;
top : -1px;
left : -16px;
width : 14px;
height : 14px;
border : 1px solid #ccc;
line-height : 14px;
font-family : Arial, Helvetica, sans-serif;
cursor : pointer;
}
</ style>
</ head>
< body>
< div class = " box" >
淘宝二维码
< img src = " images/tao.png" alt = " " >
< i class = " close-btn" > ×</ i>
</ div>
< script>
var btn = document. querySelector ( '.close-btn' ) ;
var box = document. querySelector ( '.box' ) ;
btn. onclick = function ( ) {
box. style. display = 'none' ;
}
</ script>
</ body>
</ html>
1.2.6.1.3 循环精灵图
可以利用 for 循环设置一组元素的精灵图背景
1 首先精灵图图片排列有规律的
2 核心思路: 利用for循环 修改精灵图片的 背景位置 background-position
3 剩下的就是考验你的数学功底了
4 让循环里面的 i 索引号 * 44 就是每个图片的y坐标
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
< style>
* {
margin : 0;
padding : 0;
}
li {
list-style-type : none;
}
.box {
width : 250px;
margin : 100px auto;
}
.box li {
float : left;
width : 24px;
height : 24px;
background-color : pink;
margin : 15px;
background : url(images/sprite.png) no-repeat;
}
</ style>
</ head>
< body>
< div class = " box" >
< ul>
< li> </ li>
< li> </ li>
< li> </ li>
< li> </ li>
< li> </ li>
< li> </ li>
< li> </ li>
< li> </ li>
< li> </ li>
< li> </ li>
< li> </ li>
< li> </ li>
</ ul>
</ div>
< script>
var lis = document. querySelectorAll ( 'li' ) ;
for ( var i = 0 ; i < lis. length; i++ ) {
var index = i * 44 ;
lis[ i] . style. backgroundPosition = '0 -' + index + 'px' ;
}
</ script>
</ body>
</ html>
1.2.6.2 通过className更改元素样式(类名样式操作)
1 如果样式修改较多,可以采取操作类名方式更改元素样式。
2 class因为是个保留字,因此使用className来操作元素类名属性
3 className 会直接更改元素的类名,会覆盖原先的类名。
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
< style>
div {
width : 100px;
height : 100px;
background-color : pink;
}
.change {
background-color : purple;
color : #fff;
font-size : 25px;
margin-top : 100px;
}
</ style>
</ head>
< body>
< div class = " first" > 文本</ div>
< script>
var test = document. querySelector ( 'div' ) ;
test. onclick = function ( ) {
this . className = 'first change' ;
}
</ script>
</ body>
</ html>
1.2.6.2.1 仿新浪注册页面
用户如果离开密码框,里面输入个数不是6~16,则提示错误信息,否则提示输入正确信息
1 首先判断的事件是表单失去焦点 onblur
2 如果输入正确则提示正确的信息颜色为绿色小图标变化
3 如果输入不是6到16位,则提示错误信息颜色为红色 小图标变化
4 因为里面变化样式较多,我们采取className修改样式
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
< style>
div {
width : 600px;
margin : 100px auto;
}
.message {
display : inline-block;
font-size : 12px;
color : #999;
background : url(images/mess.png) no-repeat left center;
padding-left : 20px;
}
.wrong {
color : red;
background-image : url(images/wrong.png) ;
}
.right {
color : green;
background-image : url(images/right.png) ;
}
</ style>
</ head>
< body>
< div class = " register" >
< input type = " password" class = " ipt" >
< p class = " message" > 请输入6~16位密码</ p>
</ div>
< script>
var ipt = document. querySelector ( '.ipt' ) ;
var message = document. querySelector ( '.message' ) ;
ipt. onblur = function ( ) {
if ( this . value. length < 6 || this . value. length > 16 ) {
message. className = 'message wrong' ;
message. innerHTML = '您输入的位数不对要求6~16位' ;
} else {
message. className = 'message right' ;
message. innerHTML = '您输入的正确' ;
}
}
</ script>
</ body>
</ html>
1.2.7 排他思想(算法)
如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法:
1 所有元素全部清除样式(干掉其他人)
2 给当前元素设置样式 (留下我自己)
3 注意顺序不能颠倒,首先干掉其他人,再设置自己
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
</ head>
< body>
< button> 按钮1</ button>
< button> 按钮2</ button>
< button> 按钮3</ button>
< button> 按钮4</ button>
< button> 按钮5</ button>
< script>
var btns = document. getElementsByTagName ( 'button' ) ;
for ( var i = 0 ; i < btns. length; i++ ) {
btns[ i] . onclick = function ( ) {
for ( var i = 0 ; i < btns. length; i++ ) {
btns[ i] . style. backgroundColor = '' ;
}
this . style. backgroundColor = 'pink' ;
}
}
</ script>
</ body>
</ html>
1.2.7.1 表格隔行变色
1 用到新的鼠标事件 鼠标经过 onmouseover 鼠标离开 onmouseout
2 核心思路:鼠标经过 tr 行,当前的行变背景颜色, 鼠标离开去掉当前的背景颜色
3 注意: 第一行(thead里面的行)不需要变换颜色,因此我们获取的是 tbody 里面的行
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
< style>
table {
width : 800px;
margin : 100px auto;
text-align : center;
border-collapse : collapse;
font-size : 14px;
}
thead tr {
height : 30px;
background-color : skyblue;
}
tbody tr {
height : 30px;
}
tbody td {
border-bottom : 1px solid #d7d7d7;
font-size : 12px;
color : blue;
}
.bg {
background-color : pink;
}
</ style>
</ head>
< body>
< table>
< thead>
< tr>
< th> 代码</ th>
< th> 名称</ th>
< th> 最新公布净值</ th>
< th> 累计净值</ th>
< th> 前单位净值</ th>
< th> 净值增长率</ th>
</ tr>
</ thead>
< tbody>
< tr>
< td> 003526</ td>
< td> 农银金穗3个月定期开放债券</ td>
< td> 1.075</ td>
< td> 1.079</ td>
< td> 1.074</ td>
< td> +0.047%</ td>
</ tr>
< tr>
< td> 003526</ td>
< td> 农银金穗3个月定期开放债券</ td>
< td> 1.075</ td>
< td> 1.079</ td>
< td> 1.074</ td>
< td> +0.047%</ td>
</ tr>
< tr>
< td> 003526</ td>
< td> 农银金穗3个月定期开放债券</ td>
< td> 1.075</ td>
< td> 1.079</ td>
< td> 1.074</ td>
< td> +0.047%</ td>
</ tr>
< tr>
< td> 003526</ td>
< td> 农银金穗3个月定期开放债券</ td>
< td> 1.075</ td>
< td> 1.079</ td>
< td> 1.074</ td>
< td> +0.047%</ td>
</ tr>
< tr>
< td> 003526</ td>
< td> 农银金穗3个月定期开放债券</ td>
< td> 1.075</ td>
< td> 1.079</ td>
< td> 1.074</ td>
< td> +0.047%</ td>
</ tr>
< tr>
< td> 003526</ td>
< td> 农银金穗3个月定期开放债券</ td>
< td> 1.075</ td>
< td> 1.079</ td>
< td> 1.074</ td>
< td> +0.047%</ td>
</ tr>
</ tbody>
</ table>
< script>
var trs = document. querySelector ( 'tbody' ) . querySelectorAll ( 'tr' ) ;
for ( var i = 0 ; i < trs. length; i++ ) {
trs[ i] . onmouseover = function ( ) {
this . className = 'bg' ;
}
trs[ i] . onmouseout = function ( ) {
this . className = '' ;
}
}
</ script>
</ body>
</ html> >
1.2.7.2 全选反选
1 点击上面全选复选框,下面所有的复选框都选中(全选)
2 再次点击全选复选框,下面所有的复选框都不中选(取消全选)
3 如果下面复选框全部选中,上面全选按钮就自动选中
4 如果下面复选框有一个没有选中,上面全选按钮就不选中
5 所有复选框一开始默认都没选中状态
全选和取消全选做法: 让下面所有复选框的checked属性(选中状态) 跟随 全选按钮即可
下面复选框需要全部选中, 上面全选才能选中做法: 给下面所有复选框绑定点击事件,每次点击,都
要循环查看下面所有的复选框是否有没选中的,如果有一个没选中的, 上面全选就不选中。
可以设置一个变量,来控制全选是否选中
<!DOCTYPE html>
< html>
< head lang = " en" >
< meta charset = " UTF-8" >
< title> </ title>
< style>
* {
padding : 0;
margin : 0;
}
.wrap {
width : 300px;
margin : 100px auto 0;
}
table {
border-collapse : collapse;
border-spacing : 0;
border : 1px solid #c0c0c0;
width : 300px;
}
th,
td {
border : 1px solid #d0d0d0;
color : #404060;
padding : 10px;
}
th {
background-color : #09c;
font : bold 16px "微软雅黑" ;
color : #fff;
}
td {
font : 14px "微软雅黑" ;
}
tbody tr {
background-color : #f0f0f0;
}
tbody tr:hover {
cursor : pointer;
background-color : #fafafa;
}
</ style>
</ head>
< body>
< div class = " wrap" >
< table>
< thead>
< tr>
< th>
< input type = " checkbox" id = " j_cbAll" />
</ th>
< th> 商品</ th>
< th> 价钱</ th>
</ tr>
</ thead>
< tbody id = " j_tb" >
< tr>
< td>
< input type = " checkbox" />
</ td>
< td> iPhone8</ td>
< td> 8000</ td>
</ tr>
< tr>
< td>
< input type = " checkbox" />
</ td>
< td> iPad Pro</ td>
< td> 5000</ td>
</ tr>
< tr>
< td>
< input type = " checkbox" />
</ td>
< td> iPad Air</ td>
< td> 2000</ td>
</ tr>
< tr>
< td>
< input type = " checkbox" />
</ td>
< td> Apple Watch</ td>
< td> 2000</ td>
</ tr>
</ tbody>
</ table>
</ div>
< script>
var j_cbAll = document. getElementById ( 'j_cbAll' ) ;
var j_tbs = document. getElementById ( 'j_tb' ) . getElementsByTagName ( 'input' ) ;
j_cbAll. onclick = function ( ) {
console. log ( this . checked) ;
for ( var i = 0 ; i < j_tbs. length; i++ ) {
j_tbs[ i] . checked = this . checked;
}
}
for ( var i = 0 ; i < j_tbs. length; i++ ) {
j_tbs[ i] . onclick = function ( ) {
var flag = true ;
for ( var i = 0 ; i < j_tbs. length; i++ ) {
if ( ! j_tbs[ i] . checked) {
flag = false ;
break ;
}
}
j_cbAll. checked = flag;
}
}
</ script>
</ body>
</ html>
1.2.8 自定义属性操作
获取属性值
element.属性 获取内置属性值(元素本身自带的属性)
element.getAttribute(‘属性’); 主要获得自定义的属性 (标准) 我们程序员自定义的属性
设置属性值
element.属性 设置内置属性值
element.setAttribute(‘属性’); 主要设置自定义的属性 (标准)
移除属性
element.removeAttribute('属性');
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
</ head>
< body>
< div id = " demo" index = " 1" class = " nav" > </ div>
< script>
var div = document. querySelector ( 'div' ) ;
console. log ( div. id) ;
console. log ( div. getAttribute ( 'id' ) ) ;
console. log ( div. getAttribute ( 'index' ) ) ;
div. id = 'test' ;
div. className = 'navs' ;
div. setAttribute ( 'index' , 2 ) ;
div. setAttribute ( 'class' , 'footer' ) ;
div. removeAttribute ( 'index' ) ;
</ script>
</ body>
</ html>
1.2.8.1 tab栏切换
当鼠标点击上面相应的选项卡(tab),下面内容跟随变化
1 Tab栏切换有2个大的模块
2 上的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类
名的方式
3 下面的模块内容,会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。
4 规律:下面的模块显示内容和上面的选项卡一一对应,相匹配。
5 核心思路: 给上面的tab_list 里面的所有小li 添加自定义属性,属性值从0开始编号。
6 当我们点击tab_list 里面的某个小li,让tab_con 里面对应序号的 内容显示,其余隐藏(排他
思想)
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
< style>
* {
margin : 0;
padding : 0;
}
li {
list-style-type : none;
}
.tab {
width : 978px;
margin : 100px auto;
}
.tab_list {
height : 39px;
border : 1px solid #ccc;
background-color : #f1f1f1;
}
.tab_list li {
float : left;
height : 39px;
line-height : 39px;
padding : 0 20px;
text-align : center;
cursor : pointer;
}
.tab_list .current {
background-color : #c81623;
color : #fff;
}
.item_info {
padding : 20px 0 0 20px;
}
.item {
display : none;
}
</ style>
</ head>
< body>
< div class = " tab" >
< div class = " tab_list" >
< ul>
< li class = " current" > 商品介绍</ li>
< li> 规格与包装</ li>
< li> 售后保障</ li>
< li> 商品评价(50000)</ li>
< li> 手机社区</ li>
</ ul>
</ div>
< div class = " tab_con" >
< div class = " item" style =" display : block; " >
商品介绍模块内容
</ div>
< div class = " item" >
规格与包装模块内容
</ div>
< div class = " item" >
售后保障模块内容
</ div>
< div class = " item" >
商品评价(50000)模块内容
</ div>
< div class = " item" >
手机社区模块内容
</ div>
</ div>
</ div>
< script>
var tab_list = document. querySelector ( '.tab_list' ) ;
var lis = tab_list. querySelectorAll ( 'li' ) ;
var items = document. querySelectorAll ( '.item' ) ;
for ( var i = 0 ; i < lis. length; i++ ) {
lis[ i] . setAttribute ( 'index' , i) ;
lis[ i] . onclick = function ( ) {
for ( var i = 0 ; i < lis. length; i++ ) {
lis[ i] . className = '' ;
}
this . className = 'current' ;
var index = this . getAttribute ( 'index' ) ;
console. log ( index) ;
for ( var i = 0 ; i < items. length; i++ ) {
items[ i] . style. display = 'none' ;
}
items[ index] . style. display = 'block' ;
}
}
</ script>
</ body>
</ html>
1.2.9 H5自定义属性
自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中
自定义属性获取是通过getAttribute(‘属性’) 获取。
但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性:
1 设置H5自定义属性
H5规定自定义属性data-开头做为属性名并且赋值。
比如 <div data-index=“1”></div>
或者使用 JS 设置
element.setAttribute(‘data-index’, 2)
2 获取H5自定义属性
兼容性获取 element.getAttribute(‘data-index’);
H5新增 element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
</ head>
< body>
< div getTime = " 20" data-index = " 2" data-list-name = " andy" > </ div>
< script>
var div = document. querySelector ( 'div' ) ;
console. log ( div. getAttribute ( 'getTime' ) ) ;
div. setAttribute ( 'data-time' , 20 ) ;
console. log ( div. getAttribute ( 'data-index' ) ) ;
console. log ( div. getAttribute ( 'data-list-name' ) ) ;
console. log ( div. dataset) ;
console. log ( div. dataset. index) ;
console. log ( div. dataset[ 'index' ] ) ;
console. log ( div. dataset. listName) ;
console. log ( div. dataset[ 'listName' ] ) ;
</ script>
</ body>
</ html>
1.2.9.1 节点操作
获取元素通常使用两种方式:
1 利用 DOM 提供的方法获取元素
document.getElementById()
document.getElementsByTagName()
document.querySelector 等
逻辑性不强、繁琐
2 利用节点层级关系获取元素
利用父子兄节点关系获取元素
逻辑性强, 但是兼容性稍差
网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM 中,节点使用 node 来表示。
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问,所有 HTML 元素(节点)均可被修改,也可以创建或删除。
一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。
元素节点 nodeType 为 1/属性节点 nodeType 为 2/ 文本节点 nodeType 为 3 (文本节点包含文字、空格、换行等)
我们在实际开发中,节点操作主要操作的是元素节点
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
</ head>
< body>
< div> 我是div</ div>
< span> 我是span</ span>
< ul>
< li> 我是li</ li>
< li> 我是li</ li>
< li> 我是li</ li>
< li> 我是li</ li>
</ ul>
< div class = " box" >
< span class = " erweima" > ×</ span>
</ div>
< script>
var box = document. querySelector ( '.box' ) ;
console. dir ( box) ;
</ script>
</ body>
</ html>
1.2.9.2 父节点操作
node.parentNode
parentNode 属性可返回某节点的父节点,注意是最近的一个父节点
如果指定的节点没有父节点则返回 null
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
</ head>
< body>
< div> 我是div</ div>
< span> 我是span</ span>
< ul>
< li> 我是li</ li>
< li> 我是li</ li>
< li> 我是li</ li>
< li> 我是li</ li>
</ ul>
< div class = " demo" >
< div class = " box" >
< span class = " erweima" > ×</ span>
</ div>
</ div>
< script>
var erweima = document. querySelector ( '.erweima' ) ;
console. log ( erweima. parentNode) ;
</ script>
</ body>
</ html>
1.2.9.3 子节点操作
1 parentNode.childNodes(标准)
parentNode.childNodes 返回包含指定节点的子节点的集合,该集合为即时更新的集合。
注意:返回值里面包含了所有的子节点,包括元素节点,文本节点等。
如果只想要获得里面的元素节点,则需要专门处理。 所以我们一般不提倡使用childNodes
var ul = document. querySelector(‘ul’);
for(var i = 0; i < ul.childNodes.length;i++) {
if (ul.childNodes[i].nodeType == 1) {
// ul.childNodes[i] 是元素节点
console.log(ul.childNodes[i]);
}
}
2 parentNode.children(非标准)
parentNode.children 是一个只读属性,返回所有的子元素节点。它只返回子元素节点,其余节点不返回 (这个是我们重点掌握的)。
虽然children 是一个非标准,但是得到了各个浏览器的支持,因此我们可以放心使用
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
</ head>
< body>
< div> 我是div</ div>
< span> 我是span</ span>
< ul>
< li> 我是li</ li>
< li> 我是li</ li>
< li> 我是li</ li>
< li> 我是li</ li>
</ ul>
< ol>
< li> 我是li</ li>
< li> 我是li</ li>
< li> 我是li</ li>
< li> 我是li</ li>
</ ol>
< div class = " demo" >
< div class = " box" >
< span class = " erweima" > ×</ span>
</ div>
</ div>
< script>
var ul = document. querySelector ( 'ul' ) ;
var lis = ul. querySelectorAll ( 'li' ) ;
console. log ( ul. childNodes) ;
console. log ( ul. childNodes[ 0 ] . nodeType) ;
console. log ( ul. childNodes[ 1 ] . nodeType) ;
console. log ( ul. children) ;
</ script>
</ body>
</ html>
1.2.9.4 子节点-第一个子元素和最后一个子元素
parentNode.firstChild
firstChild 返回第一个子节点,找不到则返回null。同样,也是包含所有的节点。
parentNode.lastChild
lastChild 返回最后一个子节点,找不到则返回null。同样,也是包含所有的节点。
parentNode.firstElementChild
firstElementChild 返回第一个子元素节点,找不到则返回null。
parentNode.lastElementChild
lastElementChild 返回最后一个子元素节点,找不到则返回null。
实际开发中,firstChild 和 lastChild 包含其他节点,操作不方便,而 firstElementChild 和lastElementChild 又有兼容性问题,那么我们如何获取第一个子元素节点或最后一个子元素节点呢?
解决方案:
1. 如果想要第一个子元素节点,可以使用 parentNode.chilren[0]
2. 如果想要最后一个子元素节点,可以使用 parentNode.chilren[parentNode.chilren.length - 1]
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
</ head>
< body>
< ol>
< li> 我是li1</ li>
< li> 我是li2</ li>
< li> 我是li3</ li>
< li> 我是li4</ li>
< li> 我是li5</ li>
</ ol>
< script>
var ol = document. querySelector ( 'ol' ) ;
console. log ( ol. firstChild) ;
console. log ( ol. lastChild) ;
console. log ( ol. firstElementChild) ;
console. log ( ol. lastElementChild) ;
console. log ( ol. children[ 0 ] ) ;
console. log ( ol. children[ ol. children. length - 1 ] ) ;
</ script>
</ body>
</ html>
1.2.9.5 新浪下拉菜单
1 导航栏里面的li 都要有鼠标经过效果,所以需要循环注册鼠标事件
2 核心原理: 当鼠标经过li 里面的 第二个孩子 ul 显示, 当鼠标离开,则ul 隐藏
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
< style>
* {
margin : 0;
padding : 0;
}
li {
list-style-type : none;
}
a {
text-decoration : none;
font-size : 14px;
}
.nav {
margin : 100px;
}
.nav>li {
position : relative;
float : left;
width : 80px;
height : 41px;
text-align : center;
}
.nav li a {
display : block;
width : 100%;
height : 100%;
line-height : 41px;
color : #333;
}
.nav>li>a:hover {
background-color : #eee;
}
.nav ul {
display : none;
position : absolute;
top : 41px;
left : 0;
width : 100%;
border-left : 1px solid #FECC5B;
border-right : 1px solid #FECC5B;
}
.nav ul li {
border-bottom : 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color : #FFF5DA;
}
</ style>
</ head>
< body>
< ul class = " nav" >
< li>
< a href = " #" > 微博</ a>
< ul>
< li>
< a href = " " > 私信</ a>
</ li>
< li>
< a href = " " > 评论</ a>
</ li>
< li>
< a href = " " > @我</ a>
</ li>
</ ul>
</ li>
< li>
< a href = " #" > 微博</ a>
< ul>
< li>
< a href = " " > 私信</ a>
</ li>
< li>
< a href = " " > 评论</ a>
</ li>
< li>
< a href = " " > @我</ a>
</ li>
</ ul>
</ li>
< li>
< a href = " #" > 微博</ a>
< ul>
< li>
< a href = " " > 私信</ a>
</ li>
< li>
< a href = " " > 评论</ a>
</ li>
< li>
< a href = " " > @我</ a>
</ li>
</ ul>
</ li>
< li>
< a href = " #" > 微博</ a>
< ul>
< li>
< a href = " " > 私信</ a>
</ li>
< li>
< a href = " " > 评论</ a>
</ li>
< li>
< a href = " " > @我</ a>
</ li>
</ ul>
</ li>
</ ul>
< script>
var nav = document. querySelector ( '.nav' ) ;
var lis = nav. children;
for ( var i = 0 ; i < lis. length; i++ ) {
lis[ i] . onmouseover = function ( ) {
this . children[ 1 ] . style. display = 'block' ;
}
lis[ i] . onmouseout = function ( ) {
this . children[ 1 ] . style. display = 'none' ;
}
}
</ script>
</ body>
</ html>
1.2.9.6 兄弟节点
1 node.nextSibling
nextSibling 返回当前元素的下一个兄弟元素节点,找不到则返回null。同样,也是包含所有的节点。
2 node.previousSibling
previousSibling 返回当前元素上一个兄弟元素节点,找不到则返回null。同样,也是包含所有的节点。
3 node.nextElementSibling
nextElementSibling 返回当前元素下一个兄弟元素节点,找不到则返回null。
4 node.previousElementSibling
previousElementSibling 返回当前元素上一个兄弟节点,找不到则返回null。
如何解决兼容性问题 ?
自己封装一个兼容性的函数
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
</ head>
< body>
< div> 我是div</ div>
< span> 我是span</ span>
< script>
var div = document. querySelector ( 'div' ) ;
console. log ( div. nextSibling) ;
console. log ( div. previousSibling) ;
console. log ( div. nextElementSibling) ;
console. log ( div. previousElementSibling) ;
</ script>
</ body>
</ html>
1.2.9.7 创建和添加节点
创建节点
document.createElement('tagName')
添加节点
1 node.appendChild(child)
node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的after 伪元素
2 node.insertBefore(child, 指定元素)
node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before
伪元素。
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
</ head>
< body>
< ul>
< li> 123</ li>
</ ul>
< script>
var li = document. createElement ( 'li' ) ;
var ul = document. querySelector ( 'ul' ) ;
ul. appendChild ( li) ;
var lili = document. createElement ( 'li' ) ;
ul. insertBefore ( lili, ul. children[ 0 ] ) ;
</ script>
</ body>
</ html>
1.2.9.8 简单版发布留言案例
1 核心思路: 点击按钮之后,就动态创建一个li,添加到ul 里面。
2 创建li 的同时,把文本域里面的值通过li.innerHTML 赋值给 li
3 如果想要新的留言后面显示就用 appendChild 如果想要前面显示就用insertBefore
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
< style>
* {
margin : 0;
padding : 0;
}
body {
padding : 100px;
}
textarea {
width : 200px;
height : 100px;
border : 1px solid pink;
outline : none;
resize : none;
}
ul {
margin-top : 50px;
}
li {
width : 300px;
padding : 5px;
background-color : rgb ( 245, 209, 243) ;
color : red;
font-size : 14px;
margin : 15px 0;
}
</ style>
</ head>
< body>
< textarea name = " " id = " " > </ textarea>
< button> 发布</ button>
< ul>
</ ul>
< script>
var btn = document. querySelector ( 'button' ) ;
var text = document. querySelector ( 'textarea' ) ;
var ul = document. querySelector ( 'ul' ) ;
btn. onclick = function ( ) {
if ( text. value == '' ) {
alert ( '您没有输入内容' ) ;
return false ;
} else {
var li = document. createElement ( 'li' ) ;
li. innerHTML = text. value;
ul. insertBefore ( li, ul. children[ 0 ] ) ;
}
}
</ script>
</ body>
</ html>
1.2.9.9 删除节点
node.removeChild() 方法从 DOM 中删除一个子节点,返回删除的节点。`
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
</ head>
< body>
< button> 删除</ button>
< ul>
< li> 熊大</ li>
< li> 熊二</ li>
< li> 光头强</ li>
</ ul>
< script>
var ul = document. querySelector ( 'ul' ) ;
var btn = document. querySelector ( 'button' ) ;
btn. onclick = function ( ) {
if ( ul. children. length == 0 ) {
this . disabled = true ;
} else {
ul. removeChild ( ul. children[ 0 ] ) ;
}
}
</ script>
</ body>
</ html>
1.2.9.10 删除留言案例
1 当我们把文本域里面的值赋值给li 的时候,多添加一个删除的链接
2 需要把所有的链接获取过来,当我们点击当前的链接的时候,删除当前链接所在的li
3 阻止链接跳转需要添加 javascript:void(0); 或者 javascript:;
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
< style>
* {
margin : 0;
padding : 0;
}
body {
padding : 100px;
}
textarea {
width : 200px;
height : 100px;
border : 1px solid pink;
outline : none;
resize : none;
}
ul {
margin-top : 50px;
}
li {
width : 300px;
padding : 5px;
background-color : rgb ( 245, 209, 243) ;
color : red;
font-size : 14px;
margin : 15px 0;
}
li a {
float : right;
}
</ style>
</ head>
< body>
< textarea name = " " id = " " > </ textarea>
< button> 发布</ button>
< ul>
</ ul>
< script>
var btn = document. querySelector ( 'button' ) ;
var text = document. querySelector ( 'textarea' ) ;
var ul = document. querySelector ( 'ul' ) ;
btn. onclick = function ( ) {
if ( text. value == '' ) {
alert ( '您没有输入内容' ) ;
return false ;
} else {
var li = document. createElement ( 'li' ) ;
li. innerHTML = text. value + "<a href='javascript:;'>删除</a>" ;
ul. insertBefore ( li, ul. children[ 0 ] ) ;
var as = document. querySelectorAll ( 'a' ) ;
for ( var i = 0 ; i < as . length; i++ ) {
as [ i] . onclick = function ( ) {
ul. removeChild ( this . parentNode) ;
}
}
}
}
</ script>
</ body>
</ html>
1.2.9.11 节点操作之克隆节点
node.cloneNode() 方法返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点
1 如果括号参数为空或者为 false ,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点。
2 如果括号参数为 true ,则是深度拷贝,会复制节点本身以及里面所有的子节点。
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
</ head>
< body>
< ul>
< li> 1111</ li>
< li> 2</ li>
< li> 3</ li>
</ ul>
< script>
var ul = document. querySelector ( 'ul' ) ;
var lili = ul. children[ 0 ] . cloneNode ( true ) ;
ul. appendChild ( lili) ;
</ script>
</ body>
</ html>
1.2.9.12 动态生成表格案例
1 因为里面的学生数据都是动态的,我们需要js 动态生成。 这里我们模拟数据,自己定义好
数据。 数据我们采取对象形式存储。
2 所有的数据都是放到tbody里面的行里面。
3 因为行很多,我们需要循环创建多个行(对应多少人)
4 每个行里面又有很多单元格(对应里面的数据),我们还继续使用循环创建多个单元格,
并且把数据存入里面(双重for循环)
5 最后一列单元格是删除,需要单独创建单元格。
6 最后添加删除操作,单击删除,可以删除当前行。
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
< style>
table {
width : 500px;
margin : 100px auto;
border-collapse : collapse;
text-align : center;
}
td,
th {
border : 1px solid #333;
}
thead tr {
height : 40px;
background-color : #ccc;
}
</ style>
</ head>
< body>
< table cellspacing = " 0" >
< thead>
< tr>
< th> 姓名</ th>
< th> 科目</ th>
< th> 成绩</ th>
< th> 操作</ th>
</ tr>
</ thead>
< tbody>
</ tbody>
</ table>
< script>
var datas = [ {
name: '魏璎珞' ,
subject: 'JavaScript' ,
score: 100
} , {
name: '弘历' ,
subject: 'JavaScript' ,
score: 98
} , {
name: '傅恒' ,
subject: 'JavaScript' ,
score: 99
} , {
name: '明玉' ,
subject: 'JavaScript' ,
score: 88
} , {
name: '大猪蹄子' ,
subject: 'JavaScript' ,
score: 0
} ] ;
var tbody = document. querySelector ( 'tbody' ) ;
for ( var i = 0 ; i < datas. length; i++ ) {
var tr = document. createElement ( 'tr' ) ;
tbody. appendChild ( tr) ;
for ( var k in datas[ i] ) {
var td = document. createElement ( 'td' ) ;
td. innerHTML = datas[ i] [ k] ;
tr. appendChild ( td) ;
}
var td = document. createElement ( 'td' ) ;
td. innerHTML = '<a href="javascript:;">删除 </a>' ;
tr. appendChild ( td) ;
}
var as = document. querySelectorAll ( 'a' ) ;
for ( var i = 0 ; i < as . length; i++ ) {
as [ i] . onclick = function ( ) {
tbody. removeChild ( this . parentNode. parentNode)
}
}
</ script>
</ body>
</ html>
1.2.9.13 三种创建元素方式区别
document.write()
element.innerHTML
document.createElement()
区别
1 document.write 是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘
2 innerHTML 是将内容写入某个 DOM 节点,不会导致页面全部重绘
3 innerHTML 创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂
4 createElement() 创建多个元素效率稍低一点点,但是结构更清晰
总结:不同浏览器下,innerHTML 效率要比 creatElement 高
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
</ head>
< body>
< button> 点击</ button>
< p> abc</ p>
< div class = " inner" > </ div>
< div class = " create" > </ div>
< script>
var inner = document. querySelector ( '.inner' ) ;
var arr = [ ] ;
for ( var i = 0 ; i <= 100 ; i++ ) {
arr. push ( '<a href="#">百度</a>' ) ;
}
inner. innerHTML = arr. join ( '' ) ;
var create = document. querySelector ( '.create' ) ;
for ( var i = 0 ; i <= 100 ; i++ ) {
var a = document. createElement ( 'a' ) ;
create. appendChild ( a) ;
}
</ script>
</ body>
</ html>
1.2.9.14 innerHTML拼接效率测试
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 效率测试</ title>
</ head>
< body>
</ body>
< script>
function fn ( ) {
var d1 = + new Date ( ) ;
var str = '' ;
for ( var i = 0 ; i < 1000 ; i++ ) {
document. body. innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>' ;
}
var d2 = + new Date ( ) ;
console. log ( d2 - d1) ;
}
fn ( ) ;
</ script>
</ html>
1.2.9.15 innerHTML数组效率测试
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 效率测试</ title>
</ head>
< body>
</ body>
< script>
function fn ( ) {
var d1 = + new Date ( ) ;
var array = [ ] ;
for ( var i = 0 ; i < 1000 ; i++ ) {
array. push ( '<div style="width:100px; height:2px; border:1px solid blue;"></div>' ) ;
}
document. body. innerHTML = array. join ( '' ) ;
var d2 = + new Date ( ) ;
console. log ( d2 - d1) ;
}
fn ( ) ;
</ script>
</ html>
1.2.9.16 createElement效率测试
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 效率测试</ title>
</ head>
< body>
</ body>
< script>
function fn ( ) {
var d1 = + new Date ( ) ;
for ( var i = 0 ; i < 1000 ; i++ ) {
var div = document. createElement ( 'div' ) ;
div. style. width = '100px' ;
div. style. height = '2px' ;
div. style. border = '1px solid red' ;
document. body. appendChild ( div) ;
}
var d2 = + new Date ( ) ;
console. log ( d2 - d1) ;
}
fn ( ) ;
</ script>
</ html>