原贴连接
1.在整个文档范围内查询元素节点
| 功能 | API | 返回值 |
| 根据id值查询 | document.getElementById(“id值”) | 一个具体的元素节 |
| 根据标签名查询 | document.getElementsByTagName(“标签名”) | 元素节点数组 |
| 根据name属性值查询 | document.getElementsByName(“name值”) | 元素节点数组 |
| 根据类名查询 | document.getElementsByClassName(“类名”) | 元素节点数组 |
2 在具体元素节点范围内查找子节点
| 功能 | API | 返回值 |
| 查找子标签 | element.children | 返回子标签数组 |
| 查找第一个子标签 | element.firstElementChild | 标签对象 |
| 查找最后一个子标签 | element.lastElementChild | 节点对象 |
3 查找指定元素节点的父节点
| 功能 | API | 返回值 |
| 查找指定元素节点的父标签 | element.parentElement | 标签对象 |
4 查找指定元素节点的兄弟节点
| 功能 | API | 返回值 |
| 查找前一个兄弟标签 | node.previousElementSibling | 标签对象 |
| 查找后一个兄弟标签 | node.nextElementSibling | 标签对象 |
5 属性操作
| 需求 | 操作方式 |
| 读取属性值 | 元素对象.属性名 |
| 修改属性值 | 元素对象.属性名=新的属性值 |
6 标签体的操作
| 需求 | 操作方式 |
| 获取或者设置标签体的文本内容 | element.innerText |
| 获取或者设置标签体的内容 | element.innerHTML |
7 DOM增删改操作
| API | 功能 |
| document.createElement(“标签名”) | 创建元素节点并返回，但不会自动添加到文档中 |
| document.createTextNode(“文本值”) | 创建文本节点并返回，但不会自动添加到文档中 |
| element.append(ele) | 将ele添加到element元素中 |
| element.appendChild(ele) | 将ele添加到element所有子节点后面 |
| parentEle.insertBefore(newEle,targetEle) | 将newEle插入到targetEle前面 |
| parentEle.replaceChild(newEle, oldEle) | 用新节点替换原有的旧子节点 |
| element.remove() | 删除某个标签 |
8.doc实战
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<title>DOM操作</title>
<script>
window.onload = function(){
//1.根据ID获取元素信息
let p1 = document.getElementById('p1');
console.log("p1",p1)
//2.根据name属性获取元素信息
let name1 = document.getElementsByName("name1");
console.log("name1",name1.length);
//alert(inputNames.length)
name1[0].value = "aabbcc";
//3.通过input标签获取元素
let input1 = document.getElementsByTagName("input")
console.log("input1",input1.length);
//alert("input标签的个数:"+inputTags.length)
input1[0].value = "112233";
//4.通过class类型获取数据
let class1 = document.getElementsByClassName("classTag");
console.log("class1",class1.length);
//alert("通过类型获取元素的个数:"+classTag.length)
class1[0].value = "oooooo";
//5.查找指定元素的子元素
let children1 = document.getElementById("div1").children;
console.log("children1",children1);
//alert("子节点个数:"+childrens.length)
children1[1].innerHTML = "nihai";
//6.获取第一个子元素
let firstP = document.getElementById('div1').firstElementChild;
console.log("firstP",firstP);
//7.获取最后一个子节点
let lastP = document.getElementById('div1').lastElementChild;
console.log("lastP",lastP);
//8.根据指定元素,查找父节点
let parentP = document.getElementById('p1').parentElement;
console.log("parentP",parentP);
//9.查找指定兄弟的 前一个
let previousf = document.getElementById('p2').previousElementSibling;
console.log("previousf",previousf);
//10.查找指定兄弟元素的后一个
let previousl = document.getElementById("p1").nextElementSibling;
console.log("previousl",previousl);
//11.获取元素属性和属性值 获取id="p1"的ID值
let propertyId = document.getElementById('p1').id;
console.log("propertyId",propertyId);
//12 将id="p1" 修改为p3
let propertyUp = document.getElementById('p1').id;
propertyUp = 'p3';
console.log("propertyUp",propertyUp);
//13 获取标签体的内容
let innerText = document.getElementById('p2').innerText;
console.log("innerText",innerText);
//14 修改id=p2标签体的内容
let innserTextUp = document.getElementById('p2').innerText;
innserTextUp = '而我在等你';
console.log('innserTextUp',innserTextUp);
//15 获取id=div1 的标签体内容
let innerTextD = document.getElementById('div1').innerText;
console.log('innerTextD',innerTextD);
//16 修改id=div1的内容
let innerTextUp = document.getElementById('div1').innerText;
innerTextUp = '窗前明月光,疑似地上霜,举头望明月,低头思故乡.';
console.log('innerTextUp',innerTextUp);
}
</script>
</head>
<body>
<input type="text" name="name1" id="id" class="classTag">
<div id="div1">
<div id="p1">天青色等烟雨,</div>
<div id="p2">而我在等你,</div>
<p>炊烟袅袅升起,</p>
<p>隔江千万里.</p>
</div>
</body>
</html>
9.F12效果
