DOM:(Document Object Model(文档对象模型))简单理解为——元素操作。
DOM结构是树形结构,其常用的节点类型有:元素节点、属性节点、文本节点,可使用nodeType属性来判断一个节点的类型
节点类型 | nodeType值 |
---|---|
元素节点 | 1 |
属性节点 | 2 |
文本节点 | 3 |
获取元素的方法:(严格区分大小写)
(1)document.getElementById(“id名”)
通过id来选中元,类似于CSS中的id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oDiv = document.getElementById("div1");
oDiv.style.color = "red";
}
</script>
</head>
<body>
<div id="div1">JavaScript</div>
</body>
</html>
(2)document.getElementsByTagName(“标签名”)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oUl = document.getElementById("list");
var oLi = oUl.getElementsByTagName("li");
oLi[2].style.color = "red";
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
</body>
</html>
(3)document.getElementsByClassName(“类名”)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oLi = document.getElementsByClassName("select");
oLi[0].style.color = "red";
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li class="select">JavaScript</li>
<li class="select">jQuery</li>
<li class="select">Vue.js</li>
</ul>
</body>
</html>
(4)document.querySelector(“选择器”)和document.querySelectorAll(“选择器”)
querySelector()表示选取满足选择条件的第1个元素,querySelectorAll()表示选取满足条件的所有元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oDiv = document.querySelectorAll(".test");
oDiv[1].style.color = "red";
}
</script>
</head>
<body>
<div>JavaScript</div>
<div class="test">JavaScript</div>
<div class="test">JavaScript</div>
<div>JavaScript</div>
<div class="test">JavaScript</div>
</body>
</html>
分析:document.querySelectorAll(".test")表示获取所有class为test的元素。由于获取的是多个元素,因此这也是一个类数组。想要精确得到某一个元素,也需要使用数组下标的形式来获取。
(5)document.getElementsByName(“name名”)
getElementsByName()获取的也是一个类数组,如果想要准确得到某一个元素,可以使用数组下标形式来获取。getElementsByName()只用于表单元素,一般只用于单选按钮和复选框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oInput = document.getElementsByName("status");
oInput[2].checked = true;
}
</script>
</head>
<body>
你的学历:
<label><input type="radio" name="status" value="本科" />本科</label>
<label><input type="radio" name="status" value="硕士" />硕士</label>
<label><input type="radio" name="status" value="博士" />博士</label>
</body>
</html>
(6)document.title和document.body
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
document.title = "梦想是什么?";
document.body.innerHTML = "<strong style='color:red'>梦想就是一种让你感到坚持就是幸福的东西。</strong>";
}
</script>
</head>
<body>
</body>
</html>
对元素进行相应的操作:
1、创建元素:
var e1 = document.createElement("元素名");//创建元素节点
var txt = document.createTextNode("文本内容"); //创建文本节点
e1.appendChild(txt); //把文本节点插入元素节点中
e2.appendChild(e1); //把组装好的元素插入已存在的元素中
注意:A.appendChild(B)表示把B插入到A内部中去,也就是使得B成为A的子节点。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oDiv = document.getElementById("content");
var oStrong = document.createElement("strong");
var oTxt = document.createTextNode("绿叶学习网");
//将文本节点插入strong元素
oStrong.appendChild(oTxt);
//将strong元素插入div元素(这个div在HTML已经存在)
oDiv.appendChild(oStrong);
}
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
2、插入元素:
(1)A.appendChild(B); 意将一个新元素B插入到父元素A的内部子元素的 末尾
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
//为按钮添加点击事件
oBtn.onclick = function ()
{
var oUl = document.getElementById("list");
var oTxt = document.getElementById("txt");
//将文本框的内容转换为“文本节点”
var textNode = document.createTextNode(oTxt.value);
//动态创建一个li元素
var oLi = document.createElement("li");
//将文本节点插入li元素中去
oLi.appendChild(textNode);
//将li元素插入ul元素中去
oUl.appendChild(oLi);
};
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<input id="txt" type="text"/><input id="btn" type="button" value="插入" />
</body>
</html>
(2)A.insertBefore(B,ref); 将一个新元素B插入到父元素A中的某一个子元素ref“之前”。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
var oUl = document.getElementById("list");
var oTxt = document.getElementById("txt");
//将文本框的内容转换为“文本节点”
var textNode = document.createTextNode(oTxt.value);
//动态创建一个li元素
var oLi = document.createElement("li");
//将文本节点插入li元素中
oLi.appendChild(textNode);
//将li元素插入到ul的第1个子元素前面
oUl.insertBefore(oLi, oUl.firstElementChild);
}
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<input id="txt" type="text"/><input id="btn" type="button" value="插入" />
</body>
</html>
(3)删除元素:A.removeChild(B); 删除父元素A下的某个子元素B
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
var oUl = document.getElementById("list");
//删除最后一个子元素
oUl.removeChild(oUl.lastElementChild);
}
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input id="btn" type="button" value="删除" />
</body>
</html>
(4)复制元素:obj.cloneNode(bool)
参数obj表示被复制的元素,而参数bool是一个布尔值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
var oUl = document.getElementById("list");
document.body.appendChild(oUl.cloneNode(1));
}
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<input id="btn" type="button" value="复制" />
</body>
</html>
(5)替换元素:A.replaceChild(new,old);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
//获取body中的第1个元素
var oFirst = document.querySelector("body *:first-child");
//获取2个文本框
var oTag = document.getElementById("tag");
var oTxt = document.getElementById("txt");
//根据2个文本框的值来创建一个新节点
var oNewTag = document.createElement(oTag.value);
var oNewTxt = document.createTextNode(oTxt.value);
oNewTag.appendChild(oNewTxt);
document.body.replaceChild(oNewTag, oFirst);
}
}
</script>
</head>
<body>
<p>JavaScript</p>
<hr/>
输入标签:<input id="tag" type="text" /><br />
输入内容:<input id="txt" type="text" /><br />
<input id="btn" type="button" value="替换" />
</body>
</html>