19-[JavaScript]-DOM
Posted 不要被骄傲遮蔽了双眼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了19-[JavaScript]-DOM相关的知识，希望对你有一定的参考价值。
1、DOM操作
在JS中，所有的事物都是节点，元素、文本等都是节点。
应用场景：可以通过节点进行DOM对象的增删改查
（1）获取DOM节点的方法
//通过id获取，唯一的 var oDiv = document.getElementById(\'box\'); //通过类名获取 var oDiv = document.getElementsByClassName(\'.box\')[0]; //通过标签名获取 var oDiv = document.getElementsByTagName(\'div\')[0];
（2）常用的DOM节点
（3）节点的增删改查
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>节点的增删改查</title> </head> <body> <div style="background-color: gray"> <h3>路飞学城1</h3> </div> <div id="box"> <p>alex</p> <p>wusir</p> <p>egon</p> <p>luffy</p> <p>alice</p> </div> <div> <h3>路飞学城2</h3> </div> </body> <script type="text/javascript"> var oDiv = document.getElementsByTagName(\'div\')[0]; // 创建元素节点 var oH2 = document.createElement(\'h2\'); // 设置oH2的内容，p标签会被解析成p元素显示到HTML页面中 oH2.innerHTML = \'<p>嘿 hello</p>\'; // 只设置元素内的文本内容，div标签将被当做文本元素 // oH2.innerText = \'哈哈\'; // 将创建好的元素节点添加到指定元素所有内容的后面 oDiv.appendChild(oH2); // 获取元素节点里的所有内容 包括标签和文本 console.log(oDiv.innerHTML); // 表示元素节点的标签名大写 console.log(oDiv.tagName); // 只获取元素内的文本内容，html标签将被忽略 console.log(oDiv.innerText); // 设置id 类名 oH2.id = \'luffyID\'; oH2.className = \'luffyClassName\'; console.log(oDiv.innerHTML); //获取标签属性 console.log(oH2.getAttribute(\'class\')); // 设置标签属性 oH2.setAttribute(\'href\',\'www.baidu.com\'); console.log(oDiv.innerHTML); // 删除元素上的属性 oH2.removeAttribute(\'class\'); console.log(oDiv.innerHTML); // 删除创建的对象 console.log(oDiv.innerHTML); oDiv.removeChild(oH2); console.log(oDiv.innerHTML); // 如果为true 克隆当前元素与元素的所有子节点 console.log(oH2.cloneNode(true)); // 父节点.replaceChild(新节点,子节点) 用新节点替换某个子节点 console.log(oDiv.innerHTML); var op = document.createElement(\'p\'); op.innerText = \'我是一个段落\'; oDiv.replaceChild(op,oH2); console.log(oDiv.innerHTML); // style属性 ：css内联样式属性值 oDiv.style.backgroundColor = \'red\'; </script> </html>
2、模态框案例
（1）自己写的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style type="text/css"> html, body { height: 100%; } #box0 { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); } #box { position: relative; top: 50%; left: 50%; height: 200px; width: 400px; background-color: #ffffff; } #p1 { height: 100%; width: 100%; color: red; line-height: 200px; text-align: center; } .close { color: blue; font-weight: bold; position: absolute; top: 0; right: 0; cursor: pointer; } </style> <body> <input type="button" id=\'btn\' value="模态框弹出"> </body> <script type="text/javascript"> var oBtn = document.getElementById(\'btn\'); oBtn.onclick = function () { // 1.创建遮罩层 var oDiv = document.createElement(\'div\'); oDiv.id = \'box0\'; this.parentNode.insertBefore(oDiv, oBtn); // 2.创建对话框box var oBox = document.createElement(\'div\'); oBox.id = \'box\'; oBtn.previousSibling.appendChild(oBox); // 4.添加文字 var oP = document.createElement(\'p\'); oP.id = \'p1\'; oP.innerText = \'模态框弹出\'; oBox.appendChild(oP); console.log(this.parentNode); // 5.添加关闭按钮 var oSpan = document.createElement(\'span\'); oSpan.innerText = \'X\'; oSpan.className = \'close\'; oP.parentNode.insertBefore(oSpan, oP); // 6.关闭模态框 oSpan.onclick = function () { console.log(oSpan.parentNode.parentNode.parentNode); oSpan.parentNode.parentNode.parentNode.removeChild(oDiv) } }; </script> </html>
（2）标准答案
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>模态框案例</title>
<style type="text/css">
*{padding: 0; margin: 0;}
html,body{ height: 100%;}
#box{ width: 100%; height: 100%; background-color: rgba(0,0,0,.3)}
#content{ position: relative; top: 150px; width: 400px; height: 200px;line-height: 200px;
text-align: center; background-color: #fff;color: red;margin: 0 auto;}
#span1{ position: absolute; background-color: red; top: 0; right: 0; width: 30px; height: 30px;
line-height: 30px; text-align: center;color: white; cursor: pointer;}
</style>
</head>
<body>
<button id="btn">弹出</button>
</body>
<script type="text/javascript">
//dom Document Object Model
//树状结构
/*
html
head body 节点
span div button img ....
*/
//1.获取dom元素
var btn = document.getElementById(\'btn\');
//2.创建divdom元素
var oDiv = document.createElement(\'div\');
var oP = document.createElement(\'p\');
var oSpan = document.createElement(\'span\');
oDiv.id = \'box\';
oP.id = \'content\';
oP.innerText = \'模态窗成功弹出\';
oSpan.id = \'span1\';
oSpan.innerText = \'X\';
oDiv.appendChild(oP);
oP.appendChild(oSpan);
//3.给按钮添加点击事件
btn.onclick = function () {
this.parentNode.insertBefore(oDiv,btn);
};
oSpan.onclick = function () {
oDiv.parentNode.removeChild(oDiv);
};
/*
* 总结：
* 获取 创建 设置相应的属性 设置相关内容
* innerHTML appendChild parentNode insertBefore removechild
* */
</script>
</html>
3、点击有惊喜
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{padding: 0;margin: 0;} .box{ width: 200px; height: 200px; background: red; text-align: center; color: white; line-height: 200px; font-size: 23px; font-weight: bold; margin: 20px auto; } </style> </head> <body> <div class="box"> 点击有惊喜！！ </div> <!--<div class="box"></div>--> </body> <script type="text/javascript"> var oBox = document.getElementsByClassName(\'box\')[0]; console.log(oBox.innerText); //初始化点击的次数。通过次数的增加来改变DOM的样式 var a = 0; oBox.onclick = function(){ a++; if(a%4===1){ this.style.background = \'green\'; this.innerText = \'继续点击哦！\'; }else if(a%4==2){ this.style.background = \'blue\'; this.innerText = \'哈哈！骗你的\'; }else if(a%4==3){ this.style.background = \'transparent\'; this.innerText = \'\'; }else{ this.style.background = \'red\'; this.innerText = \'点击有惊喜！！\'; } } /* * 总结： * dom操作 * 创建 获取 设置 追加 属性 点击事件 移除 * */ </script> </html>
4、简易留言板
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>留言板</title> </head> <body> <h1>简易留言板</h1> <div id="box"> <!--<ul> </ul>--> </div> <textarea id="msg"></textarea> <input type="button" id="btn" value="留言"/> <button onclick="sum()">统计</button> </body> <script type="text/javascript"> //1.获取父级元素 var box = document.getElementById(\'box\'); var btn = document.getElementById(\'btn\'); var msg = document.getElementById(\'msg\'); //2.创建ul标签元素 var ul = document.createElement(\'ul\'); box.appendChild(ul); //3.添加事件 var count = 0; btn.onclick = function(){ console.log(msg.value); var li = document.createElement(\'li\'); //设置内容 li.innerHTML = msg.value + "<span> X</span>"; var lis = document.getElementsByTagName(\'li\'); if(lis.length == 0){ ul.appendChild(li); count++; }else{ ul.insertBefore(li,lis[0]); count++; } msg.value = \'\'; var spans = document.getElementsByTagName(\'span\'); for(var i = 0; i< spans.length; i++){以上是关于19-[JavaScript]-DOM的主要内容，如果未能解决你的问题，请参考以下文章
更改页面javascript代码（TamperMonkey）以将键盘笔触发送到父DOM
jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段