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
console.debug(likes[i]);特点:可以根据名称(元素上的name属性)拿到一个节点数组
第三种方式: 通过元素的标签名拿到一组元素getElementsByTagName
var inputs = document.getElementsByTagName("input");
for(var i=0;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";