文章目录
DOM总结
跟着老师从HTML入门，对CSS有了初步了解，再到接触JavaScript、JQuery,如今在学Vue的我，突然被老师的一句话给问懵了——什么是DOM？说实话，当时有点懵。嗯，很重要。嗯？是什么嘞？
1、DOM
DOM 是 Document Object Model（文档对象模型）的缩写。DOM 定义了访问 HTML 和 XML 文档的标准：“是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
用人话说就是，当创建好一个页面并加载到浏览器时，DOM就悄然而生，它会把网页文档转换为一个文档对象，主要功能是处理网页内容。
DOM 把整个页面映射为一个多层节点结构。HTML或 XML 页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。就像这样一段代码：
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
在 DOM 中，这个页面可以通过下图所示的分层节点图表示。
这张图就像一棵倒着生长的树，这就是我们所说的网页文档的DOM结构。在这张图中，每一个HTML标签都是一个DOM节点，节点内可以有基本属性、样式、事件等可供修改的属性，使开发人员获取了控制页面内容和结构的主动权。借助DOM提供的API，开发人员可以非常容易地删除、添加、替换或修改任何节点。
1）DOM结构
2）DOM节点
a、节点分类
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
b、节点之间的关系
<html>
<head>
<title>DOM 教程</title>
</head>
<body>
<h1>DOM 第一课</h1>
<p>Hello world!</p>
</body>
</html>
从上面的 HTML 中：
- html 节点没有父节点；它是根节点
- head 和 body 的父节点是 html 节点
- 文本节点 “Hello world!” 的父节点是 p 节点
并且：
- html 节点拥有两个子节点：head 和 body
- head 节点拥有一个子节点：title 节点
- title 节点也拥有一个子节点：文本节点 “DOM 教程”
- h1 和 p 节点是同胞节点，同时也是 body 的子节点
并且：
- head 元素是 html 元素的首个子节点
- body 元素是 html 元素的最后一个子节点
- h1 元素是 body 元素的首个子节点
- p 元素是 body 元素的最后一个子节点
c、选择器——找到节点
-
id选择器：通过使用 getElementById() 方法，返回的内容是一个唯一的元素节点
<!DOCTYPE html> <html> <body> <p id="intro">Hello World!</p> <p>本例演示 <b>getElementById</b> 方法！</p> <script> x=document.getElementById("intro"); document.write("<p>来自 intro 段落的文本：" + x.innerHTML + "</p>"); </script> </body> </html> -
元素选择器：通过使用 getElementsByTagName() 方法，返回内容是一个具有相同元素名称的节点数组（集合）
<!DOCTYPE html> <html> <body> <p>Hello World!</p> <p>DOM 很有用！</p> <p>本例演示 <b>getElementsByTagName</b> 方法。</p> <script> x=document.getElementsByTagName("p"); document.write("第一段的文本: " + x[0].innerHTML); </script> </body> </html> -
类选择器：通过使用 getElementsByClassName() 方法，返回内容是一个具有相同CSS类名称的节点数组（集合）
<!DOCTYPE html> <html> <body> <p class="intro">Hello World!</p> <p>本例演示 <b>getElementById</b> 方法！</p> <script> x=document.getElementsByClassName("intro"); document.write("<p>来自 intro 段落的文本：" + x.innerHTML + "</p>"); </script> </body> </html>
3）DOM修改
a、innerText
设置或获取一段纯文本到元素节点的内容上
b、innerHTML
设置和获取一段html代码段到元素节点的内容上
<!DOCTYPE html>
<html>
<body>
<p id="intro">Hello World!</p>
<script>
//找到节点
var prograph=document.getElementById("intro");
//修改或者获取节点属性：innerText
prograph.innerText='<h1>test</h1>';
alert(prograph.innerText);
//修改或者获取节点属性：innerHTML
prograph.innerHTML='<h1>test</h1>';
alert(prograph.innerHTML);
</script>
<p>上面的段落被一段脚本改变了。</p>
</body>
</html>
c、 属性 ： value，style ，width
- input的属性 value
<!DOCTYPE html>
<html>
<body>
<input id="username" value="admin"/>
<script>
//找到节点
var username=document.getElementById("username");
username.value='hello';
</script>
</body>
</html>
- select的属性 value
<!DOCTYPE html>
<html>
<body>
<select id='sltSchool'>
<option value='1'>天津大学</option>
<option value='2'>北京大学</option>
</select>
<script>
//找到节点
var sltSchool=document.getElementById("sltSchool");
var val=sltSchool.selectedOptions[0].value;
val=2;
alert(val);
</script>
</body>
</html>
2、DOM操作
1） 单个HTML DOM节点的操作
a、找到DOM节点
b、DOM修改
-
内容 ：innerHTML 和innerText
-
value属性
-
CSS样式
第一种：[选择器].style.propetyName = propertyVaule； document.getElementById("p1").style.color="blue"; document.getElementById("p1").style（*） 第二种：[选择器].classList.add(className) document.getElementById("p1").classList.add("box"); -
属性
<script> /** *原生js修改属性 */ var achor = document.getElementsByTagName('a')[0]; var address = achor.href; alert(address); achor.href = '#'; </script>
2）DOM结构的改变
a、添加节点
-
1）找到父节点
-
2）创建新节点
-
3）把新节点加到父节点中
例子1：
<script>
// 1.找到父节点
var container = document.getElementsByClassName('container')[0];
// 2. 创建新节点(刚刚创建时，是保存在内存中)
var ipt = document.createElement('input');
ipt.value= 'admin';
// 3. 把新节点加入到父节点中
container.appendChild(ipt);
</script>
例子2：
<script>
/**
* 1、多个独立的部分——每个部分都可以单独的扩展
* 2、通过某个接口建立关联
*/
var container = document.getElementsByTagName('body')[0];
var box = document.createElement('div');
box.innerText='Hello';
container.appendChild(box);
</script>
（选修）: 获取父元素引用、获取兄弟节点引用、如何通过兄弟节点的关系改变dom结构
b、移除节点
- 1）找到父节点
- 2）找到要移除的子节点
- 3）从父容器移除子节点
<!DOCTYPE html>
<html lang="en">
<body>
<div class="login"></div>
</body>
<script>
var container2 = document.getElementsByTagName('body')[0];
var loginBox = document.getElementsByClassName('login')[0];
container2.removeChild(loginBox);
</script>
</html>
c、插入节点
- 1）找到父节点
- 2）找到被插入的节点和参照节点
- 3）在父节点内部实现插入操作
<!DOCTYPE html>
<html lang="en">
<body>
<div class="login"></div>
<div id="after"></div>
</body>
<script>
var container3 = document.getElementsByTagName('body')[0];
//被插入节点
var newBox = document.createElement('div');
newBox.innerHTML='<h1>newBox</h1>';
//参照节点
var afterBox = document.getElementById('after');
container3.insertBefore(newBox,afterBox);
</script>
</html>
3）显示和隐藏
举例说明：
<head>
<meta charset="UTF-8">
<title>原生JavaScript的显示和隐藏</title>
</head>
<body>
<div class="box">content</div>
<button id="btnShow">显示</button>
<button id="btnHide">隐藏</button>
<button id="btnToggle">切换</button>
</body>
<script>
var box = document.getElementsByClassName('box')[0];
var btnShow = document.getElementById('btnShow');
var btnHide = document.getElementById('btnHide');
var btnToggle = document.getElementById('btnToggle');
btnShow.onclick = function(){
box.style.display='block';
}
btnHide.onclick = function(){
box.style.display='none';
}
btnToggle.onclick = function(){
if(box.style.display=='none'){
box.style.display='block';
}else{
box.style.display='none'
}
}
</script>
