1.获取节点的三种方法
1.1获取标签名节点
1.2获取类名节点
1.3获取id节点
<!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>
</head>
<body>
<div class="box" id="pox">在很久很久以前</div>
<div class="box">我遇到了你</div>
<div class="box">那时候的我还没有现在的成熟</div>
<div class="box">还是个混球</div>
<script>
// 1.通过标签名获取节点
// 获取到所有对应标签的元素所组成的伪数组
// 获取到确定的某个元素,跟上对应元素的索引下标
var box = document.getElementsByTagName('div')[0];
console.log(box);
// 2.通过类名获取节点
// 获取到所有对应类名所组成的伪数组
// 获取到确定的某个元素,跟上对应的元素的索引下标
var box1 = document.getElementsByClassName('box')[1];
console.log(box1);
// 3.通过id获取节点,直接获取到确定的元素
var pox = document.getElementById('pox');
console.log(pox);
</script>
</body>
</html>
2.获取特殊节点
2.1获取整个html节点
2.2获取body节点
2.3获取title(标题)节点
<!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>
</head>
<body>
<script>
// 获取整个 html 节点
// var _html = document.documentElement;
// console.log(_html);
//获取 body 节点
var _body = document.body;
console.log(_body);
// 获取title(文档标题)节点
var tit = document.title;
console.log(tit);
</script>
</body>
</html>
3.修改html内容
3.1通过innerText
3.2通过innerHTML
两者的区别在于,innerText只能插入文本,不可以识别HTML标签;innerHTML可以识别标签
<!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>
</head>
<body>
<div>天青色等烟雨</div>
<script>
// 1.获取节点
var box = document.getElementsByTagName('div')[0];
console.log(box);
// 2.修改节点内容
// 1.通过innerText修改
box.innerText = '而我在等你';
// 2.通过innerHTML 修改
box.innerHTML = '炊烟袅袅升起';
// 3.innerText 和 innerHTML的区别:innerText只能插入文本,不可以识别标签,innerHTML可以识别标签
box.innerText = '<b>加粗的内容</b>';
box.innerHTML = '<b>加粗的内容</b>';
// 获取节点内容
console.log(box.innerText);
</script>
</body>
</html>
3.3 修改CSS样式
一个单词直接.样式=...,如果出现连词符号“-”,如“font-size”,第二个单词首字母要大写,“fontSize”,通过修改CSS样式会直接写到行内
<!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 {
width: 200px;
height: 200px;
color: skyblue;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">窗外的麻雀</div>
<script>
// 获取节点
var box = document.getElementsByClassName('box')[0];
console.log(box);
// 改变CSS样式
// 一个单词直接.写,如果出现连词符号‘-’,就不能直接写了,把第二个单词首字母大写
// 通过 .style.样式 修改或添加的样式会出现在行内样式
box.style.color = 'orange';
box.style.backgroundColor = 'skyblue';
</script>
</body>
</html>
3.4改变html属性
3.4.1 通过 元素.属性名(className)
3.4.2 通过getAttribule 获取属性
通过setAttribule 修改属性
3.4.3 removeAttribule 删除属性
<!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>
</head>
<body>
<div class="box">天生我才必有用,千金散尽还复来</div>
<script>
// 获取元素
var box = document.getElementsByClassName('box')[0];
console.log(box);
// 1.元素.属性名
console.log(box.className);
// 修改元素属性
// box.className = 'pox pox1';
// 2.通过getAttribute() 获取属性
console.log(box.getAttribute('class'));
// 通过 setAttribule() 设置属性
box.setAttribute('class', 'pox1 pox2');
// 删除属性 removeAttribute()
box.removeAttribute('class');
</script>
</body>
</html>
4.操作html元素
4.1 新建节点 createElement
<!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>
</head>
<body>
<script>
// 创建节点
var now = document.createElement('h1');
console.log(now);
// 修改节点内容
now.innerText = '你好';
now.innerHTML = '<h2>你好</h2>';
document.write('now');
</script>
</body>
</html>
4.2 新建文本节点 createTextNode()
<!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>
</head>
<body>
<script>
// 新建文本节点
var textNode = document.createTextNode('你好');
console.log(textNode);
// 新建节点
var now = document.createElement('h1');
now.appendChild(textNode);
console.log(now);
</script>
</body>
</html>
4.3 追加节点 appendChild()
<!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>
</head>
<body>
<div>123</div>
<script>
// 新建文本节点
var text = document.createTextNode('123');
console.log(text);
// 获取父节点
var box = document.getElementsByTagName('div')[0];
// 追加节点
box.appendChild(text);
</script>
</body>
</html>
4.4 父节点.insertBefor(新建节点,目标节点) 插入节点
如果想在后面插入直接追加节点
<!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>
</head>
<body>
<div>
<i>123</i>
</div>
<script>
// 获取父节点
var box = document.getElementsByTagName('div')[0];
// 获取目标节点
var nowbox = document.getElementsByTagName('i')[0];
// 新建节点
var now = document.createElement('p');
// 插入节点 父节点.insertBefor(新建节点,目标节点)
box.insertBefore(now, nowbox);
// 注意:没有 insertAfter()
// 要想在父节点后面插入 appendChild()
</script>
</body>
</html>
4.5 父节点.replaceChild(新节点,目标节点) 替换节点
<!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>
</head>
<body>
<div>
<li>五花马,千金裘</li>
</div>
<script>
// 获取父节点
var box = document.getElementsByTagName('div')[0];
// 获取目标节点
var box1 = document.getElementsByTagName('li')[0];
// 新建节点
var now = document.createElement('b');
// 替换节点 父节点.replaceChild(新节点,目标节点)
box.replaceChild(now, box1);
</script>
</body>
</html>
4.6 removeChild(目标节点) 删除节点
<!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>
</head>
<body>
<div class="box">
<i>天生我才必有用</i>
</div>
<script>
// 获取节点
// 父节点
var box = document.getElementsByClassName('box')[0];
// 目标节点
var box1 = document.getElementsByTagNam('i')[0];
// 删除节点
box.removeChild(box1);
</script>
</body>
</html>
4.7 remove() 删除本身节点
<!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>
</head>
<body>
<div>
<i>天生我才必有用</i>
</div>
<script>
// 获取元素
var box = document.getElementsByTagName('i')[0];
// 删除本身节点
box.remove();
</script>
</body>
</html>
4.8 克隆节点
cloneNode() 在默认情况下,只克隆本身节点,不克隆节点内的元素
cloneNode(true) 深度克隆
<!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>
</head>
<body>
<div>
<i>天青色等烟雨</i>
</div>
<script>
// 获取元素
var box = document.getElementsByTagName('div')[0];
// 克隆节点 默认情况下只克隆节点本身,而不克隆节点内的元素
console.log(box.cloneNode());
// 深度克隆
console.log(box.cloneNode(true));
</script>
</body>
</html>
5.根据节点关系获取节点 (父 子 兄弟)
5.1 parentNode 获取父节点
5.2 nextSibling 下一个兄弟节点(幽灵节点)
nextElementSibling 下一个兄弟节点
5.3 previousSibling 上一个兄弟节点(幽灵节点)
previousElementSibling 上一个兄弟节点
5.4 firstChild 第一个孩子节点(幽灵节点)
firstElementChild 第一个孩子节点
5.5 lastChild 最后一个孩子节点(幽灵节点)
lastElementChild 最后一个孩子节点
5.6 childNodes 所有孩子节点组成的伪数组(包括幽灵节点)
children 所有孩子节点组成的伪数组(不包含幽灵节点)
<!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>
</head>
<body>
<div class="father">
<div class="box1">123456</div>
<div class="box2">
<div class="box21">5633</div>
<div class="box22">698741</div>
</div>
<div class="pox">123</div>
</div>
<script>
// 获取父节点
var box = document.getElementsByClassName('box2')[0];
console.log(box);
var sat = box.parentNode;
console.log(sat);
// 1.下一个兄弟节点
// nextSibling 幽灵节点(看不见摸不着,只是放在那里)
console.log(box.nextSibling); //text 幽灵节点
// nextElementSibling 下一个兄弟节点,IE9以上才支持
console.log(box.nextElementSibling);
// 2.上一个兄弟节点
// previousSibling 幽灵节点
console.log(box.previousSibling);
// previousElementSibling 上一个兄弟节点
console.log(box.previousElementSibling);
// 3.访问第一个孩子节点
// firstChild 幽灵节点
console.log(box.firstChild);
// firstElementChild
console.log(box.firstElementChild);
// 4.访问最后一个孩子节点
// lastChild 幽灵节点
console.log(box.lastChild);
// lastElementChild 最后一个孩子节点
console.log(box.lastElementChild);
// 5.访问孩子节点
// childNodes 所有孩子节点组成的伪数组,包括幽灵节点
console.log(box.childNodes);
// children 所有孩子节点组成的伪数组,不包括幽灵节点
console.log(box.children);
</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>
</head>
<body>
<script>
// 1.获取节点的三种方法
// 1.1 getElementsByTagName 获取标签名节点
// 1.2 getElementsByClassName 获取类名节点
// 1.3 getElementById 获取id 节点
// 2.获取特殊节点
// 2.1 document.documentElement 获取整个html节点
// 2.2 document.body 获取body节点
// 2.3 document.title 获取标题(title)节点
// 3.修改HTML内容
// 3.1 通过innerText修改
// 3.2 通过innerHTML修改
// 两者区别在于innerText不能识别标签,innerHTML可以识别标签
// 3.3 修改CSS样式
// 元素.style.样式
// 如果样式的单词出现“-”的话,第二个单词首字母要大写
// 3.4 改变html属性
// 3.4.1 元素.className(属性名)
// 3.4.2 通过getAttribule() 获取属性
// 3.4.3 通过setAttribule() 设置属性
// 3.4.4 removeAttribule() 删除属性
// 4. 操作html 元素
// 4.1 document.createElement() 新建节点
// 4.2 document.createTextNode() 新建文本节点
// 4.3 appendChild() 追加节点
// 4.4 父节点.insertBefor(新建节点.目标节点) 插入节点
// 要想在后面插入直接appendChld追加节点
// 4.5 父节点.replaceChild(新节点.目标节点)替换节点
// 4.6 父节点.removeChild(目标节点) 删除节点
// 4.7 remove() 删除本身节点
// 4.8 cloneNode() 克隆节点,默认情况下只克隆本身节点,不克隆节点内的元素
// cloneNode(true) 深度克隆
// 5.根据节点关系获取节点 父 子 兄弟
// 5.1 parentNode 获取父节点
// 5.2 nextSibling 下一个兄弟节点(幽灵节点)
// nextElementSibling 下一个兄弟节点
// 5.3 previousSibling 上一个兄弟节点(幽灵节点)
// previousElementSibling 上一个兄弟节点
// 5.4 firstChild 第一个孩子节点(幽灵节点)
// firstElementChild 第一个孩子节点
// 5.5 lastChild 最后一个孩子节点(幽灵节点)
// lastElementChild 最后一个孩子节点
// 5.6 childNodes 所有孩子节点组成的伪数组(包括幽灵节点)
// children 所有孩子节点组成的伪数组(不包含幽灵节点)
// 6. 旗帜法则 flag
</script>
</body>
</html>