7. 节点操作
7.1 节点的属性
节点分类：
- 标签节点
- 文本节点
- 属性节点
- 注释节点
节点常用的属性：
-
nodeType：节点的类型 -
nodeName：节点名称 -
nodeValue：节点值
常见的节点类型：
- 标签节点：
1 - 文本节点：
3 - 注释节点：
8 - 属性节点：
2
示例代码：判断节点类型 [16-节点的属性.html]
1
2
3
1
2
3
7.2 节点层次
7.2.1 孩子节点
-
childNodes:获取所有的孩子节点（包括了元素节点和其他很多类型的节点，基本不常用） -
children:获取所有的子元素（用途很广泛）ie6/7/8会有兼容性 如果有注释 会算在内 -
firstChild第一个节点 -
firstElementChild第一个子元素 有兼容性问题 可以封装一个兼容性方法 -
lastChild最后一个节点 -
lastElementChild最后一个子元素 有兼容性问题 可以封装一个兼容性方法
示例代码：隔行变色 [16-获取孩子元素-隔行变色.html]
1
2
3
1
2
3
示例代码：菜单切换 [17-获取孩子元素-菜单切换.html]
效果图：
javascript:void(0)的作用：
-
javascript:是伪协议，表示url的内容通过javascript执行。 -
void(0)表示不作任何操作，这样会防止链接跳转到其他页面。 - 让页面不跳转，
JavaScript:void(0)是最通用的方式。
children和getElementByTagName的区别：
-
children找子元素，不管是什么标签 -
TagName找的是页面中，是该标签名的标签
7.2.2 兄弟节点
-
nextSibling:下一个兄弟节点 -
nextElementSibling:下一个兄弟元素（IE678不兼容） -
previousSibling上一个兄弟节点 -
previousElementSibling上一个兄弟元素 有兼容性问题 可以封装一个兼容性方法
示例代码：表单验证 [18-兄弟节点-表单验证.html]
效果图：
键盘事件：
-
onkeydown: 当键盘按下的时候触发 -
onkeyup: 当键盘弹起的时候触发
7.2.3 父节点
-
parentNode:父节点 没有兼容性问题
8. 样式操作
标签不仅可以通过class属性操作样式，还可以通过style属性操作样。同样的DOM对象可以通过className操作样式，也可以通过style属性操作样。
8.1 样式操作注意点
-
style属性是一个对象 -
style这个对象中属性值都是字符串格式 - 标签中
style属性有哪些样式名，在style这个对象中就有对应的属性名。 - 如果获取的时候有单位，设置的时候也要有单位
- 标签中有一些属性带了
-，比如background-color,到了style对象中，变成了驼峰命名法，backgroundColor（因为-在js中不是一个合法的标识符） -
DOM中的style属性只能获取和设置行内样式，在类样式中定义的样式通过style获取不到。
示例代码：改变div宽度和背景 [19-改变div宽度和背景]
效果图：
8.2 样式操作案例
1、模仿看电影时页面开关灯案例： [20-样式操作-开关灯案例.html]
效果图：
2、百度换肤案例： [21-样式操作-百度换肤案例.html]
效果图：
3、点击隐藏淘宝二维码 [22-样式操作-淘宝二维码.html]
×
效果图：
4、当前文本框高亮显示 [23-样式操作-当前文本框高亮显示.html]
效果图：
5、表格隔行变色(鼠标经过触发)效果： [24-样式操作-表格隔行变色.html]
序号
英雄
技能
1
芈月
永生之血
2
貂蝉
语·花印
3
大乔
川流不息
4
甄姬
凝泪成冰
效果图：
6、修改不透明度 [25-样式操作-不透明度.html]
你看不见我！
效果图：
7、随机设置盒子的位置 [26-样式操作-随机盒子位置.html]
效果图：
8、点击盒子增加对应盒子的层级： [27-样式操作-点击增加层级.html]
效果图：
9、随机生成位置与层级，并且层级可点： [28-样式操作-获取随机位置、层级随机.html]
效果图：
10、手风琴 [29-样式操作-手风琴.html]
效果图：
11、高亮显示 [30-样式操作-高亮显示.html]
-
-
-
-
-
-
效果图：../
9. 动态创建元素
9.1 克隆节点
语法：var newNode = node.cloneNode(deep)
功能：在内存中克隆一份节点
参数：deep
-
false：默认值：是浅复制，只会复制标签，节点本身，不会复制节点的孩子。 -
true:深度复制，会复制标签，还会复制标签的所有内容
注意：
- 克隆出来的节点跟原来的节点没有关系了，修改了也不会相互影响。
- 如果克隆的节点带了
id，我们需要给id重新设置一个值，不让id冲突
示例代码： [31-克隆节点.html]
我是子元素
这里是p标签
9.2 添加节点
9.2.1 appendChild
语法：parent.appendChild(newChild);
-
parent:调用者，父节点来调用 -
newChild:需要添加的那个孩子。
作用：把newChild添加到parent的孩子的最后面。
如果添加的是页面中本来就存在的元素，是一个剪切的效果，原来的就不在了。
示例代码： [32-添加节点.html]
我是子元素
这里是p标签
这里是i标签
效果图：
9.2.2 insertBefore
语法：parent.insertBefore(newChild, refChild);
-
parent:必须要父节点来调用 -
newChild：需要添加的那个节点 -
refChild:添加到哪一个节点的前面。
示例代码： [33-添加节点-insertBefore.html]
- 大乔
- 小乔
- 阿珂
- 甄姬
女娲
露娜
妲己
效果图：
9.3 创建节点
9.3.1 document.write(基本不用)
- 可以生成新的节点，但是不推荐使用。如果页面已经加载完成了，你还是用
document.write写内容的话，会把之前的页面给覆盖掉 - 原理：页面从上往下加载的时候，会开启一个文档流，当页面加载完，文档流就会关闭。
-
document.write的本意就是在文档流上写入内容。如果页面没加载完成，文档流还是开着的，document.write直接在这个文档流上写东西 - 如果页面加载完成了，还是用
document.write写东西，会重新开启一个新的文档流，往新的文档流上写东西，旧的文档流就被新的文档流覆盖了。
示例代码： [34-创建节点-document.write.html]
呵呵呵
哈哈哈
嘻嘻嘻
效果图：
9.3.2 innerHTML
innerHTML也可以创建节点。innerHTML创建节点的时候有一个特点，如果原来有内容的话，使用innerHTML会把原先的内容给干掉。
示例代码： [35-创建节点-innerHTML.html]
慎用：很容易出现效率问题，效率不高，多次使用，每次创建都会获取到之前的，然后拼接新添加的，再将原来的全部重新替换掉。
效果图：
9.3.3 createElement
语法：var element = document.createElement("tagName");
作用：在内存里面创建了一个节点
返回：一个元素
示例代码： [36-创建节点-createElement.html]
用途非常的广泛,不会影响效率。
效果图：
9.4 删除节点
语法：parent.removeChild(child);
功能：由父盒子调用，删除里面的一个子元素。
示例代码： [37-删除节点.html]
我是第一句话
我是第二句话
效果图：
removeChild 与 display:"none"的区别
-
removeChild删除的是一个节点，你删除了，在页面中就不会再有这个节点了 -
display:"none"只是隐藏一个元素，元素隐藏了，在页面中看不见，但是节点还是存在页面中的
9.5 动态创建元素综合练习
1、选好友案例： [38-动态创建元素-选好友.html]
效果图：
2、动态创建新闻列表： [39-动态创建元素-新闻列表.html]
效果图：
3、微博发布案例： [40-动态创建元素-微博发布.html]
微博发布
效果图：
4、许愿墙案例(一)： [41-动态创建元素-许愿墙(一).html]
第[49568]条 2016-02-17 22:51:52
×
每天都要被自己给帅醒，希望以后越来越帅！！！
成真的人
效果图：
5、许愿墙案例(二)： [42-动态创建元素-许愿墙(二).html]
上面的案例每个便利贴里面的文字用户信息都是一样的，并且是通过克隆节点完成的，那我们能不能动态创建呢，并且获取不同的信息
效果图：
6、随机选中英雄案例： [43-动态创建元素-随机选中.html]
效果图：
7、动态创建表格： [44-动态创建元素-动态创建表格.html]
封装一个css文件：createTable.css
/*
* @Author: Levi丶lxh
* @Date: 2017-12-07 14:45:09
*/
/* 封装了一个createTable.css 文件 */
.my_table {
margin: 100px auto;
width: 800px;
border: 1px solid #000;
border-collapse: collapse;
}
.my_table th {
border: 1px solid #000;
height: 30px;
background-color: #C4E3CB;
}
.my_table td {
border: 1px solid #000;
height: 30px;
text-align: center;
background: #F4F9F4;
}
.my_table a {
text-decoration: none;
color: #FF5C5C;
}封装一个用于创建表格的js文件：createTable.js
/*
* @Author: Levi丶lxh
* @Date: 2017-12-07 14:07:54
*/
// 封装了一个createTable.js 文件
function createTable(element, json) {
// 创建table 添加到 body
var table = document.createElement("table");
// 添加类名 my_table
table.className = "my_table";
// 添加到element中
element.appendChild(table);
// 创建thead，添加到 table
var thead = document.createElement("thead");
table.appendChild(thead);
// 创建tr 添加到thead中
var tr = document.createElement("tr");
thead.appendChild(tr);
// 根据数据的长度创建th，并添加到tr里
var header = json.header;
for (var i = 0; i < header.length; i++) {
var th = document.createElement("th");
tr.appendChild(th);
th.innerHTML = header[i];
}
// 单独再添加一个按钮
var th = document.createElement("th");
tr.appendChild(th);
th.innerHTML = "操作";
// 创建 tbody 添加到 table
var tbody = document.createElement("tbody");
table.appendChild(tbody);
// tbody.className = "my_tbody";
// 根据 json的datas.length创建tr
var datas = json.datas;
for (var i = 0; i < datas.length; i++) {
var tr = document.createElement("tr");
tbody.appendChild(tr);
// 根据 datas[i] 创建td
for (key in datas[i]) {
var td = document.createElement("td");
tr.appendChild(td);
td.innerHTML = datas[i][key];
}
//创建 一个操作按钮
var td = document.createElement("td");
tr.appendChild(td);
td.innerHTML = "删除";
// 给a标签注册点击事件
td.children[0].onclick = function() {
// 点击这个删除按钮的时候，删除这一行 tr
tbody.removeChild(this.parentNode.parentNode);
}
}
return table;
}页面主体部分
动态创建表格
效果图：
8、百度搜索提示案例： [45-动态创建元素-仿百度搜索提示.html]
效果图：
上一篇：JavaScript 基础知识 - DOM篇(一)
下一篇：JavaScript 基础知识 - BOM篇