DOM
DOM概述
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
DOM树
DOM又称为文档树模型, 因为整个HTML文档是一个树形的结构。
文档 ：一个页面就是一个文档，DOM 中使用 document 表示
元素：页面中的所有标签都是元素，DOM 中使用 element 表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示
DOM 把以上内容都看做是对象
获取网页元素
根据id获取
document.getElementById()
功能：通过id 获取元素
document : 文档对象
get : 得到
element:元素
by:通过
id:id值
参数 : 字符串类型的id
返回值 : 一个元素 一个对象
var div = document.getElementById('div');
console.dir(div);
注：
console.log打印一个元素的时候，是以标签的形式进行展示的
console.dir打印一个元素的时候，是以对象的形式进行展示的（对象是有类型的）
DOM中，页面标签的属性和DOM对象的属性是一一对应的，因此我们可以通过修改DOM对象的属性来修改标签的属性。
如果id不存在,返回值为null
根据标签名获取
document.getElementsByTagName()
作用 : 根据标签名获取元素
参数：标签名
返回值：伪数组，无论有几个元素，返回都是伪数组
document.getElementsByTagName("tagName");
box.getElementsByTagName("tagName");
//getElementsByTagNameNS 命名空间
var btns = document.getElementsByTagNameNS('*','button');
注：
- 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
- 得到元素对象是动态的
- 如果获取不到元素,则返回为空的伪数组(因为获取不到对象)
根据类名获取
getElementsByClassName
作用 : 根据类名获取元素
参数：字符串类型的类名
返回值：伪数组
document.getElementsByClassName("class")
根据name获取
getElementsByName
作用 : 通过name属性值 获取元素
参数 : name值
返回值 : 伪数组
var ps = document.getElementsByName("aa");
根据css选择器获取（重点）
document.querySelector();
简单选择器 : div .box #box
复杂选择器 : * div,p p.div div p div>p
作用 : 根据css选择器获取
参数：是一个css选择器
如果是类选择器， .demo
如果是id选择器： #aa
//比如:
document.querySelector('#nav');
返回值：只会返回一个对象，如果有很多个，会返回第一个
document.querySelectorAll();
参数：是一个css选择器
返回值：会返回伪数组，不管有多少个，都会返回伪数组
获取特殊元素（body，html）
获取body元素
doucumnet.body // 返回body元素对象
获取html元素
document.documentElement // 返回html元素对象
事件
概述
JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
简单理解： 触发— 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。
事件三要素 :
事件源 + 事件名称 + 事件处理函数
事件源 : 给谁注册事件 ( 按钮 btn )
事件名称 : 注册了什么事件 ( click事件 )
事件处理函数 : 事件触发后要执行的代码(函数形式)
注：事件处理函数并不会立马执行，而是当事件触发的时候才会执行（浏览器会自动调用）
3.基本语法 :
<body>
<button id="btn"></button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('你好吗');
};
</script>
</body>
执行事件的步骤
- 获取事件源
- 注册事件（绑定事件）
- 添加事件处理程序（采取函数赋值形式）
常见的鼠标事件
操作元素
JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。注意以下都是属性
改变元素内容
<body>
<button></button>
<div></div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onclick = function() {
div.innerHTML = getdate(); //今天是2021年3月14日星期日
}
function getdate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
var day = date.getDay();
return ('今天是' + year + '年' + month + '月' + dates + '日' + arr[day]);
}
</script>
</body>
点击按钮 就会修改div里面的内容 即今天是2021年3月14日星期日
innerText 和 innerHTML
1.都是用来获取和设置标签的内容的。
2.innerHTML可以用于获取和设置标签的所有内容，包括标签和文本内容。
3.innerText可以用于获取和设置标签的文本内容，会丢弃掉标签。
4.innerHTML能够识别标签，标签能够生效；innerText只识别文本，标签会被转义。
<body>
<div id="div1"></div><br>
<div id="div2"></div>
<p>
我是文字
<span>
154646
</span>
</p>
<script>
var div1 = document.getElementById('div1');
div1.innerText = '<strong>今年是</strong> 2021年' //<strong>今年是</ strong> 2021年
var div2 = document.getElementById('div2');
div2.innerHTML = '<strong>今年是</strong> 2021年' //今年是2021年
var p = document.querySelector('p')
console.log(p.innerText); //我是文字 154646
console.log(p.innerHTML);
/*
我是文字
<span>
154646
</span>
*/
</script>
</body>
element.innerText
从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉
element.innerHTML
起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行
处理兼容性问题
function getInnerText(element){
if(typeof element.innerText === "string"){
return element.innerText;
} else {
return element.textContent;
}
}
注：innerText是IE提出来的属性，因此低版本的火狐浏览器不支持这个属性。火狐有一个textContent属性，效果跟innerText一样，但是IE678不支持这个属性。
常用元素的属性操作
- innerText、innerHTML 改变元素内容
- src、href
- id、alt、title
修改元素属性
<body>
<button id="ldh"></button>
<button id="zxy"></button>
<img src="./images/ldh.jpg" alt="">
<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>
表单元素的属性操作
利用 DOM 可以操作如下表单元素的属性：
type、value、checked、selected、disabled
<body>
<button></button>
<input type="text" name="" id="" value="你好啊">
<script>
var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.onclick = function() {
//input.innerHTML = 'asdasdasd' 这个是修改普通盒子 如div里面的内容
//表单里面的值 文章内容通过value修改
input.value = 'asdasdasdasdasdasda';
//this指向事件的调用者 btn
this.disabled = true;
}
</script>
</body>
一个案例 仿京东显示密码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
width: 400px;
margin: 100px auto;
border-bottom: 1px solid red;
}
.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>
效果：输入密码后可显示 隐藏密码
样式属性操作
我们可以通过 JS 修改元素的大小、颜色、位置等样式。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 20px;
background-color: green;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div');
div.onclick = function() {
this.style.backgroundColor = 'purple';
this.style.height = '200px'
}
</script>
</body>
通过className修改样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 20px;
background-color: rgb(155, 238, 155);
}
.change {
width: 500px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="fff"></div>
<script>
var div = document.querySelector('div');
div.onclick = function() {
this.className = 'fff change'
}
</script>
</body>
</html>
注意：
- 如果样式修改较多，可以采取操作类名方式更改元素样式。
- class因为是个保留字，因此使用className来操作元素类名属性
- className 会直接更改元素的类名，会覆盖原先的类名。
- 不想覆盖 可以
this.className = 'fff change'
总结
案例
1.换肤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: url('./images/1.jpg') no-repeat center top;
}
.div1 {
width: 820px;
margin: 100px auto;
}
li {
list-style: none;
}
.div1 ul li {
float: left;
width: 200px;
height: 200px;
cursor: pointer;
}
.div1 ul li img {
width: 100%;
}
</style>
</head>
<body>
<div class="div1">
<ul>
<li><img src="./images/1.jpg" alt=""></li>
<li><img src="./images/2.jpg" alt=""></li>
<li><img src="./images/3.jpg" alt=""></li>
<li><img src="./images/4.jpg" alt=""></li>
</ul>
</div>
<script>
var imgs = document.querySelector('.div1').querySelectorAll('img');
for (i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
document.body.style.backgroundImage = 'url(' + this.src + ')'
}
}
</script>
</body>
</html>
效果：点击一张图片 背景（body）就换成对应图片
2.表格隔行换色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 1000px;
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>
// 1.获取元素 获取的是 tbody 里面所有的行
var trs = document.querySelector('tbody').querySelectorAll('tr');
// 2. 利用循环绑定注册事件
for (var i = 0; i < trs.length; i++) {
// 3. 鼠标经过事件 onmouseover
trs[i].onmouseover = function() {
// console.log(11);
this.className = 'bg';
}
// 4. 鼠标离开事件 onmouseout
trs[i].onmouseout = function() {
this.className = '';
}
}
</script>
</body>
</html>
3.全选反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 300px;
margin: 100px auto;
}
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>
// 1. 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
// 获取元素
var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
// 注册事件
j_cbAll.onclick = function() {
// this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked;
}
}
// 2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function() {
// flag 控制全选按钮是否选中
var flag = true;
// 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) {
flag = false;
break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
}
}
j_cbAll.checked = flag;
}
}
</script>
</body>
</html>
4.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>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循环绑定点击事件
for (var i = 0; i < lis.length; i++) {
// 开始给5个小li 设置索引号
lis[i].setAttribute('index', i);
lis[i].onclick = function() {
// 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式
// 干掉所有人 其余的li清除 class 这个类
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
// 留下我自己
this.className = 'current';
// 2. 下面的显示内容模块
var index = this.getAttribute('index');
console.log(index);
// 干掉所有人 让其余的item 这些div 隐藏
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
// 留下我自己 让对应的item 显示出来
items[index].style.display = 'block';
}
}
</script>
</body>
</html>
自定义属性
<body>
<div class="asd" index='d5465'></div>
<script>
//1.获取元素属性值
//element.属性
var div = document.querySelector('div')
console.log(div.className); //asd
//element.getAttribute('属性')
//get 得到 Attribute 属性
//程序员自己添加的属性 成为自定义属性 如 index
console.log(div.getAttribute('index')); //d5465
</script>
</body>
设置属性值
element.属性 = ‘值’ 设置内置属性值。
element.setAttribute('属性', '值');
H5自定义属性
<body>
<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
var div = document.querySelector('div');
// console.log(div.getTime);
console.log(div.getAttribute('getTime'));
div.setAttribute('data-time', 20);
console.log(div.getAttribute('data-index'));
console.log(div.getAttribute('data-list-name'));
// h5新增的获取自定义属性的方法 它只能获取data-开头的
// dataset 是一个集合里面存放了所有以data开头的自定义属性
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>
获取H5自定义属性
- 兼容性获取 element.getAttribute(‘data-index’);
- H5新增 element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持
节点
概述
一般地，节点至少拥有
nodeType（节点类型）
nodeName（节点名称）
nodeValue（节点值）这三个基本属性。
元素节点 nodeType 为 1
属性节点 nodeType 为 2
文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）
我们在实际开发中，节点操作主要操作的是元素节点
节点层级
利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
父级节点
node.parentNode
parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
如果指定的节点没有父节点则返回 null
<body>
<div class="box">
<div class="box1"></div>
</div>
<script>
var box1 = document.querySelector('.box1')
//得到的是离元素最近的父级节点
//如果找不到父节点返回null
console.log(box1.parentNode);
</script>
</body>
子节点
parentNode.childNodes（标准）
parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。
注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。
如果只想要获得里面的元素节点，则需要专门处理。 所以我们一般不提倡使用childNodes
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var ul = document.querySelector('ul');
var lis = document.querySelectorAll('li');
console.log(ul.childNodes); //NodeList(9) 因为包含5个文本节点：换行 和4个元素节点:li
//如果只想获取元素节点
for (var i = 0; i < ul.childNodes.length; i++) {
if (ul.childNodes[i].nodeType == 1) {
// ul.childNodes[i] 是元素节点
console.log(ul.childNodes[i]);
}
}
</script>
</body>
parentNode.children（非标准）
parentNode.children 是一个只读属性，返回所有的子元素节点。
它只返回子元素节点，其余节点不返回 （这个是我们重点掌握的）。
虽然children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var ul = document.querySelector('ul');
var lis = document.querySelectorAll('li');
console.log(ul.children);
// console.log(ul.childNodes); //NodeList(9) 因为包含5个文本节点：换行 和4个元素节点:li
// //如果只想获取元素节点
// for (var i = 0; i < ul.childNodes.length; i++) {
// if (ul.childNodes[i].nodeType == 1) {
// // ul.childNodes[i] 是元素节点
// console.log(ul.childNodes[i]);
// }
// }
</script>
</body>
第一个字节点 最后一个子节点
parentNode.firstChild
firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。
parentNode.lastChild
lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。
parentNode.firstElementChild
firstElementChild 返回第一个子元素节点，找不到则返回null。
parentNode.lastElementChild
lastElementChild 返回最后一个子元素节点，找不到则返回null。
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var ul = document.querySelector('ul');
var lis = document.querySelectorAll('li');
console.log(ul.firstChild);
console.log(ul.lastChild);
console.log(ul.firstElementChild);
console.log(ul.lastElementChild);
</script>
</body>
注意：这两个方法有兼容性问题，IE9 以上才支持。
实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？
解决方案：
想要第一个子元素节点，可以使用 parentNode.chilren[0]
想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1]
下拉菜单案列（修饰简陋 看js）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
margin: 100px auto;
}
a {
text-decoration: none;
}
ul {
width: 100px;
height: 20px;
line-height: 20px;
text-align: center;
border: 1px soid green;
list-style: none;
}
li {
width: 100px;
height: 20px;
line-height: 20px;
text-align: center;
border: 1px soid green;
list-style: none;
}
.nav {
border: 2px solid green;
}
.nav ul {
display: none;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
</head>
<body>
<div>
<ul class="nav">
<li><a href="">111</a>
<ul>
<li><a href="">222</a></li>
<li><a href="">333</a></li>
<li><a href="">444</a></li>
</ul>
</li>
</ul>
</div>
<script>
// 1. 获取元素
var nav = document.querySelector('.nav');
var lis = nav.children; // 得到4个小li
// 2.循环注册事件
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>
兄弟节点
node.nextSibling
nextSibling 返回当前元素的下一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。
node.previousSibling
previousSibling 返回当前元素上一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。
node.nextElementSibling
nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null。
node.previousElementSibling
previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null。
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var ul = document.querySelector('ul');
//这里获取的是第二个li 方便下面操作
var li2 = ul.childNodes[3];
console.log(li2); //第二个li
console.log(li2.nextSibling); //第二个li 后一个#text
console.log(li2.previousSibling); //第二个li 前一个#text
console.log(li2.nextElementSibling); //第二个li 后一个li
console.log(li2.previousElementSibling); //第二个li 前一个li
</script>
</body>
注意：这两个方法有兼容性问题， IE9 以上才支持。
如何解决兼容性问题 ？
答：自己封装一个兼容性的函数
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
3.查找节点
（1）childNodes:获取所有的孩子节点（包括了元素节点和其他很多类型的节点，基本不常用）
（2）children — 获取所有的子元素（用途很广泛），兼容性：IE678会把注释节点算上。
（3）firstChild 第一个子节点 firstElementChild 第一个子元素
（4）lastChild 最后一个节点 lastElementChild 最后一个子元素
（5）第几个元素 children[n] 第n个元素
4.兄弟节点：
nextSibling:下一个兄弟节点
nextElementSibling:下一个兄弟元素
previousSibling 上一个兄弟节点
previousElementSibling 上一个兄弟元素
5.父亲节点
parentNode:父节点
创建节点
document.write（基本不用）:
(1)可以生成新的节点，但是不推荐使用。
如果页面已经加载完成了，还是用document.write写内容的话，会把之前的页面给覆盖掉.
(2)document.write的本意就是在文档流上写入内容。如果页面没加载完成，文档流还是开着的，document.write直接在这个文档流上写东西
(3)如果页面加载完成了，还是用document.write写东西，会重新开启一个新的文档流，往新的文档流上写东西，旧的文档流就被新的文档流覆盖了。
window.onload = function () {
document.write('你好')
}
innerHTML (偶尔用)**
innerHTML创建节点的时候有一个特点，如果原来有内容的话，使用innerHTML会把原先的内容给干掉。
div.innerHTML = '<h1>你好</h1>'
createElement (常用)
var element = document.createElement("tagName");
document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
添加节点
appendChild 在子元素的最后添加一个新元素
node.appendChild(child)
node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的after 伪元素。
node.insertBefore(child, 指定元素)
node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。
<body>
<ul>
<li>1111</li>
</ul>
<script>
//创建节点
var li = document.createElement('li');
var ul = document.querySelector('ul');
//添加节点 node.appendChild(child)
//在后面追加元素 不会覆盖之前元素 类似于数组中push
ul.appendChild(li)
//添加节点 node.insertBefore(child,指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);
</script>
</body>
注：如果添加的是页面中本来就存在的元素，是一个剪切的效果，原来的就不在了。
克隆节点
node.cloneNode()
功能：在内存中克隆一份节点
参数：false / true
false：默认值：是浅复制，只会复制标签，节点本身，不会复制节点的孩子。
true: 深度复制，会复制标签，还会复制标签的所有内容 常用
<body>
<ul>
<li>1111</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
// 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
// 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);
</script>
</body>
注：
克隆出来的节点跟原来的节点没有关系，修改了也不会相互影响。
如果克隆的节点带了id，我们需要给id重新设置一个值，不让id冲突。
删除节点
parent.removeChild(child);
解析 : 父元素.removeChild(子元素);
功能：有父盒子调用，删除里面的一个子元素。
//使用1 :
div.removeChild(p);
//使用2 :
p.parentNode.removeChild(p);
<body>
<button>删除</button>
<ul>
<li>熊大</li>
<li>熊二</li>
<li>光头强</li>
</ul>
<script>
// 1.获取元素
var ul = document.querySelector('ul');
var btn = document.querySelector('button');
// 2. 删除元素 node.removeChild(child)
// ul.removeChild(ul.children[0]);
// 3. 点击按钮依次删除里面的孩子
btn.onclick = function() {
if (ul.children.length == 0) {
this.disabled = true;
} else {
ul.removeChild(ul.children[0]);
}
}
</script>
</body>
替换节点
parentNode.replaceChild(newChild, oldChild)
newChild用来替换 oldChild的新节点。
如果newChild已经存在于DOM树中，则它会被从原始位置删除。
三种动态创建元素区别
- document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
- innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
- innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
- createElement() 创建多个元素效率稍低一点点，但是结构更清晰
总结：不同浏览器下，innerHTML 效率要比 creatElement 高
案例 留言板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
margin-top: 20px;
list-style: none;
width: 200px;
height: 20px;
background-color: rgb(108, 176, 202);
}
li a {
float: right;
text-decoration: none;
}
</style>
</head>
<body>
<input type="text" name="" id="">
<button>发布</button>
<ul>
</ul>
<script>
var ul = document.querySelector('ul');
var input = document.querySelector('input');
var btn = document.querySelector('button');
btn.onclick = function() {
if (input.value == '') {
alert('您没有输入内容');
return false;
} else {
// (1) 创建元素
var li = document.createElement('li');
// 先有li 才能赋值
li.innerHTML = input.value + "<a href = 'javascript:;'>删除<a>";
// (2) 添加元素
// ul.appendChild(li);
ul.insertBefore(li, ul.children[0]);
//获取a链接
var as = document.querySelectorAll('a');
for (i = 0; i < as.length; i++) {
as[i].onclick = function() {
//删除的是li
ul.removeChild(this.parentNode);
}
}
}
}
</script>
</body>
</html>
效果：输入留言 点击发布显示留言 点击删除 删除当前点击的留言
案例：动态创建表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 500px;
margin: 100px auto;
/* border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。 */
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid #333;
}
thead tr {
height: 40px;
background-color: #ccc;
}
a {
text-decoration: none;
color: green;
}
</style>
</head>
<body>
<!-- cellspacing 属性规定单元格之间的空间。 -->
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 1.先去准备好学生的数据
var datas = [{
name: '魏璎珞',
subject: 'JavaScript',
score: 100
}, {
name: '弘历',
subject: 'JavaScript',
score: 98
}, {
name: '傅恒',
subject: 'JavaScript',
score: 99
}, {
name: '明玉',
subject: 'JavaScript',
score: 88
}];
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr
// 1. 创建 tr行
var tr = document.createElement('tr');
tbody.appendChild(tr);
// 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象 datas[i]
for (var k in datas[i]) { // 里面的for循环管列 td
// 创建单元格
var td = document.createElement('td');
// 把对象里面的属性值 datas[i][k] 给 td
// console.log(datas[i][k]);
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
// 3. 创建有删除2个字的单元格
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除 </a>';
tr.appendChild(td);
}
// 4. 删除操作 开始
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
// 点击a 删除 当前a 所在的行(链接的爸爸的爸爸) node.removeChild(child)
tbody.removeChild(this.parentNode.parentNode)
}
}
// for(var k in obj) {
// k 得到的是属性名
// obj[k] 得到是属性值
// }
</script>
</body>
</html>
386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
