1、总结
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
1. 操作表单元素的属性: 像disabled , checked, selected 这类在html中,只需要属性名的属性, 在JS中,用true/false来控制
2. 操作元素的样式:
行内 : style 元素.style.width = 100 + 'px';
类名 : className 直接赋值会覆盖原来的类名
3. 操作标签的自定义属性
获取 getAttribute('属性名')
设置 setAttribute('属性名', '属性值')
移除 removeAttribute('属性名')
</script>
</body>
</html>
2、节点
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">
文本
<span>span</span>
<!--这是注释-->
</div>
</body>
</html>
3、DOM树
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 一个html页面中的所有内容都是节点
// 当浏览器加在一个html页面的时候,会把页面中的所有内容加载到内存中,按照他们的关联关系组织管理起来.他们的这种关联关系,看起来像一棵树.所以我们把他们在内存中的存储形式称之为是DOM树.
//
// 结论:如果元素在dom树上,会渲染,不在dom树上就不会渲染出来
</script>
</body>
</html>
4、节点的类型的属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">
文本啊
<span>span</span>
<p>
这是p
<span>这是span</span>
</p>
<!--这是注释-->
</div>
<script>
var box = document.getElementById('box');
// console.log(box); //浏览器的优化行为: 当做标签打印在控制台上
// console.dir(box); // 以对象的形式打印在控制台上
//
// box.nodeType //返回节点的类型 标签节点是 1
// box.nodeName //返回的是节点的名称 大写的标签名
// box.nodeValue // 标签节点的nodeValue 永远是null
console.log(box.childNodes); //返回box里面的所有子节点
</script>
</body>
</html>
5、节点层级的属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="wrap">
<p>兄弟</p>
<div id="box">
文本啊
<span>span</span>
<p>
这是p
<span>这是span</span>
</p>
<!--这是注释-->
</div>
<span>span兄弟</span>
</div>
<script>
//主要讨论的就是标签节点的层级(其实就是标签的兄弟,父子关系)
var box = document.getElementById('box');
// 找儿子:
// childNodes 返回所有子节点
// children 返回的所有的子元素(子标签节点)
// console.log(box.childNodes); //返回伪数组,存储了所有的子节点
// console.log(box.children);
// 找父亲:
// parentNode 返回父节点 (父元素)
// console.log(box.parentNode);
// 找兄弟:
// nextElementSibling //返回下一个兄弟元素
// previousElementSibling //返回上一个兄弟元素
// console.log(box.nextElementSibling);
console.log(box.previousElementSibling);
</script>
</body>
</html>
6、操作节点的方法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="p">123</p>
<div id="box">
<span>span</span>
</div>
<script>
// 添加节点的方法:
// 父节点.appendChild(子节点)// 添加子节点 有剪切的效果
var box = document.getElementById('box');
var p = document.getElementById('p');
// box.appendChild(p);
// 父节点.insertBefore(要添加的子节点, 参考的子节点) 有剪切的效果
var span = document.getElementsByTagName('span')[0];
// box.insertBefore(p, span);
//移除节点的方法:
//父节点.removeChild(子节点)
// box.removeChild(span);
// 替换节点
// 父节点.replaceChild(替换的子节点, 被替换的子节点) 有剪切的效果
// box.replaceChild(p, span);
//克隆节点
// 节点.cloneNode(true/false) 不传 就是相当于传了一个false
//console.log(box.cloneNode()); //只克隆节点本身
//console.log(box.cloneNode(true)); //
总结:
添加节点的方法:
appendChild
insertBefore(要插入的节点, 参考节点)
替换节点的方法:
replaceChild(要替换的节点, 被替换的节点) //以上这三个都有剪切的效果
移除节点的方法:
removeCHild
克隆节点的方法:
cloneNode(true/false) 传true就是克隆所有,不传就是只克隆节点本身
</script>
</body>
</html>
7、操作水果的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
select {
width:200px;
height: 200px;
background-color: #33cccc;
font-size: 20px;
}
</style>
</head>
<body>
<select id="all" multiple="multiple">
<option>苹果</option>
<option>橘子</option>
<option>梨</option>
<option>西瓜</option>
<option>水蜜桃</option>
</select>
<input type="button" value=">>" id="btn1">
<input type="button" value="<<" id="btn2">
<input type="button" value=">" id="btn3">
<input type="button" value="<" id="btn4">
<select id="select" multiple="multiple">
</select>
<script>
// 需求: >> 左边都到右边 > 左边选中的到右边
// 1. >> 左边的all里面的option都到右边的select
// 1.1 获取元素
var all = document.getElementById('all');
var select = document.getElementById('select');
var options = all.getElementsByTagName('option');
// var options = all.querySelectorAll('option');
var btn1 = document.getElementById('btn1');
// 1.2 给元素注册事件
btn1.onclick = function(){
// 1.3 在事件处理函数中,让all里面的option 都添加到select里面 appendChild
for(var i = 0; i < options.length; i++) {
select.appendChild(options[i]);
i--; //由于appendChild之后,options中的元素的下标会发生变化,所以i--.是为了让i永远为0
}
// for(var i = 0; i < options.length; ) {
// select.appendChild(options[i]);
// }
// for(var i = 0, leng = options.length; i < leng; i++){
// select.appendChild(options[0]);
// }
// for(;;){
// console.log(1);
// }
//
}
//2. > 左边all选中的option移动到右边select
//2.1 获取元素 btn3
var btn3 = document.querySelector('#btn3');
// 2.2 给btn3注册点击事件
btn3.onclick = function(){
// 2.3 在事件处理函数中,让左边的选中的到右边
// 2.3.1 如何判断哪些选中了? option.selected == true证明选中
for(var i = 0; i < options.length; i++) {
if(options[i].selected){
// 2.3.2 选中的就移动到select里面
select.appendChild(options[i]);
i--;//只有移动了,options中的下标才会发生变化,所以,如果移动了,就让i--.让i保持不变
}
}
}
</script>
</body>
</html>
8、总结二
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 1. 节点类型的属性:
nodeType 标签节点: 1
nodeName 标签节点: 大写的标签名
nodeValue 标签节点: null
// 2. 节点层级的属性:
找儿子:
children 子元素
childNodes 子节点
找父亲:
parentNode 父节点
找兄弟:
nextElementSibling 下一个兄弟元素
previousElementSibling 上一个兄弟元素
// 3. 操作节点的方法:
添加节点:
appendChild() 往后面加 有剪切的效果
insertBefore(新, 旧) 在指定子节点前面加 有剪切的效果
替换节点:
replaceChild(新, 旧) 有剪切的效果
移除节点:
removeChild(子节点)
克隆节点:
cloneNode(true/false) 传true,全部复制, 不传就是只复制节点本身
</script>
</body>
</html>
9、动态创建元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">按钮</button>
<div id="box"></div>
<script>
// innerHTML 可以识别标签 可以用来动态的创建元素,并且直接渲染到了页面上
// var box = document.getElementById('box');
box.innerHTML = '<span>这是一个span</span>';
//
document.createElement('标签名') //专门用来创建元素, 返回一个新的元素,但是这个元素不在dom树上
// var p = document.createElement('p');
//console.log(p);
// box.appendChild(p);
// document.write('html形式的字符串') ; //这个方法只能用document调用
// document.write('<h1>doucment.write加上来的</h1>'); // 直接写在script里面,不会覆盖原来的内容
// var btn = document.getElementById('btn');
// btn.onclick = function(){
// document.write('<h1>点击之后添加的</h1>'); //放大事件函数里面,会覆盖原来的内容
// }
</script>
</body>
</html>
10、动态创建列表案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn"> 点击按钮,假装去服务器拿数据</button>
<div id = "container">
</div>
<script>
var arr = ['html', 'css', 'es5.0js', 'dom']
//需求: 点击按钮,根据arr的数据,动态的创建无序列表,之后,每
// 1. 根据arr的数据,动态的创建无序列表
// 1.1 获取元素 btn container
var btn = document.getElementById('btn');
var container = document.getElementById('container');
// 1.2 给按钮注册点击事件
btn.onclick = function(){
// 1.3 在事件处理函数中,根据arr创建无序列表 innerHTML
// container.innerHTML = '<ul><li>html</li><li>css</li><li>es5.0js</li><li>dom</li></ul>';
// 1.3.1 根据arr的数据,把字符串拼出来
var str = '<ul>';
for(var i = 0; i < arr.length; i++) {
str += '<li>'+arr[i]+'</li>';
}
str += '</ul>';
console.log(str);
// 1.3.2 直接赋值即可
container.innerHTML = str;
// 2. 鼠标移入到li,当前li高亮
// 2.1 获取元素
var lis = document.getElementsByTagName('li');
// 2.2 给每一个li注册mouseover事件
for(var i = 0; i < lis.length; i++) {
lis[i].onmouseover = fn;
}
function fn(){
// 2.3 在事件处理函数中
// 2.3.1 先排他
for(var i = 0; i < lis.length; i++) {
lis[i].style.backgroundColor = '';
}
// 2.3.2 让当前的里高亮 this
this.style.backgroundColor = '#ccc';
}
}
</script>
</body>
</html>
11、动态创建表格
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<!--<table border="1px" width="300px">-->
<!--<thead style="background-color: #ccc">-->
<!--<tr>-->
<!--<th>haha </th>-->
<!--<th>hehe </th>-->
<!--</tr>-->
<!--</thead>-->
<!--<tbody align="center">-->
<!--<tr>-->
<!--<td>123</td>-->
<!--<td>345</td>-->
<!--</tr>-->
<!--</tbody>-->
<!--</table>-->
</body>
<script>
// 数据行 中的数据
var bodyData = [
{name: 'zs', subject: '语文', score: 100},
{name: 'ls', subject: '数学', score: 80},
{name: 'sdb', subject: '体育', score: 0},
{name: 'gw', subject: '英语', score: 59},
{name: 'bzr', subject: '数学', score: 50}
];
// 表头数据
var headData = ['姓名', '科目', '成绩', '操作'];
//需求:根据数据动态创建表格, 还要增加一个删除的操作
// 1. 先创建表格的基本机构
// 1.1. 创建table标签
var table = document.createElement('table');
table.border = '1px';
table.width = '500px';
// 1.2 创建thead
var thead = document.createElement('thead');
thead.style.backgroundColor = '#ccc';
table.appendChild(thead);
// 1.3 创建tbody
var tbody = document.createElement('tbody');
tbody.align = 'center';
table.appendChild(tbody);
// 2. 完成表头部分
// 2.1 创建表头中的tr
var tr = document.createElement('tr');
thead.appendChild(tr);
// 2.2 根据headdata中的数据,创建tr中的th
for(var i = 0; i < headData.length; i++) {
var th = document.createElement('th');
th.innerText = headData[i];
tr.appendChild(th);
}
//3. 完成表体
// 3.1.根据bodyData中对象的个数,决定创建多少个tr
for(var i = 0; i < bodyData.length; i++) {
var tr = document.createElement('tr');
//3.2 创建每一个tr的td td的个数是对象中键值对的个数 + 1
for(var key in bodyData[i]){
var td = document.createElement('td');
td.innerText = bodyData[i][key];
tr.appendChild(td);
}
// 加上后面的那个td
var td = document.createElement('td');
//删除是一个a元素
var a = document.createElement('a');
a.innerText = '删除';
a.href = ''; //没有href属性,a元素就相当于一个普通的标签.没有超链接的效果
td.appendChild(a);
tr.appendChild(td);
tbody.appendChild(tr);
//给每一个a注册点击事件,在事件处理函数中,删除当前行
a.onclick = fn;
}
// 删除点击时,调用的函数
function fn(){
// 删除当前行 tbody.removeChild(tr)
// console.log(this.parentNode.parentNode);
var result = confirm('您确定要删除吗?');
if(result){
tbody.removeChild(this.parentNode.parentNode);
}
return false;
}
//最后把table加到dom树上,这样就只会渲染一次
document.body.appendChild(table);
//for..in
var obj = {
name: 'zs',
age: 18,
score : 100
}
for(var key in obj){
// console.log(key);
// console.log(obj[]);
// console.log(obj['age']); //中括号语法里面,允许写字符串/数字/变量
// console.log(obj.key); //.后面写什么就去对象中找对应的那个属性
console.log(obj[key]);
}
</script>
</html>
12、扩展
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">
<!--注释--><p id="p">p</p><span></span>
<div>div</div>
</div>
<script>
//其他节点层级的属性
// 其他找儿子的:
// firstChild 第一个子节点
// firstElementChild 第一个子元素
// lastChild 最后一个子节点
// lastElementChild 最后一个子元素
// console.log(box.firstChild);
// console.log(box.lastChild);
// console.log(box.firstElementChild);
// console.log(box.lastElementChild);
// console.log(p.nextSibling); //下一个兄弟节点
// console.log(p.previousSibling); //上一个兄弟节点
</script>
</body>
</html>
13、效率测试
（1）效率测试-1.html
<!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++ ) {
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>
（2）效率测试-2.html
<!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>');
}
// console.log(array);
document.body.innerHTML = array.join('');
var d2 = +new Date();
console.log( d2 - d1 );
}
fn();
</script>
</html>
（3）效率测试-3
<!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>
