初见成效，使用JS操作DOM对象
开篇寄语：
要紧盯住自己的人生目标，不要被周围毫无意义的人或者事所牵绊，尤其不要生闲气。
看淡一点，不要太在乎别人的那张脸；简单一点，不要用他人的尺子，量自己的长短。心态好，一切安好。
昨天给大家提到过，那现在就一起来看看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内容 | 例如 |
|---|---|---|
| 文档节点 | 文档本身 | 整个文档 document
|
| 元素节点 | 所有的HTML元素 |
<a>、<div>、<p>
|
| 属性节点 | HTML元素内的属性 | id、href、name、class |
| 文本节点 | 元素内的文本 | hello |
| 注释节点 | HTML中的注释 | <!-- --> |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>树！树！到处都是树！</title> </head> <body> <h1>百度</h1> <!-- 点击超链接跳转百度 --> <a href="http://www.baidu.com">百度</a> </body> </html>
3、元素节点的操作
当HTML文档在被解析为一颗DOM树以后，里面的每一个节点都可以看做是一个一个的对象，我们成为DOM对象，对于这些对象，我们可以进行各式各样的操作，查找到某一个或者一类节点对象，可以创建某种节点对象，可以在某个位置添加节点对象，甚至可以动态地删除节点对象，这些操作可以使我们的页面看起来有动态的效果，后期结合事件使用，就能让我们的页面在特定时机、特定的事件下执行特定的变换。
获取节点
在进行增、删、改的操作时，都需要指定到一个位置，或者找到一个目标，此时我们就可以通过Document对象提供的方法，查找、定位某个对象（也就是我们说的节点）。
注意：操作 dom 必须等节点初始化完毕后，才能执行。处理方式两种:
a. 把 script 调用标签移到html末尾即可；
b. 使用onload事件来处理JS，等待html 加载完毕再加载 onload 事件里的 JS。
window.onload = function() {
// 当页面加载完后调用函数
};
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 注意script块的位置 -->
<script type="text/javascript">
window.onload = function() {
var dv = document.getElementById("dv");
dv.innerHTML = "我是一个div";
}
</script>
</head>
<body>
<div id="dv"></div>
</body>
</html>
获取方式如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>操作DOM对象-获取节点</title>
</head>
<body>
<!-- 根据id class获取元素 -->
<p id="p1" class="ptext">这是一个段落<span>文本</span></p>
<p id="p2" class="ptext">这又是一个段落</p>
<!-- 根据name 标签名称获取元素 -->
<input type="checkbox" name="hobby" value="游泳" />游泳
<input type="checkbox" name="hobby" value="篮球" />篮球
<input type="checkbox" name="hobby" value="足球" />足球
<input type="text" value="我是一个输入框" />
<!-- href="javascript:void(0);"伪协议，表示不执行跳转，而执行指定的事件 -->
<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>
<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)";伪协议，表示不执行跳转，而执行指定的点击事件。
创建节点和插入节点
很多时候我们想要在某个位置插入一个新的节点，此时我们首先需要有一个节点存在，可以通过以下几种方式创建新节点。
创建节点
插入节点
添加段落
<!DOCTYPE html>
<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获取元素div
var 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 = "<p>以后的你会感谢现在努力的你3</p>";
container.innerHTML = str;
}
</script>
</body>
</html>
添加图片
<!DOCTYPE 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 = "<img src='http://www.baidu.com/img/bd_logo1.png' />";
}
</script>
</body>
</html>
添加文本框
<!DOCTYPE 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 = "<input type='password' />";
}
</script>
</body>
</html>
添加选项框
<!DOCTYPE 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 += "<option value='5'>风的季节</option>";
}
</script>
</body>
</html>
间接查找节点
<!DOCTYPE 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);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>删除节点</title>
</head>
<body>
<div id="dv">
<span id="cxy">程序猿</span>
<a href="javascript:void(0)" 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对象时，除了可以操作对象整体之外，还可以更加灵活地操作对象中的各个属性。
<!DOCTYPE html>
<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。