DOM编程
DOM是Document Object Model文档对象模型
DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件
DOM简介
D：文档 – html 文档 或 xml 文档
O：对象 – document 对象的属性和方法
M：模型
学习这个DOM主要学习几个内容 Document(Element/Text/Attribute)
*由结构图中我们可以看到，整个文档就是一个文档节点。 Document
* 而每一个HTML标签都是一个元素节点。 Element
* 标签中的文字则是文本节点。 Text
* 标签的属性是属性节点。 Attribute
* 一切都是节点…… Node
获取dom的三种方式
第一种方式:在元素上添加一个id,然后通过getElementById拿到这个元素
var username = document.getElementById("username");
console.debug(username) ; 特点:拿到的是唯一的一个元素!
第二种方式:在元素加一个name，然后通过getElementsByName拿到这一组元素
var likes = document.getElementsByName("likes");
console.debug(likes);
for(var i=0;i<likes.length;i++){
console.debug(likes[i]);特点:可以根据名称(元素上的name属性)拿到一个节点数组
第三种方式: 通过元素的标签名拿到一组元素getElementsByTagName
var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
console.debug(inputs[i]);特点:可以根据名称(标签的名称)拿到一个节点数组
node常用属性与方法
拿到dom的根有两种方式；
①方式一document.body ->body标签
console.debug(document.body);
console.debug(document.body.clientWidth);//页面的宽
console.debug(document.body.clientHeight);//由body里面的内容决定高度
方式二document.documentElement
注意的区别:
document.documentElement.clientHeight:它拿到的是整个窗口高度
document.body.clientHeight:拿到内容的高度
node节点的属性与方法总表 （js里面一切皆节点，现在我们来学习这个节点的属性和方法）
|
|
属性名称 |
名称 |
返回类型 |
节点列表 |
parentNode |
父节点 |
Node |
firstChild |
列表中的第一个节点 |
Node |
|
lastChild |
列表中的最后一个节点 |
Node |
|
childNodes |
所有子节点的列表 |
NodeList |
|
previousSibling |
上一个兄弟节点 |
Node |
|
nextSibling |
下一个兄弟节点 |
Node |
|
节点信息 |
nodeName |
节点名称 |
String |
nodeValue |
节点值 |
String |
|
nodeType |
节点类型 |
Number |
|
元素属性 |
attributes |
一个元素的属性对象 |
NamedNodeMap |
方法 |
hasChildNodes() |
当childNodes包含一个或多个节点时，返回真 |
Boolean |
appendChild(node) |
将node添加到childNodes的末尾 |
Node |
|
removeChild(node) |
从childNodes中删除node |
Node |
|
replaceChild(newnode, oldnode) |
将childNodes中的oldnode替换成newnode |
Node |
|
insertBefore(newnode, refnode) |
在childNodes中的refnode之前插入newnode |
Node |
//parentNode父节点
var eyewa = document.getElementById("eyewa");
console.debug(eyewa.parentNode);
firstChild: 拿到第一个孩子
//firstChild 找到我的第一个儿子
var wawa = document.getElementById("wawa");
console.debug(wawa.firstChild);//注意空格换行也是一个元素
lastChild: 拿到最后一个孩子
var wawa = document.getElementById("wawa");
console.debug(wawa.lastChild);//注意最后一个空格换行也是一个元素
childNodes: 拿到孩子们
//childNodes 所以子节点的列表(如果有空格，就包含空格)
var wawa = document.getElementById("wawa");
console.debug(wawa.childNodes);
previousSibling: 上一个兄弟
//previousSibling: 上一个兄弟
var eyewa = document.getElementById("eyewa");
console.debug(eyewa.previousSibling);//眼镜娃上一个兄弟 大力娃
//nextSibling: 下一个兄弟
var eyewa = document.getElementById("eyewa");
console.debug(eyewa.nextSibling);//眼镜娃下一个兄弟 金刚娃
不同元素的节点信息
不同的节点类型包含 Element，Attribute，Text
nodeName，nodeValue，nodeType这三个也是节点的属性，在不同的节点中，这3个属性的值不一样；
//①Element 的 nodeName,nodeValue,nodeyType
var wawa = document.getElementById("wawa");
console.debug(wawa.nodeName);//UL
console.debug(wawa.nodeValue);//null 什么值都没有
console.debug(wawa.nodeType);//1
//②Attribute 的 nodeName,nodeValue,nodeyType
var wawa = document.getElementById("wawa");
var attr = wawa.getAttributeNode("id");
console.debug(attr.nodeName);//id
console.debug(attr.nodeValue);//wawa (等于id="wawa")
console.debug(attr.nodeType);//2
Text的nodeName，nodeValue，nodeType
var eyewa = document.getElementById("eyewa");
var textNode = eyewa.firstChild;
console.debug(textNode.nodeName);//#text 不管它 就是表示text
console.debug(textNode.nodeValue);//眼镜娃
console.debug(textNode.nodeType);//3
|
nodeName |
nodeValue |
nodeType |
|
|
Element(元素) |
标签名称(LI) |
null |
1 |
|
Attribute(属性) |
属性的名称(id) |
属性的值 |
2 |
|
Text(文本) |
#text |
文本的内容 |
3 |
操作元素方法
hasChildNodes()--》当childNodes包含一个或多个节点时，返回真
appendChild(node)--》添加元素
removeChild(node)--》删除元素
replaceChild(newnode, oldnode)--》修改元素
insertBefore(newnode, refnode)--》插入元素
createElement(“元素名称”)--》创建元素
① 加元素 appendChild(node)从内存中创建一个标签,追加到页面上
var li = document.createElement("li");
li.innerHTML = "隐身娃";
//拿到父亲节点 ul
var wawa = document.getElementById("wawa");
//把li 添加ul里面
wawa.appendChild(li);
将一个已有的元素添加到另外一个元素里面
//拿到已有的元素
var maer = document.getElementById("maer");
//拿到需要添加的元素
var westRun = document.getElementById("westRun");
westRun.appendChild(maer);
将一个已有的节点进行替换 --》修改元素:replaceChild()
var newMonkey = document.createElement("h3");
newMonkey.innerHTML = "六小锋";
var oldMonkey = document.getElementById("sun");
var westRun = document.getElementById("westRun");
westRun.replaceChild(newMonkey,oldMonkey);
删除元素:removeChild()
noeyewa.parentNode.removeChild(noeyewa);
插入一个节点 insetBefore(new,old)
添加文字
nnerText和innerHTML区别：
innerText:会把值原封不动显示(火狐低版本中不支持)
innerHTML:会将值解析成HTML的格式显示
如果我元素上有的属性,都可以通过元素对象.属性名 或者 元素对象["属性名"]来获取
//修改或者替换属性
var myimg = document.getElementById("myimg");
myimg.title="姚明";
myimg.src="../img/b.png";