DOM继承关系图
注意:为了达到各个浏览器之间的兼容问题,下面的Js文件是已经封装好了的方法,下面的某些案例为了避免重复代码,故有的文件则会引用如下几个JS文件.
documentReady.js
/**
* 封装绑定文档加载完成后的事件处理程序
* @callback function 页面文档加载完成后的回调函数
*/
document.myReady = function (callback) {
// jQuery实现文档加载完成后 事件的原理.
// 封装标准浏览器和ie浏览器
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', callback, false);
} else if (document.attachEvent) {
//兼容IE8及以下的浏览器.
document.attachEvent('onreadystatechange', function () {
//当文档的状态变为:interactive表示,文档的dom对象可以进行访问
if (document.readyState == "interactive") {
callback(window.event);
}
});
} else {
window.onload = callback;
}
};EventUtil.js
// 事件封装
(function () {
// 第一个:封装绑定事件的兼容处理
var EventUtil = {
// 1.给谁绑定 | 2.绑定什么事件 | 3.绑定事件的处理程序 | 4.捕获冒泡
addEvent: function (element, type, handler, isCapture) {
if (element.addEventListener) {
// 标准浏览器的绑定事件
// 处理第四个参数,保证isCapture一定是boolean类型的.
isCapture = isCapture ? true : false;
element.addEventListener(type, handler, isCapture);
} else if (element.attachEvent) {
// ie6-8的事件绑定方法
element.attachEvent('on' + type, function () {
// window.event;
return handler.call(element, window.event); // 函数调用模式
// 所有的事件处理程序中 this == event.target || event.srcElement
});
}
},
// 获取事件对象 兼容处理
getEvent: function (e) {
return e || window.event;
},
// 获取事件源对象
getTarget: function (e) {
return e.target || e.srcElement;
},
// 阻止事件冒泡
stopPropagation: function (e) {
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancleBubble = true;
}
},
// 阻止默认行为
preventDefault: function (e) {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
};
// 把我们上面定义的对象赋值给window的属性
window.EventUtil = EventUtil;
})(window || {});Node接口
节点关系
Node接口的方法
节点操作
节点操作案例
动态创建标签的方式及注意事项
元素样式操作
动态添加样式表
动态创建js脚本
案例: 51-根据JSON数据动态创建菜单案例
<!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>50-动态创建菜单案例.html</title>
<script src="../js/documentReady.js"></script>
<script src="../js/EventUtil.js"></script>
</head>
<body>
<ul id="menu">
</ul>
<script>
(function () {
// 数据： 假设数据从后台通过ajax获取
var data = [{
name: '首页',
url: '/index.html',
id: 1
},
{
name: '关于',
url: '/about.html',
id: 2
},
{
name: '产品',
url: '/product.html',
id: 3
},
{
name: '案例',
url: '/usecase.html',
id: 4
},
{
name: '联系',
url: '/contact.html',
id: 5
}
];
// 页面加载完成后动态加载li标签数据。
document.myReady(function () {
loadMenu(); // 初始化菜单数据。
// 初始化事件绑定
// 提前做一些数据处理。
});
// 加载菜单数据。
function loadMenu() {
var menu = document.getElementById('menu');
// 动态创建 li标签。
// {name:'首页', url:'/index.html', id: 1} =>
// <li id="menu1"><a href="/index.html">首页</a></li>
for (var i = 0; i < data.length; i++) {
// 创建li标签节点
var liElment = document.createElement('li');
// 给li设置属性
liElment.setAttribute('id', 'menu' + data[i].id); // 推荐大家使用
// 创建id属性节点 不推荐使用
// var liIdAttrNode = document.createAttribute('id');
// // 给属性节点设置属性值。
// liIdAttrNode.nodeValue = 'menu' + data[i].id;
// // 把属性节点跟标签联系起来。
// liElment.setAttributeNode(liIdAttrNode);
// 创建a标签节点
var menuLinkElement = document.createElement('a');
menuLinkElement.setAttribute('href', data[i].url);
// menuLinkElement.innerHTML = data[i].name; // 所有浏览器都兼容。
if (menuLinkElement.textContent) {
menuLinkElement.textContent = data[i].name; // ie9+ 标准浏览器
} else {
menuLinkElement.innerText = data[i].name; // ie早版本
}
// 把a标签添加到li标签。
liElment.appendChild(menuLinkElement);
// 把li标签添加到ul标签中去
menu.appendChild(liElment);
}
}
})();
</script>
</body>
</html>案例: 52-动态创建菜单的第二种方式
<!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>动态创建菜单的第二种方式</title>
<script src="../js/EventUtil.js"></script>
<script src="../js/documentReady.js"></script>
</head>
<body>
<ul id="menu">
</ul>
<script>
(function () {
// 数据： 假设数据从后台通过ajax获取
var data = [{
name: '首页',
url: '/index.html',
id: 1
},
{
name: '关于',
url: '/about.html',
id: 2
},
{
name: '产品',
url: '/product.html',
id: 3
},
{
name: '案例',
url: '/usecase.html',
id: 4
},
{
name: '联系',
url: '/contact.html',
id: 5
}
];
//页面加载完成后,动态加载菜单数据
document.myReady(function () {
//初始化菜单数据
loadMenuData();
});
function loadMenuData() {
var menu = document.getElementById('menu');
var strArray = [];
// 使用innerHTMl的方式直接拼接字符串
for (var i = 0; i < data.length; i++) {
var str = '<li id="menu' + data[i].id + '" >';
str += '<a href="' + data[i].url + '">' + data[i].name + '</a>';
str += "</li>";
// menu.innerHTML += str; // 每次创建一个li标签都会跟dom进行更新一次.
// 效率太低,不能这么玩,把多次跟dom的交互变成一次.
strArray.push(str);
}
menu.innerHTML = strArray.join("");
}
})();
</script>
</body>
</html>案例: 53-关闭消息框案例
<!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>关闭消息框案例</title>
<style>
#msgBox {
border: 1px solid #aaa;
width: 200px;
height: 200px;
position: absolute;
}
#msgCloseBtn {
width: 50px;
height: 18px;
position: absolute;
right: 5px;
top: 5px;
background: url('../img/close2.png') no-repeat;
cursor: pointer;
}
</style>
<script src="../js/documentReady.js"></script>
<script src="../js/EventUtil.js"></script>
</head>
<body>
<div id="msgBox">
<div id="msgCloseBtn"></div>
点击右上角关闭
</div>
<script>
(function () {
document.myReady(function () {
var msgCloseBtn = document.getElementById('msgCloseBtn');
EventUtil.addEvent(msgCloseBtn,'click', function(e) {
// this == msgCloseBtn
this.parentNode.style.display = 'none';
});
});
})();
</script>
</body>
</html>
HTMLElement元素
HTML元素的大小和位置
HTML元素的大小和位置
元素的scroll宽高
Element.getBoundingClientRect()
表单操作
HTMLInputElement对象的方法和属性
HTMLFormElement接口 表单
案例:55-表单操作
<!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>表单操作</title>
</head>
<body>
<div id="box">
<form id="dd" action="#" method="post">
<input type="text">
<input type="text">
<input type="text" >
<input type="text">
<input type="text">
<input type="button" value="124">
<input type="radio">
<hr>
<input type="submit" value="提交按钮">
<input type="reset" value="重置">
</form>
</div>
<script>
var box = document.getElementById('box');
var inputList = box.getElementsByTagName('input');
inputList[2].onclick = function() {
alert('2');
}
</script>
</body>
</html>
HTMLSelectElement接口
HTMLOptionElement接口
案例:
案例:56-动态创建下拉列表
<!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>54-动态创建下拉列表.html</title>
<script src="../js/documentReady.js"></script>
<script src="../js/EventUtil.js"></script>
</head>
<body>
<select name="sel" id="sel">
</select>
<script>
// 54-动态创建下拉列表.html
(function(){
// 模拟从后台来的数据
var data = [
{name: '北京', value: 1},
{name: '上海', value: 2},
{name: '天津', value: 3},
{name: '重庆', value: 4}
];
document.myReady(function(){
// 初始化下拉列表的数据
initSel(data);
// 给下拉列表绑定change事件
var sel = document.getElementById('sel');
EventUtil.addEvent(sel, 'change', function(e) {
// 拿到 选中的选项的value 和 text
var selOpt = this.options[this.selectedIndex];
console.log(selOpt.value);
console.log(selOpt.text);
// 如果你只要value值。
// 直接通过select标签的value属性就可以拿到
console.log(this.value);
});
});
// 初始化下拉列表
function initSel(data) {
var sel = document.getElementById('sel');
// {name: '北京', value: 1},
// <option value="1">北京 </option>
for(var i = 0; i < data.length; i++) {
// data[i]
var opt = document.createElement('option');
opt.value = data[i].value;
// opt.setAttribute('value', data[i].value);
opt.text = data[i].name;
// if(opt.textContent) {
// opt.textContent = data[i].name;
// } else {
// opt.innerText = data[i].name;
// }
sel.add(opt, null);
// sel.appendChild(opt); // Node接口上的方法
}
}
})();
</script>
</body>
</html>
案例:58-权限选择案例
<!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>权限选择案例</title>
<style>
select {
width: 100px;
height: 200px;
float: left;
}
.box {
float: left;
width: 100px;
text-align: center;
}
.box input {
width: 51px;
}
</style>
<script src="../js/documentReady.js"></script>
<script src="../js/EventUtil.js"></script>
</head>
<body>
<select name="l" id="l" multiple="multiple">
<option value="1">添加商品</option>
<option value="2">读取商品</option>
<option value="3">修改商品</option>
<option value="4">删除订单</option>
<option value="5">用户查看</option>
</select>
<div class="box" id="box">
<input type="button" value=">" dir="add">
<input type="button" value=">>" dir="addAll">
<input type="button" value="<" dir="del">
<input type="button" value="<<" dir="delAll">
</div>
<select name="r" id="r" multiple="multiple"></select>
<script>
(function(){
document.myReady(function(){
// 下面给 四个input按钮绑定事件。
var box = document.getElementById('box');
EventUtil.addEvent(box, 'click', function(e) {
// 拿到事件源对象
var target = EventUtil.getTarget(e);
if(target === this) {
// 说明点击的是当前的div。
return; // 直接结束当前的点击事件处理程序。
}
var dir = target.getAttribute('dir');
var l = document.getElementById('l');
var r = document.getElementById('r');
switch(dir) {
case 'add':
add(false, l, r); // 从左边向右的select标签添加。
break;
case 'addAll':
add(true, l, r); // 添加全部
break;
case 'del':
add(false, r, l);
break;
case 'delAll':
add(true, r, l);
break;
}
});
// 接受三个参数。第一个参数是是否全部进行移动
// 第二个和第三个参数是要处理的select标签
function add(isAll, sel1, sel2) {
// 从sel1的option移动到sel2的里面去。
// 先把所有的需要移动到sel2里面的option都取到array
var tempArray = []; // 放要移动的选项的数组。
for(var i = 0; i < sel1.options.length; i++) {
if(isAll || sel1.options[i].selected) {
tempArray.push(sel1.options[i]);
}
}
// 最后一步，要把要移动的选项放到sel2
while(tempArray.length > 0) {
var opt = tempArray.pop();
// ie8 ：如果选项没有从第一个sel1里面删除，直接追加到sel2里面去的话
// 会报错，参数不匹配。
sel1.remove(opt.index); // option的DOM选项对象都有index属性。就是索引。
sel2.add(opt, null);
}
}
});
})();
</script>
</body>
</html>
案例:59-全选全不选案例演示
<!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>全选和全不选案例</title>
<style>
html, body, div, table, tr, td, th, thead, tbody {
padding: 0;
margin: 0;
}
.tab {
border-collapse: collapse;
line-height: 25px;
border: 1px solid #ccc;
text-align: center;
}
.tab thead {
background-color: #aaa;
}
.tab tbody {
background-color: #eee;
}
.tab tbody tr:nth-child(even) {
background-color: #ddd;
}
.tab td, th {
border: 1px solid #ccc;
padding: 5px;
}
.tab tbody tr:hover {
background-color: #fff;
}
</style>
<script src="../js/documentReady.js"></script>
<script src="../js/EventUtil.js"></script>
</head>
<body>
<table class="tab" id="tab">
<thead>
<tr>
<th>
<input id="ckAll" type="checkbox" name="ckAll" id="ckAll">
</th>
<th>用户名</th>
<th>性别</th>
<th>级别</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox">
</td>
<td>程程</td>
<td>男</td>
<td>10</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>神兽</td>
<td>男</td>
<td>10</td>
</tr>
<tr>
<td>
<input type="checkbox" id="u2">
</td>
<td>男神</td>
<td>女</td>
<td>8</td>
</tr>
<tr>
<td>
<input type="checkbox" name="u3" id="u3">
</td>
<td>梅西</td>
<td>男</td>
<td>5</td>
</tr>
</tbody>
</table>
<script>
(function(){
document.myReady(function(){
var ckAll = document.getElementById('ckAll');
EventUtil.addEvent(ckAll, 'click', function(e){
// this.checked 通过这个属性可以获得当前多选框是否被选中。
var inputArray = document.querySelectorAll('#tab tbody tr td:first-child input');
for(var i = 0; i < inputArray.length; i++) {
inputArray[i].checked = this.checked;
}
});
});
})();
</script>
</body>
</html>
案例:61-许愿墙的实现
<!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>许愿墙的实现</title>
<style>
html, body, div, p {
padding: 0;
margin: 0;
}
body {
background: red url(../img/bg.gif) repeat;
font: 12px/20px Arial, 'simsun', 'Tahoma', sans-serif;
}
.wall {
width: 960px;
height: 627px;
background: red url(../img/content_bg.jpg) no-repeat;
margin: 0 auto;
position: relative;
}
.tip {
width: 227px;
position: absolute;
cursor: move;
}
.tip .tip_h {
height: 68px;
background: url(../img/tip1_h.gif) no-repeat;
position: relative;
}
.tip .tip_c {
height: 60px;
padding: 10px;
background: url(../img/tip1_c.gif) repeat-y;
}
.tip .tip_f {
background: url(../img/tip1_f.gif) no-repeat;
height: 73px;
text-align: right;
line-height: 73px;
padding-right: 20px;
font-size: 14px;
color: #C0F;
}
.tip .tip_h .head-msg {
padding-top: 40px;
padding-left: 10px;
}
.tip .tip_h .closeBtn {
position: absolute;
top: 20px;
right: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="wall" class="wall">
</div>
<script>
var data = [{
"id": 1,
"name": "mahu",
"content": "今天你拿苹果支付了么",
"time": "2016-02-17 00:00:00"
},
{
"id": 2,
"name": "haha",
"content": "今天天气不错，风和日丽的",
"time": "2016-02-18 12:40:00"
},
{
"id": 3,
"name": "jjjj",
"content": "常要说的事儿是乐生于苦",
"time": "2016-03-18 12:40:00"
},
{
"id": 4,
"name": "9.8的妹纸",
"content": "把朋友家厕所拉堵了 不敢出去 掏了半小时了都",
"time": "2016-03-18 12:40:00"
},
{
"id": 5,
"name": "雷锋ii.",
"content": "元宵节快乐",
"time": "2016-02-22 12:40:00"
},
{
"id": 6,
"name": "哎呦哥哥.",
"content": "据说今晚央视的元宵晚会导演和春晚导演是同一个人，真是躲得过初一，躲不过十五。",
"time": "2016-02-22 01:30:00"
},
{
"id": 7,
"name": "没猴哥，不春晚",
"content": "班主任:“小明，你都十二岁了，还是三年级，不觉得羞愧吗”？。小明:“一点也不觉得，老师你都四十多岁了，不也是年年在三年级混日子吗？羞愧的应该是你”。老师:……",
"time": "2016-02-22 01:30:00"
},
{
"id": 8,
"name": "哎呦杰杰.",
"content": "真搞不懂你们地球人，月亮有什么好看的，全是坑，还是对面那哥们好看，",
"time": "2016-02-22 01:30:00"
},
{
"id": 9,
"name": "哎呦哎呦",
"content": "今天哪里的烟花最好看！！？答：朋友圈。。。",
"time": "2016-02-22 02:30:00"
}
];
(function(){
var maxZIndex = 1, // tip中最大的zIndex值。
tipArray = [], // 放我们所有的tip标签
isMove = false, // tip是否进行移动
tempX = 0, // 鼠标一开始点击的位置
tempY = 0,
moveNode = null;// 移动的tip
window.onload = function() {
// 页面加载完成后，加载数据生成tip div并添加到wall上去。
loadTipDivs(data);
// 给所有的tip绑定 mousedown事件，当点击时候，zIndex成最大。
for(var i = 0; i < tipArray.length; i++) {
tipArray[i].onmousedown = function(e) {
maxZIndex += 1;
this.style.zIndex = maxZIndex;
// 记录鼠标点击的位置，以及要进行设置移动的标志位。
isMove = true;
e = e || window.event;
tempX = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
tempY = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop);
moveNode = this; // 把当前的移动的div设置成鼠标按下的对应的tip标签。
};
tipArray[i].onmouseup = function(e) {
isMove = false;
};
// 实现鼠标移动，tip跟着鼠标移动的代码
tipArray[i].onmousemove = function(e) {
e = e || window.event;
var pageX = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
var pageY = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)
var w = pageX - tempX;
var h = pageY - tempY; // 鼠标移动的纵向距离。
if(isMove && this == moveNode) {
// 让div进行移动
this.style.left = parseFloat(this.style.left) + w + 'px';
this.style.top = parseFloat(this.style.top) + h + 'px';
}
tempX = pageX;
tempY = pageY;
};
}
// 给所有的tip的关闭按钮绑定点击事件。
var closeBtns = document.getElementsByTagName('i');
for(var j = 0; j < closeBtns.length; j++) {
closeBtns[j].onclick = function(e) {
this.parentNode.parentNode.style.display = 'none';
};
}
};
// 页面加载完成后，加载数据生成tip div并添加到wall上去。
function loadTipDivs(data) {
var strHTMLArray = [];
for(var i = 0; i < data.length; i++) {
// 拿到每个许愿的数据
var itemData = data[i];
var strHTML = "";
strHTML += '<div class="tip">';
strHTML += '<div class="tip_h">';
strHTML += '<div class="head-msg">第[4555'+ itemData.id +']条 ' + itemData.time + '</div>'
strHTML += '<i class="closeBtn">x</i>';
strHTML += '</div>';
strHTML += '<div class="tip_c">' + itemData.content + '</div>';
strHTML += '<div class="tip_f">'+ itemData.name+'</div>'
strHTML += '</div>';
strHTMLArray.push(strHTML);
}
// 把所有的许愿div放到 wall里面去。
var wall = document.getElementById('wall');
wall.innerHTML += strHTMLArray.join('');
// 遍历wall里面的所有的tip节点，设置一个随机left 和 top值。
for(var i = 0; i < wall.childNodes.length; i++) {
if(wall.childNodes[i].nodeType == 1) {
wall.childNodes[i].style.left = Math.random() *(960 - 227) + 'px';
wall.childNodes[i].style.top = Math.random() *(627 - 221) + 'px';
wall.childNodes[i].style.zIndex = 1;// 默认所有的tip都zIndex 都是1
tipArray.push(wall.childNodes[i]);
}
}
}
})();
</script>
<!-- <div class="tip">
<div class="tip_h">
<div class="head-msg">
第[45551]条 2016-02-17 00:00:00
</div>
<i class="closeBtn">x</i>
</div>
<div class="tip_c">
slfjalfjlasjdfl的拉丝机斐林试剂
slfjalfjlasjdfl的拉丝机斐林试剂
slfjalfjlasjdfl的拉丝机斐林试剂
</div>
<div class="tip_f">
程程
</div>
</div> -->
</body>
</html>
案例:62-tab页签案例
<!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>tab页签案例</title>
<style>
html, body, div, ul, li {
padding: 0;
margin: 0;
}
body {
padding: 100px;
}
ul, ol {
list-style: none;
}
.tab {
width: 500px;
}
/* 设置tab的头部样式 */
.tab .tab-h {
height: 30px;
position: relative;
z-index: 2;
}
.tab .tab-h .tab-h-item {
float: left;
border: 1px solid #ccc;
background-color: #eee;
}
.tab .tab-h .tab-h-item a {
color: #333;
text-decoration: none;
width: 100px;
float: left;
line-height: 28px;
text-align: center;
}
.tab .tab-h li.active {
border-bottom-color: #fff;
background-color: #fff;
}
.tab .tab-b {
border: 1px solid #ccc;
position: relative;
z-index: 1;
top: -1px;
}
.tab .tab-b .tab-b-item {
display: none;
height: 300px;
padding: 10px;
}
.tab .tab-b div.active {
display: block;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab-h">
<ul class="tab-h-list" id="tabHeadList">
<li class="tab-h-item " tabid="1"><a href="javascript:void(0)">产品</a></li>
<li class="tab-h-item active" tabid="2"><a href="javascript:void(0)">用户</a></li>
<li class="tab-h-item" tabid="3"><a href="javascript:void(0)">新闻</a></li>
<li class="tab-h-item" tabid="4"><a href="javascript:void(0)">体育</a></li>
</ul>
</div>
<div class="tab-b" id="tabBody">
<div tabid="1" class="tab-b-item">页签1</div>
<div tabid="2" class="tab-b-item active">页签2</div>
<div tabid="3" class="tab-b-item">页签3</div>
<div tabid="4" class="tab-b-item">页签4</div>
</div>
</div>
<script>
(function(){
window.onload = function(e) {
var tabHeadList = document.getElementById('tabHeadList');
var liMenu = tabHeadList.getElementsByTagName('li');
for(var i = 0; i < liMenu.length; i++) {
liMenu[i].onclick = function(e) {
// 第一获得你点击的 tabid
var tabId = this.getAttribute('tabid');
// 第一：把自己的样式类设置 active，其他的tab页签的 li去掉active
for(var j = 0; j < liMenu.length; j++ ) {
liMenu[j].className = "tab-h-item";
}
this.className = "tab-h-item active";
// 第二：所有的tab-b中的div中 tabid 等于tabId的样式类加上 active
// 其他的div去掉active样式类
var tabBody = document.getElementById('tabBody');
for(var k = 0; k < tabBody.childNodes.length; k++) {
var item = tabBody.childNodes[k];
if(item.nodeType == 1) {
// 判断当前div的 tabId属性是否等于上的tabId的值。
if(item.getAttribute('tabid') == tabId) {
item.className = "tab-b-item active";
} else {
item.className = "tab-b-item";
}
}
}
};
}
};
})();
</script>
</body>
</html>
document总结
案例: 63-文档写入
<!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>文档写入</title>
</head>
<body>
<h1>的十分了解</h1>
<script>
// 文档加载过程中，写入文档，会随着页面一块输出。
document.write("<h2>document.write</h2>");
</script>
<h3>这是最后的标签</h3>
<input type="button" value="打印">
<script>
window.onload = function() {
// 文档加载完成后再写入，会把之前的冲掉。
// document.open();
// document.write('<h1>你好</h1>')
// document.close();
}
</script>
</body>
</html>
源代码下载地址: https://github.com/godlikecheng/JavaScript_complete
上一篇: JS - 事件类型 -04
下一篇: JS - BOM详解 -06