常用DOM操作
一、文档节点的相关操作
1.DOM是什么?
- DOM全称是document object model(文档对象模型)
JS将整个HTML/XML文档看成一个对象,也称为DOM树
DOM树由各种类型的节点组成
2.获取DOM元素的五种方式
标签:
document.getElementsByTagName()
ID:
document.getElementById()
CLASS:
document.getElementsByClassName()
API:
document.querySelector()
/document.querySelectorAll()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>如何获取页面元素</title>
</head>
<body>
<div id="list">
<ul class="poster">
<li name="active">php中文网</li>
<li>前端开发</li>
<li>服务端开发</li>
</ul>
<ul>
<li>安卓开发</li>
</ul>
</div>
<script>
//1.标签:返回的是一个元素的集合
var ul = document.getElementsByTagName("ul");
console.log(ul);
console.log(ul[0]);
console.log(ul.item(0));
//2.id:只返回具有指定id的第一个元素(唯一)
var list = document.getElementById("list");
console.log(list);
//id的替代语法
var div = document.getElementsByTagName("div");
console.log(div.namedItem("list"));
console.log(div.namedItem("list") === list);
var active = document.getElementsByTagName("li").namedItem("active");
console.log(active);
active.style.color = "red";
//在元素级别调用以上的api方法来获取元素
var lis = ul.item(0).getElementsByTagName("li");
console.log(lis);
lis.namedItem("active").style.backgroundColor = "blue";
//3.class返回一个html集合
var poster = document.getElementsByClassName("poster");
console.log(poster);
poster.item(0).style.border = "1px solid";
//4.推荐使用querySelector(css选择器):获取满足条件的集合中的第一个元素(类似于id)
//querySelectorAll(css选择器):获取满足条件的去拿不元素组成的集合
var div = document.querySelector("#list li");
console.log(div);
//5.获取多个
var lis = document.querySelectorAll(".poster > *");
console.log(lis);
</script>
</body>
</html>
3.节点与元素集合
NodeList
:所有类型的节点集合,包括了元素,文本,注释,片段,文档,属性…HTMLColletion
:HTML元素的节点集合 NodeList > HTMLCollection,是NOdeList一个子集节点是dom中的最小单元
节点有:元素,文本节点,注释节点,片段节点,文档节点…
子节点:
children
:只返回父节点中的元素子节点childNodes
:返回指定节点的子节点的节点列表父节点:
parentElement
:返回父节点充当父节点永远不可能是文本或属性,只能是元素或文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>
<p>Hello Word!</p>
<h3>php中文网</h3>
<a href="">百度</a>
</div>
<ul>
<li>子节点</li>
</ul>
</body>
<script>
var div = document.querySelector("div");
//childNodes返回指定节点的子节点的节点列表
console.log(div.childNodes);
//过滤掉节点集合中的非元素节点
for (var i = 0; i < div.childNodes.length; i++) {
var currentNode = div.childNodes.item(i);
if (currentNode.nodeType === 1) {
console.log(currentNode.tagName.toLowerCase());
}
}
//children:只返回父节点中的元素子节点
console.log(div.children);
//如果只想获取第一个子元素级的节点
console.log(div.firstElementChild);
console.log(div.lastElementChild);
console.log(div.children.item(1));
var li = document.querySelector("li");
//充当父节点永远不可能是文本或属性,只能是元素或文档
console.log(li.parentElement);
</script>
</html>
4.元素的新增,删除
创建元素:
createElement()
创建一个元素的片段:
createDocumentFragment()
删除元素:
removeChild()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>元素的动态添加与删除</title>
</head>
<body>
<ul></ul>
<h1>删除元素</h1>
</body>
<script>
//创建元素并添加到页面中
var h2 = document.createElement("h2");
//给元素添加内容
h2.innerText = "欢迎来到php中文网学习!";
//如果添加的内容有html标签
h2.innerHTML = "欢迎来到<span style='color:red'>php中文网</span>学习!";
//把元素添加到页面中,必须在父节点上添加
document.body.appendChild(h2);
//添加多个
var ul = document.querySelector("ul");
/* for (var i = 0; i < 10; i++) {
var li = document.createElement("li");
li.innerText = "列表项" + (i + 1);
ul.appendChild(li);
} */
//为防止每添加一个元素导致页面dom树重新渲染一次
//借助文档片段来解决这个问题
//先创建一个临时文档片段
//将生成的10个li添加到内存中的这个文档片段节点中
//将这个文档片段一次性添加到页面中,此时页面只会渲染一次
var frag = document.createDocumentFragment();
for (var i = 0; i < 10; i++) {
var li = document.createElement("li");
li.innerText = "列表项" + (i + 1);
frag.appendChild(li);
}
//获取父元素
var bo = document.body;
//获取父元素中的子元素
var h1 = document.querySelector("h1");
console.log(h1);
//删除指定的元素
bo.removeChild(h1);
</script>
</html>
5.事件
事件属性:
on事件名称
监听器:
addEventListernaer()
事件方法:
函数表达式/匿名函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>事件基础</title>
</head>
<body>
<!-- 将事件作为元素的一个特殊属性添加到元素上面,用on为前缀 -->
<!-- <button onclick="表达式/js语句">按钮</button> -->
<button onclick="alert(this.firstChild.nodeValue)">按钮</button>
<button>点我试试看</button>
<a href="https://www.baidu.com">百度一下</a>
<script>
//获取第二个按钮
var btn = document.querySelector("button:nth-of-type(2)");
console.log(btn);
//绑定事件
//addEventListener(事件类型,回调函数,冒泡/捕获)
btn.addEventListener(
"mouseover",
function (ev) {
//ev.target:触发事件的对象
console.log(ev.target);
ev.target.style = "width:100px";
ev.target.style = "height:100px";
},
false
);
btn.addEventListener(
"mouseout",
function (ev) {
//ev.target:触发事件的对象
console.log(ev.target);
ev.target.style = "none";
},
false
);
//获取链接
var link = document.querySelector("a");
console.log(link);
link.onclick = function (ev) {
//禁止原对象的默认行为
ev.preventDefault();
btn.style = "none";
};
</script>
</body>
</html>
二、经典的ToDoList案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>经典的ToDoList</title>
</head>
<body>
<form action="" id="comment" method="post">
<label for="content">求留言:</label>
<input type="text" name="content" />
<button>提交</button>
</form>
<ul></ul>
<script>
//获取表单
var form = document.forms.namedItem("comment");
//获取留言区
var ul = document.querySelector("ul");
//创建自动回复数组
var arrs = [
"欢迎来到php中文网学习!",
"好好学习,天天向上!",
"你有什么事情?",
"请到php中文网学习相关课程!",
"今天是个好天气!",
"抓紧时间学习吧!",
"学习使我快乐!",
"php是世界上最好的语言!",
"学无止境!",
"学会自律,才能进步!",
];
console.log(arrs);
var rand = 0;
//监听表单的提交事件
form.addEventListener(
"submit",
function (ev) {
ev.preventDefault();
console.log("事件被监听了");
//创建一条新留言
var li = document.createElement("li");
if (form.content.value.trim().length === 0) {
alert("内容为空");
form.content.focus();
return false;
} else {
setInterval(function () {
rand = parseInt(Math.random() * 10);
//console.log(rand);
}, 2000);
li.innerHTML =
form.content.value +
'<a href="" onclick="del(this)">删除</a>' +
"<br><p>" +
arrs[rand] +
"</p><hr>";
//
}
//将留言添加到列表中
//将最新留言放到最前面
//留言为空的时候,直接插入,否则就插入到新一条留言之前
if (ul.childElementCount === 0) {
ul.appendChild(li);
} else {
//insertBefore(要插入的元素,插入的位置)
ul.insertBefore(li, ul.firstElementChild);
}
//清空留言框
form.content.value = null;
form.content.focus();
},
false
);
function del(ele) {
this.event.preventDefault();
console.log(ele.parentElement);
return confirm("是否删除?")
? ul.removeChild(ele.parentElement)
: false;
}
</script>
</body>
</html>
三、学习总结
获取DOM元素的五种方式
标签:
document.getElementsByTagName()
返回一个集合ID:
document.getElementById()
返回一个集合CLASS:
document.getElementsByClassName()
返回一个集合API:
document.querySelector()
/document.querySelectorAll()
返回一个数组列表children
:只返回父节点中的元素子节点childNodes
:返回指定节点的子节点的节点列表parentElement
:返回父节点document.createElement()
:创建元素createDocumentFragment()
:创建一个元素的片段removeChild()
:删除元素addEventListernaer(事件类型,回调,捕获/冒泡)
:监听器