共计 6254 个字符，预计需要花费 16 分钟才能阅读完成。
如果你想成为一名优秀的 java 架构师，看这里 → 乐字节免费公开课（腾讯课堂）
如需要跟多资料请点击右侧（记住入群暗号：66）→ 这是一条不归路，有秃头风险，请慎重选择！
DOM 对象
<font color=”red”>DOM</font>：Document Object Model 文档对象模型
要实现页面的动态交互效果，bom 操作远远不够，需要操作 html 才是核心。如何操作 htm，就是 DOM。简单的说，dom 提供了用程序动态控制 html 接口。DOM 即文档对象模型描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。dom 处于 javascript 的核心地位上。
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
节点
加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成，组成一个节点树。对于页面中的元素，可以解析成以下几种类型的节点：
| 节点类型 | HTML 内容 | 例如 |
|---|---|---|
| 文档节点 | 文档本身 | 整个文档 document |
| 元素节点 | 所有的 HTML 元素 | 、<div>、<p> |
| 属性节点 | HTML 元素内的属性 | id、href、name、class |
| 文本节点 | 元素内的文本 | hello |
| 注释节点 | HTML 中的注释 | <!– –> |
html –> 文档节点
div –> 元素节点
title –> 属性节点
测试 Div –> 文本节点
<html>
<head>
<title> 树! 树! 到处都是树!</title>
</head>
<body>
<div title="属性节点"> 测试 Div</div>
</body>
</html>
操作元素的节点
当 HTML 文档在被解析为一颗 DOM 树以后，里面的每一个节点都可以看做是一个一个的对象，我们称为 DOM 对象，对于这些对象，我们可以进行各式各样的操作，查找到某一个或者一类节点对象，可以创建某种节点对象，可以在某个位置添加节点对象，甚至可以动态地删除节点对象，这些操作可以使我们的页面看起来有动态的效果，后期结合事件使用，就能让我们的页面在特定时机、特定的事件下执行特定的变换。
获取节点
在进行增、删、改的操作时，都需要指定到一个位置，或者找到一个目标，此时我们就可以通过 Document 对象提供的方法，查找、定位某个对象（也就是我们说的节点）。
<font color=”red”> 注意：操作 dom 必须等节点初始化完毕后，才能执行。</font>
处理方式两种:
（1）把 script 调用标签移到 html 末尾即可；
（2）使用 onload 事件来处理 JS，等待 html 加载完毕再加载 onload 事件里的 JS。
window.onload = function () { // 预加载 html 后执行}; 获取方式如下：
| 方法 | 描述 |
|---|---|
| getElementById() | 根据 id 获取 dom 对象，如果 id 重复，那么以第一个为准 |
| getElementsByTagName() | 根据标签名获取 dom 对象数组 |
| getElementsByClassName() | 根据样式名获取 dom 对象数组 |
| getElementsByName() | 根据 name 属性值获取 dom 对象数组，常用于多选获取值 |
<body>
<p id="p1" class="para"> 这是一个段落 <span> 文本 </span></p>
<p id="p1" class="para"> 这又是一个段落 </p>
<input type="text" name="txt" />
<input type="checkbox" name="hobby" value="游泳" /> 游泳
<input type="checkbox" name="hobby" value="篮球" /> 篮球
<input type="checkbox" name="hobby" value="足球" /> 足球
<hr />
<a href="javascript:void(0)" onclick="testById()"> 按照 id 获取 </a>
<a href="javascript:void(0)" onclick="testByName()"> 按照 name 获取 </a>
<a href="javascript:void(0)" onclick="testByTagName()"> 按照标签名获取 </a>
<a href="javascript:void(0);" onclick="testByClass();"> 按照 class 获取 </a>
</body> <font color=”red”> 说明：href=”javascript:void(0)”：伪协议，表示不执行跳转，而执行指定的点击事件。</font>
<script type="text/javascript">
// 按照 id 获取元素
function testById() {
// 返回单个对象
var p = document.getElementById("p1");
console.log(p);
// 表示获取元素开始标签和结束标签之间的 html 结构
console.log(p.innerHTML);
console.log(p.innerText); // 表示获取标签之间的普通文本
}
// 按照 name 获取元素
function testByName() {
// 对象数组
var ho = document.getElementsByName("hobby");
console.log(ho);
for(var i = 0; i <= ho.length - 1; i++) {console.log(ho[i].value);
}
}
// 按照标签名获取元素
function testByTagName() {
// 对象数组
var inputArr = document.getElementsByTagName("input");
for(var i = 0; i < inputArr.length; i++) {if(inputArr[i].type == "text") {console.log("text 类型");
} else if(inputArr[i].type == "checkbox") {if(inputArr[i].checked) {console.log(inputArr[i].value);
}
}
}
}
// 按照 class 属性获取元素
function testByClass() {
// 对象数组
var ps = document.getElementsByClassName("para");
console.log(ps[0].innerHTML);
ps[0].innerHTML += "这是一段新的文本";
}
</script>创建节点和插入节点
很多时候我们想要在某个位置插入一个新的节点，此时我们首先需要有一个节点存在，可以通过以下几种方式创建新节点。
创建节点
| 方法 | 描述 |
|---|---|
| createElement() | 创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象 |
| createTextNode() | 创建一个文本节点，可以传入文本内容 |
| innerHTML | 也能达到创建节点的效果，直接添加到指定位置了 |
插入节点
| 方法 | 描述 |
|---|---|
| write() | 将任意的字符串插入到文档中 |
| appendChild() | 向元素中添加新的子节点，作为最后一个子节点 |
| insertBefore() | 向指定的已有的节点之前插入新的节点 newItem：要插入的节点 exsitingItem：参考节点 需要参考父节点 |
<button onclick="add()"> 添加段落 </button>
<div id="container"></div>
<script type="text/javascript">
function add(){var container = document.getElementById('container')
var paragraph = document.createElement('p');
var txt = document.createTextNode('hello')
paragraph.appendChild(txt)
container.appendChild(paragraph)
}
</script>添加 “ 段落、图片、文本框、选项 ”
<body>
<button onclick="addPara();"> 添加段落 </button>
<button onclick="addImg();"> 添加图片 </button>
<button onclick="addTxt();"> 添加文本框 </button>
<button onclick="addOptions()"> 添加选项 </button>
<select name="music">
<option value="-1"> 你心内的一首歌 </option>
<option value="0"> 南山南 </option>
<option value="1"> 喜欢你 </option>
</select>
<hr />
<div id = "container"></div>
</body><script type="text/javascript">
// 添加 p 节点
function addPara(){
// 获取容器
var container =document.getElementById("container");
// 创建段落 <p></p>
var p =document.createElement('p');
// 第一种方式
// 创建文本节点
var txt=document.createTextNode("以后的你会感谢现在努力的你");
// 将 txt 节点追加到 p 节点中
p.appendChild(txt);
// 将 p 节点追加到 container 节点中
container.appendChild(p);
/*
// 第二种方式
// 向 p 节点中添加内容
p.innerHTML = "以后的你会感谢现在努力的你";
// 将 p 节点追加到 container 节点中
container.appendChild(p);
*/
/*
// 第三种方式
// 将字符串类型的 p 标签内容添加到 container 中，不会添加多次
var str = "<p> 以后的你会感谢现在努力的你 </p>";
container.innerHTML = str;
*/
}
// 添加图片
function addImg(){
// 创建图片
var img = document.createElement("img") ;
/*
// 设置属性第一种方式
// 设置 img 标签的 src 属性
// img.src ="http://www.baidu.com/img/bd_logo1.png";
*/
// 设置属性第二种方式
// setAttribute() 方法添加指定的属性，并为其赋指定的值。// 设置 img 的 src 属性
img.setAttribute('src','http://www.baidu.com/img/bd_logo1.png');
img.style.width = '300px';
img.style.height = '200px';
// 获取容器
var container =document.getElementById("container");
// 将 img 节点追加到 container 中。container.appendChild(img);
}
// 添加文本框
function addTxt(){
// 创建文本框
var txt =document.createElement("input");
/*
// 设置类型第一种方式
txt.type = "text";
txt.value = "添加成功";
*/
// 设置类型第二种方式
txt.setAttribute('type', 'text');
txt.setAttribute('value', '添加成功');
/*
* txt.type = 'password'
* txt.value = '123'
*/
// 获取容器
var container =document.getElementById("container");
// 将 txt 节点追加到 container 中。container.appendChild(txt);
}
// 添加下拉框的选项
function addOptions(){
// 第一种方式
/*
// 创建下拉项
var option = document.createElement("option") ;
option.value = "2" ;
option.text = "油菜花" ;
// 获取下拉框
var sel = document.getElementsByTagName("select")[0];
// 添加 下拉项
sel.appendChild(option);
*/
// 第二种方式:
var option = document.createElement("option") ;
option.value = "2" ;
option.text = "不该" ;
// 获取下拉框
var sel = document.getElementsByTagName("select")[0];
// 添加下拉项
sel.options.add(option);
// 第三种方式: 添加下拉项
var sel = document.getElementsByTagName("select")[0];
sel.innerHTML += "<option value ='2'> 英雄 </option>" ;
}
</script>间接查找节点
| ** 方法 \ | 属性 ** | 描述 |
|---|---|---|
| childNodes | 返回元素的一个子节点的数组 | |
| firstChild | 返回元素的第一个子节点 | |
| lastChild | 返回元素的最后一个子节点 | |
| nextSibling | 返回元素的下一个兄弟节点 | |
| parentNode | 返回元素的父节点 | |
| previousSibling | 返回元素的上一个兄弟节点 |
删除节点
| ** 方法 \ | 属性 ** | 描述 |
|---|---|---|
| removeChild() | 从元素中移除子节点 |
<script type="text/javascript">
function delNode(){var programmer =document.getElementById("programmer");
// 从父元素中删除节点，获取要删除对象的父元素，然后从父元素中删除该对象
programmer.parentNode.removeChild(programmer);
}
</script>
<body>
<span id="programmer"> 程序猿 </span>
<a href="javascript:void(0)" onclick="delNode();"> 删除 </a>
</body>ipt type=”text/javascript”>
function delNode(){var programmer =document.getElementById("programmer");
// 从父元素中删除节点，获取要删除对象的父元素，然后从父元素中删除该对象
programmer.parentNode.removeChild(programmer);
}</script>
<body>
<span id="programmer"> 程序猿 </span>
<a href="javascript:void(0)" onclick="delNode();"> 删除 </a></body>