Dom
Posted bltstop
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Dom相关的知识，希望对你有一定的参考价值。
DOM：
文档对象模型（Document Object Model，DOM）是一种用于html和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是javascript语言规范里的规定的核心内容。
一. Dom中查找元素
1.直接选择器
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
document.getElementById 根据ID获取一个标签
2.间接选择器
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
二. Dom中操作元素
1. innerText：
获取标签中的文本内容;tag.innerText
对标签内部文本进行更新： tag.innerText = “”
2. className（样式操作）
tag.className = :直接整体做操作
tag.classList.add(‘样式名‘) ：添加指定样式
tag.classList.remove(‘样式名‘) ：删除指定样式
3.innerHTML
获取标签中的全部内容，包括标签
4.value
input系列 ：获取当前标签中的值；
select 标签：获取选中的value值；
textarea(多行文本）：value获取当前标签中的值。
5.搜索框的示例：
旧版：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 600px;margin: 0 auto "> <input id="i1" onfocus="Focus();" onblur="Blur();" on type="text" value="请输入关键字"/> <!--onfocus:当鼠标放上去的时候自动检索光标， onblur:当光标移走的时候重新显示原来的值--> </div> <script> function Focus() { var tag = document.getElementById(‘i1‘); var val = tag.value; if(val == ‘请输入关键字‘){ tag.value = ""; } } function Blur() { var tag = document.getElementById(‘i1‘); var val = tag.value; if(val ==""){ tag.value = "请输入关键字"; } } </script> </body> </html>
新版：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 600px;margin: 0 auto "> <input type="text" placeholder="请输入关键字"/> </div> </body> </html>
模态示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.c1{
position: fixed;
left: 0;
top:0;
right:0;
bottom: 0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
.c2{
width: 500px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top:50%;
margin-left: -250px;
margin-top: -200px;
z-index: 10;
}
</style>
</head>
<body style="margin: 0;">
<!--body默认有边距的，通过设置margin:0 去掉边距-->
<div>
<input type="button" value="添加" onclick="ShowModel()" />
<table>
<thead>
<tr>
<th>主机名</th>
<th>端口</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1.1.1</td>
<td>190</td>
</tr>
<tr>
<td>1.1.1.2</td>
<td>192</td>
</tr>
<tr>
<td>1.1.1.3</td>
<td>193</td>
</tr>
</tbody>
</table>
</div>
<!--遮罩层开始-->
<div id = "i1" class="c1 hide"></div>
<!--遮罩层结束-->
<!--弹出框开始-->
<div id = "i2" class="c2 hide">
<p><input type="text" /></p>
<p><input type="text" /></p>
<p>
<input type="button" value="取消" onclick="HideModel()" />
<input type="button" value="确定" />
</p>
</div>
<!--弹出框结束-->
<script>
function ShowModel() {
document.getElementById(‘i1‘).classList.remove(‘hide‘);
document.getElementById(‘i2‘).classList.remove(‘hide‘);
}
function HideModel() {
document.getElementById(‘i1‘).classList.add(‘hide‘);
document.getElementById(‘i2‘).classList.add(‘hide‘);
}
</script>
</body>
</html>
效果：
3. checkbox
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .c1{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: black; opacity: 0.6; z-index: 9; } .c2{ width: 500px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -200px; z-index: 10; } </style> </head> <body style="margin: 0;"> <div> <input type="button" value="添加" onclick="ShowModel();" /> <input type="button" value="全选" onclick="ChooseAll();" /> <input type="button" value="取消" onclick="CancelAll();" /> <input type="button" value="反选" onclick="ReverseAll();" /> <table> <thead> <tr> <th>选择</th> <th>主机名</th> <th>端口</th> </tr> </thead> <tbody id="tb"> <tr> <td> <input type="checkbox" /> </td> <td>1.1.1.1</td> <td>190</td> </tr> <tr> <td><input type="checkbox" id="test" /></td> <td>1.1.1.2</td> <td>192</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.3</td> <td>193</td> </tr> </tbody> </table> </div> <!-- 遮罩层开始 --> <div id="i1" class="c1 hide"></div> <!-- 遮罩层结束 --> <!-- 弹出框开始 --> <div id="i2" class="c2 hide"> <p><input type="text" /></p> <p><input type="text" /></p> <p> <input type="button" value="取消" onclick="HideModel();"/> <input type="button" value="确定"/> </p> </div> <!-- 弹出框结束 --> <script> function ShowModel(){ document.getElementById(‘i1‘).classList.remove(‘hide‘); document.getElementById(‘i2‘).classList.remove(‘hide‘); } function HideModel(){ document.getElementById(‘i1‘).classList.add(‘hide‘); document.getElementById(‘i2‘).classList.add(‘hide‘); } function ChooseAll(){ var tbody = document.getElementById(‘tb‘); // 获取所有的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循环所有的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = true; } } function CancelAll(){ var tbody = document.getElementById(‘tb‘); // 获取所有的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循环所有的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = false; } } function ReverseAll(){ var tbody = document.getElementById(‘tb‘); // 获取所有的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循环所有的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}} </script> </body> </html>
效果：
注：JS语句必须加分号；
6.属性及创建标签
1].对标签中的属性进行操作
1）.attributes
2）. getattribute
3）. removeattribute
2].创建标签，并添加到HTML中
两种方式：1）字符串形式（代码中方式1）
2）对象的方式（代码中方式2）
document.createElement(‘div‘) :创建div标签
document.createElement(‘input‘) :创建input标签
document.createElement(p‘) :创建p标签
<!--类似于点赞的，点一次，访问量加1--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--<input type="button" onclick="AddEle1();" value="+" />--> <input type="button" onclick="AddEle2();" value="+" /> <div id="i1"> <p><input type="text" /></p> <!--p标签分段落--> <!--<hr />--> <!--分割线--> </div> <script> // function AddEle1() { // //创建一个标签；方式1 // //将标签添加到i1里面； // var tag = "<p><input type=‘text‘ /></p>"; // document.getElementById(‘i1‘).insertAdjacentHTML("beforeEnd",tag) // } function AddEle2() { //创建一个标签；方式2 //将标签添加到i1里面； var tag = document.createElement(‘input‘); tag.setAttribute(‘type‘, ‘text‘); tag.style.fontSize="16px"; tag.color="red"; document.getElementById(‘i1‘).appendChild(tag) } </script> </body> </html>
document.getElementById(‘i1‘).insertAdjacentHTML("beforeEnd",tag)
第一个参数只能是beforeBegin; afterBigin ; beforeEnd ; afterEnd 控制标签添加的位置
7 . 提交表单
通过DOM，任何标签（不仅仅是form）都可以提交表单；
<!--提交表单,方式2:通过a标签--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id="f1" action="http://www.baidu.com"> <input type="text" /> <a style="border: black solid 1px" onclick="submitForm();">提交吧</a> </form> <script> function submitForm() { document.getElementById(‘f1‘).submit() } </script> </div> </body> </html>
8. 其他
console.log 输出框
alert 弹出框
confirm 确认框
// URL和刷新
location.href 获取URL
location.href = "url" 重定向
location.reload() 重新加载
// 定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器
单次定时器之QQ邮箱中删除邮件后提示信息：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="status"></div> <input type="button" value="删除" onclick="deleteEle();" /> <script> function deleteEle() { document.getElementById(‘status‘).innerText = (‘已删除‘); setTimeout(function () { // 设置定时 document.getElementById(‘status‘).innerText = ""; },5000); // 5秒后“已删除”提示消失 } </script> </body> </html>
三. 事件
绑定事件有两种方式：
1）直接标签绑定：
2）先获取dom对象，然后进行绑定：
注：对于this，指向当前触发事件的标签，（this不要瞎用，用第二种）
第一种绑定方式：<input type="button" onclick=‘clickOn(this)‘>
function clickOn(self){
//self 当前点击的标签
}
第二种绑定方式：<input id="i1" type="button" >
document.getElementByID（‘i1’).onclick = function(){
//this. 当前点击的标签
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="test"> zhangsan </div> <script> var mydiv = document.getElementById(‘test‘); console.log(mydiv); mydiv.onclick = function () { console.log(‘lisi‘); } mydiv.onclick = function () { console.log(‘孜彧‘); } // 当程序执行到这里的时候，第一个匿名函数的console.log()的内容会被第二个覆盖,怎么做才会同时绑定两个事件呢？？ // 这就要用到我们的第三种事件绑定方式 </script> </body> </html>
第三种绑定方式： addEventListener（）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="test"> zhangsan </div> <script> var mydiv = document.getElementById(‘test‘); mydiv.addEventListener("click",function () {console.log("孜彧")},false); mydiv.addEventListener("click",function () {console.log("呵呵")},false); // 三个参数：①事件 ②匿名函数 ③false/true // false:事件之冒泡模型 true:事件之捕捉模型 </script> </body> </html>
事件之捕捉与冒泡模型：（高级写法，面试常用）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> #main{ background-color: red; width: 400px; height: 300px; } #content{ background-color: pink; width: 200px; height: 150px; } </style> <body> <div id="main"> <div id="content"></div> </div> <script> var mymain = document.getElementById(‘main‘); var mycontent = document.getElementById(‘content‘); mymain.addEventListener("click",function () {console.log("main")},false); mycontent.addEventListener("click",function () {console.log("content")},false); // 首先打印的是main ，然后打印的是content // false:事件之冒泡模型 mymain.addEventListener("click",function () {console.log("main")},true); mycontent.addEventListener("click",function () {console.log("content")},true); // 首先打印的是content ，然后打印的是main // true:事件之捕捉模型 // 面试题 </script> </body> </html>
常用事件：
1.onclick
2.onblur
3.onfocus
4.onmouseover
5.onmouseout
行为（js） 样式(CSS ) 结构(html)相分离的示例（代码框架略显高级）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1px" width="300px"> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> </tr> </table> <script> var myTrs = document.getElementsByTagName(‘tr‘); var len = myTrs.length; for(var i=0;i<len;i++){ myTrs[i].onmouseover = function () { this.style.backgroundColor = "red"; // myTrs[i].style.backgroundColor = "red"; 用 myTrs[i]是行不通的，为什么？？？ 作用域不同 } myTrs[i].onmouseout = function () { this.style.backgroundColor = ""; } } </script> </body> </html>
this：当前谁触发事件，就指向那个标签；
table会自动加thead，tbody,用children查找的时候要注意，直接找tr找不到；
四. js词法分析（*********重点*********）
1.浏览器在执行代码之前会进行分析，函数在形成调用的那一瞬间会形成一个活动对象：active object --->AO
依次分析：形式参数
局部变量
函数申明表达式
词法分析完，从活动对象中去执行（有优先级）；
<!--js词法分析--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> function t1(age) { console.log(age); // var age = 27; console.log(age); // function age() {} console.log(age); } t1(3); </script> </body> </html>
运行结果：
虽然不会像上述代码中去定义，但是要明白代码执行机理。
===============================================================================================================================================
学习心得分享：
手册查询：w3school
css完全参考手册 3.0
前端编译器：subline Text（Emmet插件） 提高编写效率，也支持python，
以上是关于Dom的主要内容，如果未能解决你的问题，请参考以下文章