JavaScript DOM
本节课所讲内容：
JavaScript DOM介绍JavaScript查找元素JavaScript 节点操作主讲教师：Head老师
一. JavaScript DOM介绍
DOM（Document Object Model）即文档对象模型，针对HTML和XML文档的API（应用程序接口）。DOM描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。
DOM中的三个字母，D（文档）可以理解为整个Web加载的网页文档；O（对象）可以理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是document对象；M（模型）可以理解为网页文档的树型结构。
二.javaScript 查找元素
W3C提供了比较方便简单的定位节点的方法和属性，以便我们快速的对节点进行操作。分别为：getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()、setAttribute()和removeAttribute()。
元素节点方法
方法
说明
getElementById()
获取特定ID元素的节点
getElementsByTagName()
获取相同元素的节点列表
getElementsByName()
获取相同名称的节点列表
getAttribute()
获取特定元素节点属性的值
setAttribute()
设置特定元素节点属性的值
removeAttribute()
移除特定元素节点属性
getElementById()方法getElementById()方法，接受一个参数：获取元素的ID。如果找到相应的元素则返回该元素的HTMLDivElement对象，如果不存在，则返回null。
document.getElementById('box'); //获取id为box的元素节点
PS：上面的例子，默认情况返回null，这无关是否存在id="box"的标签，而是执行顺序问题。解决方法，1.把script调用标签移到html末尾即可；2.使用onload事件来处理JS，等待html加载完毕再加载onload事件里的JS。
window.onload = function () { //预加载html后执行
document.getElementById('box');
};
2.getElementsByTagName()方法
getElementsByTagName()方法将返回一个对象数组HTMLCollection(NodeList)，这个数组保存着所有相同元素名的节点列表。
document.getElementsByTagName('*'); //获取所有元素
document.getElementsByTagName('li'); //获取所有li元素，返回数组
3.getElementsByName()方法
getElementsByName()方法可以获取相同名称(name)的元素，返回一个对象数组HTMLCollection(NodeList)。
document.getElementsByName('add') //获取input元素
4.getAttribute()方法
getAttribute()方法将获取元素中某个属性的值。它和直接使用.属性获取属性值的方法有一定区别。
document.getElementById('box').getAttribute('id');//获取元素的id值
5. setAttribute()方法
setAttribute()方法将设置元素中某个属性和值。它需要接受两个参数：属性名和值。如果属性本身已存在，那么就会被覆盖。
document.getElementById('box').setAttribute('align','center');//设置属性和值
6.removeAttribute()方法
removeAttribute()可以移除HTML属性。
document.getElementById('box').removeAttribute('style');//移除属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>js DOM</title> <script> window.onload=function(){ var ae = document.getElementsByTagName("li").length; alert(ae); var af = document.getElementsByName("txt"); alert(af); var ad = document.getElementById("ad").getAttribute('id'); alert(ad); //获取出来id的名称 document.getElementById("ad").setAttribute('style','color: red'); document.getElementById("ad").removeAttribute('style'); } </script> </head> <body> <div id="ad" style="color: blue"> DOM </div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <input type="text" name="txt"> </body> </html>三.节点操作
1.getElementById()获取到特定元素节点时，这个节点对象就被我们获取到了，而通过这个节点对象，我们可以访问它的一系列属性。
元素节点属性
属性
说明
tagName
获取元素节点的标签名
innerHTML
获取元素节点里的内容，非W3C DOM规范
document.getElementById('box').tagName; //DIV
document.getElementById('box').innerHTML; //测试Div
HTML属性的属性
属性
说明
id
元素节点的id名称
title
元素节点的title属性值
style
CSS内联样式属性值
className
CSS元素的类
document.getElementById('box').id; //获取id
document.getElementById('box').id = 'person'; //设置id
document.getElementById('box').title; //获取title
document.getElementById('box').title = '标题' //设置title
document.getElementById('box').style; //获取CSSStyleDeclaration对象
document.getElementById('box').style.color; //获取style对象中color的值
document.getElementById('box').style.color = 'red'; //设置style对象中color的值
document.getElementById('box').className; //获取class
document.getElementById('box').className = 'box'; //设置class
2.DOM不单单可以查找节点，也可以创建节点、复制节点、插入节点、删除节点和替换节点。
节点操作方法
方法
说明
write()
这个方法可以把任意字符串插入到文档中
createElement()
创建一个元素节点
appendChild()
将新节点追加到子节点列表的末尾
createTextNode()
创建一个文件节点
insertBefore()
将新节点插入在前面
repalceChild()
将新节点替换旧节点
cloneNode()
复制节点
removeChild()
移除节点
write()方法write()方法可以把任意字符串插入到文档中去。
document.write('<p>这是一个段落！</p>')' ; //输出任意字符串
2.createElement()方法
createElement()方法可以创建一个元素节点。
document.createElement('p'); //创建一个元素节点
appendChild()方法
appendChild()方法讲一个新节点添加到某个节点的子节点列表的末尾上。
var box = document.getElementById('box'); //获取某一个元素节点
var p = document.createElement('p'); //创建一个新元素节点<p>
box.appendChild(p); //把新元素节点<p>添加子节点末尾
createTextNode()方法
createTextNode()方法创建一个文本节点。
var text = document.createTextNode('段落'); //创建一个文本节点
p.appendChild(text); //将文本节点添加到子节点末尾
var text = document.createTextNode("段落");
var box = document.getElementById('ad');
box.appendChild(text);
insertBefore()方法insertBefore()方法可以把节点创建到指定节点的前面。
var box = document.getElementById('ad');
var p = document.createElement('p');
box.parentNode.insertBefore(p,box);
box.parentNode.insertBefore(p, box); //把<div>之前创建一个节点
repalceChild()方法replaceChild()方法可以把节点替换成指定的节点。
box.parentNode.replaceChild(p,box); //把<div>换成了<p>
cloneNode()方法
cloneNode()方法可以把子节点复制出来。
var box = document.getElementById('box');
var clone = box.firstChild.cloneNode(true); //获取第一个子节点，true表示复制内容
box.appendChild(clone); //添加到子节点列表末尾
8.removeChild()方法
removeChild()方法可以把
box.parentNode.removeChild(box); //删除指定节点
