JS-DOM编程
DOM编程
DOM（Document Object Model）编程就是使用document对象的API完成对网页HTMl文档进行动态修改，以实现网页数据和样式动态变化效果的编程
document准确来说是window对象的属性对象之一
document是一个树形结构，以元素（属性和文本）作为树的结点
Document直接获取指定元素
- document.getElementById()：根据id获取当前页面唯一元素
- document.getElementsByTagName()：根据标签获取当前页面多个元素
- document.getElementsByName()：根据name属性值获取当前页面多个元素
- document.getElementsByClassName()：根据class属性值获取当前页面多个元素
多个元素的获取会返回一个htmlCollection对象，用for循环遍历即可获得每个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
function fun1() {
var els = document.getElementsByClassName("div1");
for (var i = 0; i < els.length; i++) {
console.log(els[i]);
}
}
</script>
</head>
<body>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<button onclick="fun1()">循环</button>
</body>
</html>
使用foreach循环遍历不仅会获得元素，还会获得对象中的其他方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
function fun1() {
var els = document.getElementsByClassName("div1");
for (var i in els) {
console.log(els[i]);
}
}
</script>
</head>
<body>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<button onclick="fun1()">循环</button>
</body>
</html>
通过方法间接访问元素
- 父元素.children 通过父元素获取子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
onload = function () {
var div1 = document.getElementById("div1");
//根据父元素获取其所有子元素
var cs = div1.children;
for (var i = 0; i < cs.length; i++) {
console.log(cs[i]);
}
//根据父元素获取第一个子元素
console.log(div1.firstElementChild)
//根据父元素获取最后一个子元素
console.log(div1.lastElementChild)
};
</script>
</head>
<body>
<div id="div1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
- 子元素.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>
<script>
onload = function () {
var div1 = document.getElementById("div1");
//根据子元素获取父元素
var pr = div1.parentElement;
console.log(pr);
};
</script>
</head>
<body>
<div>
<div id="div1">1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
- 通过.previousElementSibling和.nextElementSibling获取当前元素的兄弟元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
onload = function () {
var div1 = document.getElementById("div1");
//根据当前元素获取兄弟元素
//获取当前元素的前一个元素
console.log(div1.previousElementSibling);
//获取当前元素的后一个元素
console.log(div1.nextElementSibling);
};
</script>
</head>
<body>
<div>
<div>1</div>
<div id="div1">2</div>
<div>3</div>
</div>
</body>
</html>
对元素进行操作
-
操作元素的属性：元素名.属性名=""
-
操作元素的样式：元素名.style.样式名=""
- 当遇到带有中横线的样式名，要采用驼峰命名，例如"background-color"要写成"backgroundColor"
-
操作元素的文本：元素名.innerText="" 元素名.htmlText=""
- innerText不会识别html中的标签结构，而htmlText能识别html标签
-
增加元素
-
document.createElement("元素名")：创建一个新元素
-
父元素.appendChild(新元素)：在父元素中追加一个新元素
<!-- 在列表最后添加元素"长沙" --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script> function addCs() { //新建元素li var csli = document.createElement("li"); //给元素添加属性值和文本 csli.id = "cs"; csli.innerText = "长沙"; //找到父元素city var city = document.getElementById("city"); //在父元素city中增加子元素csli city.appendChild(csli); } </script> </head> <body> <ul id="city"> <li id="bj">北京</li> <li id="sh">上海</li> <li id="gz">广州</li> <li id="sz">深圳</li> </ul> <button onclick="addCs()">增加一个</button> </body> </html> -
父元素.insertBefore(新元素,参照元素)：在指定元素前添加新元素
<!-- 在指定的元素前添加元素"长沙" --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script> function addCs() { //新建元素li var csli = document.createElement("li"); //给元素添加属性值和文本 csli.id = "cs"; csli.innerText = "长沙"; //找到父元素city var city = document.getElementById("city"); //找到参照元素"深圳" var sz = document.getElementById("sz"); //在父元素city中，在深圳前增加子元素csli city.insertBefore(csli, sz); } </script> </head> <body> <ul id="city"> <li id="bj">北京</li> <li id="sh">上海</li> <li id="gz">广州</li> <li id="sz">深圳</li> </ul> <button onclick="addCs()">增加一个</button> </body> </html> -
父元素.replaceChild(新元素,被替换元素)：用新元素替换某个子元素
<!-- 把原有元素"深圳"替换成新元素"长沙" --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script> function replaceSz() { //新建元素li var csli = document.createElement("li"); //给元素添加属性值和文本 csli.id = "cs"; csli.innerText = "长沙"; //找到父元素city var city = document.getElementById("city"); //找到参照元素"深圳" var sz = document.getElementById("sz"); //在父元素city中，把深圳替换成新元素"长沙" city.replaceChild(csli, sz); } </script> </head> <body> <ul id="city"> <li id="bj">北京</li> <li id="sh">上海</li> <li id="gz">广州</li> <li id="sz">深圳</li> </ul> <button onclick="replaceSz()">替换一个</button> </body> </html>
-
-
删除元素
- 元素.remove()：哪一个元素调用remove()方法，此元素在Dom树中被删除
- 父元素.innerHTMl=""：即可清空父元素内所有子元素，但保留父元素