JavaScriptDom和应用

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";