JS 获取元素的九种方法
- document.getElementById:
- context.getElementsByTagName: 在指定上下文中(容器)通过标签获取一组元素集合
- context.getElementsByClassName:在指定上下文中(容器),通过类名获取一组元素集合(不兼容IE6-8)
- document.head: 获取页面中的head 部分
- document.body: 获取页面中的body 部分
- document.documentElement: 获取页面中的html 部分
- context.getElementsByName: 表单元素(常用于一组元素,如性别等单选、复选框,可以加name 属性进行分组,保证每次只能选择一个)
- context.querySelector(): 常用, () 内可以写所有CSS代码
- context.querySelectorAll(): 常用,() 内可以写所有CSS代码
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器练习</title>
</head>
<body>
<div class="container" id="container">
<ul id="页签">
<li><span>标签测试</span>第1个页签</li>
<li>第2个页签</li>
<li>第3个页签</li>
</ul>
</div>
<div class='detail' id="detail">
<div class="detail1">第1个页签详细内容
<input type="radio" name="gender" value="男">男
<!-- checked : 默认选中 -->
<input type="radio" name="gender" checked>女
</div>
<br>
<div class="detail2">第2个页签详细内容
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<br>
<div class="detail3">第3个页签详细内容</div>
</div>
<script>
// 获取gender对应的文本框
let gender = document.querySelectorAll('[name=gender]');
console.log(gender); //[input, input]
console.log(gender[0].value); // "男"
// getElementsByTagName: 获取指定上下文中所有后代标签为N的元素集合
let detailBox=document.getElementById('detail');
let detailAry=detailBox.getElementsByTagName('div');
console.log(detailAry); //[div.detail1, div.detail2, div, div, div, div.detail3]
// 只想获取div.detail1, div.detail2,div.detail3
detailAry=document.querySelectorAll('.detail>div');
console.log(detailAry);//> 表示子代选择器,空格代表后代选择器, 后代包括孙辈。[div.detail1, div.detail2, div.detail3]
detailAry=document.querySelectorAll('.detail div');
console.log(detailAry); //[div.detail1, div.detail2, div, div, div, div.detail3]
// 只获取div.detail2
let detail2=detailBox.querySelectorAll(".detail>div:nth-of-type(2)");
console.log(detail2);
// nth-child 和 nth-of-type 的区别。
let detailChild=detailBox.querySelectorAll(".detail>div:nth-child(2)");
console.log(detailChild); // '' , nth-child 获取的是detail 下的第二个子元素,如果不是div 则返回空。 当前detail 下的第二个子元素是br, 不是div
console.log(document.querySelector('li').innerHTML); //“<span>标签测试</span>第1个页签”, document中有多个li,但是使用querySelector()仅返回第一个。innerHTML是会将标签内含有的标签元素也返回,而innerText只返回文本内容。
console.log(document.querySelector('li').innerText); //'标签测试第1个页签'
</script>
</body>
</html>
JS中的节点和描述节点之间关系的属性
节点: Node (页面中素所有的内容均为节点)
节点集合:NodeList(getElementsByName / querySelectorAll 获取的都是节点集合)
NodeList 示例:
- 分类:
- 元素节点(元素标签)
- nodeType:1
- nodeName: 大写的标签名
- nodeValue: null
- 文本节点
- nodeType: 3
- nodeName:‘#text’
- nodeValue:文本内容
- 注释节点
- nodeType: 8
- nodeName:‘#comment’
- nodeValue:注释内容
- 文档节点document
- nodeType: 9
- nodeName:‘#document’
- nodeValue:null
- 描述这些节点之间关系的属性
- childNodes: 获取所有的子节点
- children: 获取所有的元素的子节点(子元素标签集合)
- firstChild: 获取第一个子节点
- lastChild: 获取最后一个子节点
- firstElementChild / lastElementChild: 获取第一个和最后一个元素的子节点(不兼容IE6-8)
- previousSibling: 获取上一个哥哥节点
- nextSibling: 获取下一个弟弟节点
- previousElementSibling/ nextElementSibling : 获取哥哥和弟弟元素节点(不兼容IE6-8)
let container = document.querySelector('.container');
console.log(container);
// 1. 获取container的所有节点: 标准浏览器(非IE6-8)中会把空格和换行当作文本节点处理。
console.log(container.childNodes); //NodeList(3) [text, ul#页签, text]
// 2. 获取container的所有元素节点: IE 6-8 下,会将注释也当作元素节点
console.log(container.children); //HTMLCollection [ul#页签, 页签: ul#页签]
// 3. 获取ul 下的第一个节点
let list=container.querySelector('ul');
console.log(list.firstChild); // firstChild 是换行符。 nodeValue: "\n "
console.log(list.firstElementChild); //<li><span>标签测试</span>第1个页签</li>
// 4. 获取ul 下的最后一个节点
console.log(list.lastChild); //#text
console.log(list.lastElementChild); // <li>第3个页签</li>
// 5. 获取第二个li 的兄弟元素
let li2=list.querySelector('li:nth-child(2)');
console.log(li2); //<li>第2个页签</li>
console.log(li2.previousElementSibling);//<li><span>标签测试</span>第1个页签</li>
console.log(li2.nextElementSibling);//<li>第3个页签</li>
JS中动态增删改元素
1. DOM元素在HTML里创建是静态的(创建完不好增删改操作),在JS中,可以实现动态增删改DOM元素
createElement 创建元素对象
createTextNode 创建文本对象
appendChild : 把元素添加到容器末尾
insertBefore: 把元素添加到指定容器中指定元素的前面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态操作DOM元素</title>
<style>
.RED {
background-color: lightblue;
background:-webkit-linear-gradient(top left,lightblue,lightcoral) ;
font: red bold;
};
</style>
</head>
<body>
<script>
// 1. 创建元素节点div
let box = document.createElement('div');
box.id='box';
box.style.width='200px';
box.style.height='200px';
box.className='RED';
// 2. 动态创建文本节点
let doc = document.createTextNode('持之以恒,专心致志');
// 3. 添加:容器.appendChild(元素)
box.appendChild(doc);
// 4. 将box 添加到body中
document.body.appendChild(box);
// 5. 添加: 容器.insertBefore([新增元素],[指定元素])
let text = document.createElement('span');
let br = document.createElement('br');
text.innerText='Hello World';
box.insertBefore(text,doc);
box.insertBefore(br,doc);
</script>
</body>
</html>
实现效果:
2. 克隆元素或节点
cloneNode(true/false): 克隆元素或节点,true代表深克隆,即克隆该元素及其所有后代元素。 false表示浅克隆,只克隆该元素本身。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态操作DOM元素</title>
<style>
.RED {
background-color: lightblue;
background:-webkit-linear-gradient(top left,lightblue,lightcoral) ;
font: red bold;
};
</style>
</head>
<body>
<script>
// 1. 创建元素节点div
let box = document.createElement('div');
box.id='box';
box.style.width='200px';
box.style.height='200px';
box.className='RED';
// 2. 动态创建文本节点
let doc = document.createTextNode('持之以恒,专心致志');
// 3. 添加:容器.appendChild(元素)
box.appendChild(doc);
// 4. 将box 添加到body中
document.body.appendChild(box);
// 5. 添加: 容器.insertBefore([新增元素],[指定元素])
let text = document.createElement('span');
let br = document.createElement('br');
text.innerText='Hello World';
box.insertBefore(text,doc);
box.insertBefore(br,doc);
// 6. 深度克隆元素
let boxDeep=box.cloneNode(true);
boxDeep.querySelector('span').innerText='Hello World Deep Clone';
document.body.appendChild(boxDeep);
// 7. 浅克隆元素
let boxLight=box.cloneNode(false);
boxLight.innerHTML="<span>Hello World Light Clone.</span>";
document.body.appendChild(boxLight);
</script>
</body>
</html>
3. 移出元素
removeChild 移除容器中的某个元素。容器.removeChild(元素Id)。
// 8. 移出boxLight
document.body.removeChild(boxLight);