开篇寄语：
要紧盯住自己的人生目标，不要被周围毫无意义的人或者事所牵绊，尤其不要生闲气。
看淡一点，不要太在乎别人的那张脸；简单一点，不要用他人的尺子，量自己的长短。心态好，一切安好。
昨天给大家提到过，那现在就一起来看看DOM。
二、JavaScript操作DOM对象
1、什么是DOM
DOM：Document Object Model 文档对象模型
要实现页面的动态交互效果，BOM操作远远不够，需要操作 html 才是核心。如何操作 html，就是 DOM。
简单的说，DOM提供了用程序动态控制 html 接口。DOM即文档对象模型描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。DOM处于javascript 的核心地位上。
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
2、节点
加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成，组成一个节点树。对于页面中的元素，可以解析成以下几种类型的节点：
| 节点类型 | HTML内容 | 例如 |
|---|---|---|
| 文档节点 | 文档本身 | 整个文档 |
| 元素节点 | 所有的HTML元素 | 、 |
| 属性节点 | HTML元素内的属性 | |
| 文本节点 | 元素内的文本 | |
| 注释节点 | HTML中的注释 |
<html><head><meta charset="utf-8" /><title>树！树！到处都是树！title>head><body><h1>百度h1><a href="http://www.baidu.com" target="_blank" rel="external nofollow" >百度a>body>html>
3、元素节点的操作
当HTML文档在被解析为一颗DOM树以后，里面的每一个节点都可以看做是一个一个的对象，我们成为DOM对象，对于这些对象，我们可以进行各式各样的操作，查找到某一个或者一类节点对象，可以创建某种节点对象，可以在某个位置添加节点对象，甚至可以动态地删除节点对象，这些操作可以使我们的页面看起来有动态的效果，后期结合事件使用，就能让我们的页面在特定时机、特定的事件下执行特定的变换。
获取节点
在进行增、删、改的操作时，都需要指定到一个位置，或者找到一个目标，此时我们就可以通过Document对象提供的方法，查找、定位某个对象(也就是我们说的节点)。
注意：操作 dom 必须等节点初始化完毕后，才能执行。处理方式两种:
a. 把 script 调用标签移到html末尾即可；
b. 使用onload事件来处理JS，等待html 加载完毕再加载 onload 事件里的 JS。
window.onload = function() { // 当页面加载完后调用函数};<html><head><meta charset="UTF-8"><title>title><script type="text/javascript">window.onload = function() {var dv = document.getElementById("dv");dv.innerHTML = "我是一个div";}script>head><body><div id="dv">div>body>html>
获取方式如下：
<html><head><meta charset="UTF-8"><title>操作DOM对象-获取节点title>head><body><p id="p1" class="ptext">这是一个段落<span>文本span>p><p id="p2" class="ptext">这又是一个段落p><input type="checkbox" name="hobby" value="游泳" />游泳<input type="checkbox" name="hobby" value="篮球" />篮球<input type="checkbox" name="hobby" value="足球" />足球<input type="text" value="我是一个输入框" /><a href="javascript:void(0);" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" onclick="testById();">根据id获取元素a><a href="javascript:void(0);" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" onclick="testByName();">根据name获取元素a><a href="javascript:void(0);" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" onclick="testByTagName();">根标签名称获取元素a><a href="javascript:void(0);" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" onclick="testByClass();">根据class获取元素a><script type="text/javascript">// 根据id获取元素function testById() {// 返回单个对象var p = document.getElementById("p1");console.log(p);console.log(p.innerHTML);// 表示获取元素开始标签和结束标签之间的html结构console.log(p.innerText);// 表示获取标签之间的普通文本}// 根据name获取元素function testByName() {// 返回对象数组var hobby = document.getElementsByName("hobby");console.log(hobby);// 循环遍历每一个元素for (var i = 0; i < hobby.length; i++) {console.log(hobby[i].value);}}// 根据标签名称获取元素function testByTagName() {// 返回对象数组var inputArr = document.getElementsByTagName("input");console.log(inputArr);// 循环遍历每一个元素for (var i = 0; i < inputArr.length; i++) {// 判断是否是text类型if ("text" == inputArr[i].type) {console.log(inputArr[i].value);// 判断是否是checkbox类型} else if ("checkbox" == inputArr[i].type) {// 判断是否选中if (inputArr[i].checked) {console.log(inputArr[i].value);}}}}// 根据class获取元素function testByClass() {// 返回对象数组var ptext = document.getElementsByClassName("ptext");console.log(ptext);console.log(ptext[0].innerHTML);console.log(ptext[0].innerText);ptext[0].innerHTML += "，这是一段新的文本";}script>body>html>
说明：
href="javascript:void(0)" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ;
伪协议，表示不执行跳转，而执行指定的点击事件。
创建节点和插入节点
很多时候我们想要在某个位置插入一个新的节点，此时我们首先需要有一个节点存在，可以通过以下几种方式创建新节点。
创建节点
插入节点
添加段落
<html><head><meta charset="utf-8" /><title>添加段落title>head><body><button onclick="addP();">添加段落button><div id="container">div><script type="text/javascript">function addP() {// 第一种方式// 根据id获取元素divvar container = document.getElementById('container');// 创建p元素var p = document.createElement('p');// 创建文本节点var txt = document.createTextNode('以后的你会感谢现在努力的你');// p元素添加文本节点p.appendChild(txt);// div元素添加p元素container.appendChild(p);// 第二种方式// 向p节点中添加内容p.innerHTML = "以后的你会感谢现在努力的你2";// 将p节点追加到container节点中container.appendChild(p);// 第三种方式// 将字符串类型的p标签内容添加到container中var str = "
以后的你会感谢现在努力的你3
";container.innerHTML = str;}script>body>html>
添加图片
<html><head><meta charset="utf-8" /><title>添加图片title>head><body><button onclick="addImg();">添加图片button><div id="container">div><script type="text/javascript">// 添加图片function addImg() {// 创建img元素var img = document.createElement("img");// 设置属性第一种方式// 设置img元素的src属性img.src = "http://www.baidu.com/img/bd_logo1.png";img.style.width = '500px';img.style.height = '260px';// 设置属性第二种方式// setAttribute() 方法添加指定的属性，并为其赋指定的值。// 设置img元素的src属性img.setAttribute('src', 'http://www.baidu.com/img/bd_logo1.png');img.setAttribute("style", "width: 500px;height: 260px;");// 获取div元素var container = document.getElementById("container");// 将img元素节点追加到div元素中container.appendChild(img); // 第三种方式// 将字符串类型的p标签内容添加到container中container.innerHTML = "";}script>body>html>
添加文本框
<html><head><meta charset="utf-8" /><title>添加文本框title>head><body><button onclick="addTxt();">添加文本框button><div id="container">div><script type="text/javascript">// 添加文本框function addTxt() {// 创建input元素var txt = document.createElement("input");// 设置类型第一种方式txt.type = "text";txt.value = "添加成功";//txt.type = 'password'//txt.value = '123'// 设置类型第二种方式txt.setAttribute('type', 'text');txt.setAttribute('value', '添加成功');// 获取div元素var container = document.getElementById("container");// 将input节点追加到div元素中container.appendChild(txt); // 第三种方式// 将字符串类型的p标签内容添加到container中container.innerHTML = "";}script>body>html>
添加选项框
<html><head><meta charset="utf-8" /><title>添加选项框title>head><body><button onclick="addOptions()">添加选项button><select name="music"><option value="0">---请选择---option><option value="1">南山南option><option value="2">喜欢你option>select><script type="text/javascript">// 添加下拉框的选项function addOptions() {// 第一种方式// 创建下拉项var option = document.createElement("option");option.value = "3";option.text = "需要人陪";// 获取下拉框var sel = document.getElementsByTagName("select")[0];// 添加下拉项 sel.appendChild(option);// 第二种方式var option = document.createElement("option");option.value = "4";option.text = "光年之外";// 获取下拉框var sel = document.getElementsByTagName("select")[0];// 添加下拉项sel.options.add(option);// 第三种方式// 获取下拉框var sel = document.getElementsByTagName("select")[0];// 添加下拉选项sel.innerHTML += "风的季节";}script>body>html>
间接查找节点
<html><head><meta charset="utf-8" /><title>间接查找节点title>head><body><button type="button" id="btn">测试按钮button><div id="dv">开始<form><table><input /><input /><input id="inp" /><span>span>table>form>结束div><script type="text/javascript">var dv = document.getElementById('dv');// childNodes返回元素的一个子节点的数组function get_childNodes() {console.log(dv.childNodes[1]); // 获取到form}// firstChild返回元素的第一个子节点function get_firstChild() {console.log(dv.firstChild);}// lastChild返回元素的最后一个子节点function get_lastChild() {console.log(dv.lastChild);}// previousSibling返回元素的上一个兄弟节点function get_previousSibling() {var inp = document.getElementById('inp');console.log(inp.previousSibling);} // nextSibling返回元素的下一个兄弟节点function get_nextSibling() {var inp = document.getElementById('inp');console.log(inp.nextSibling);} // parentNode返回元素的父节点function get_parentNode() {var inp = document.getElementById('inp');console.log(inp.parentNode);}var btn = document.getElementById('btn');btn.onclick = get_childNodes; // DOM方式处理 解耦script>body>html>
删除节点
| 方法|属性 | 描述 |
|---|---|
| removeChild() | 从元素中移除子节点 |
第一种：获取父节点，然后删除子节点
父节点.removeChild(childNode);
第二种：通过旧节点定位到父节点，然后删除子节点
childNode.parentNode.removeChild(childNode);
<html><head><meta charset="utf-8" /><title>删除节点title>head><body><div id="dv"><span id="cxy">程序猿span><a href="javascript:void(0)" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" onclick="delNode();">删除a>div><script type="text/javascript">function delNode() {// 第一种方式：获取父节点，然后删除子节点var dv = document.getElementById('dv');var cxy = document.getElementById("cxy");dv.removeChild(cxy);// 第二种方式：通过旧节点定位到父节点，然后删除子节点//var cxy = document.getElementById("cxy");//cxy.parentNode.removeChild(cxy);}script>body>html>
4、属性操作
在操作DOM对象时，除了可以操作对象整体之外，还可以更加灵活地操作对象中的各个属性。
<html><head><meta charset="utf-8" /><title>属性操作title>head><body><button type="button" id="btn">测试按钮button><br /><input type="text" value="加油，胜利就在眼前" id="txt" class="test" /><br />性别：<input type="radio" checked="true" name="sex" value="1">男<input type="radio" name="sex" value="0">女<br /><img src="img/timg.jpg" id="sxtimg" title="sxt" /><script type="text/javascript">var txt = document.getElementById("txt");var sex = document.getElementsByName("sex")[0];var sxtimg = document.getElementById("sxtimg");// 获取文本function getValue() {// 获取文本console.log(txt.value);}// 获取属性function getAttr() {var id = txt.getAttribute("id"); console.log(id); console.log(txt.id);var value = txt.getAttribute("value"); console.log(value);var clazz = txt.getAttribute("class"); console.log(clazz); console.log(txt.className);}// 获取状态是否选中function getChecked() {console.log(sex.checked);// 指定选项是否被选中}// 设置属性function setAttr() {sxtimg.style.display = 'none';// 隐藏图片txt.setAttribute("value", "success");// 修改文本内容txt.setAttribute("aaa", "000000"); // 自定义属性console.log(txt.getAttribute("aaa")); // 获取自定义属性值}// 删除属性function delAttr() {console.log(txt.getAttribute("id"));txt.removeAttribute("id");console.log(txt.getAttribute("id"));}var btn = document.getElementById('btn');btn.onclick = delAttr;script>body>html>
Javascript进行的是原始的操作，常常和事件一起结合使用，后期学习JQuery可以更方便地操作DOM。