原贴连接
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效果