首页 > 代码库 > Dom对象的经常用法
Dom对象的经常用法
(1)getElementById() 查询给定ID属性值的元素，返回该元素的元素节点
1、 查询给定ID属性值的元素，返回该元素的元素节点。也称为元素对象。
2、 由于在一个html页面中id的值是唯一的。所以返回值也是唯一的。
所以方法的名称为getElementById()而不是getElementsById()
3、 该方法仅仅能用于document对象，相似与java的statickeyword。
(2)getElementsByName()查找给定name属性的全部元素，这种方法将返回一个节点集合，也能够称为对象集合
1、查找给定name属性的全部元素，这种方法将返回一个节点集合，也能够称为对象集合。
2、这个集合能够作为数组来对待。length属性的值表示集合的个数。
3、由于在html页面中。name不能唯一确定一个元素。所以方法的名称为getElementsByName而不是getElementByName
(3)getElementsByTagName()查询给定标签名的全部元素
1、查询给定标签名的全部元素
2、由于在html页面中。标签名不是唯一的。所以返回值为节点的集合。
3、这个集合能够当做数组来处理,length属性为集合里全部元素的个数
4、能够有两种形式来运行这种方法：
1、var elements =document.getElementsByTagName(tagName);
2、var elements = element.getElementsByTagName(tagName);
5、从这两种方法能够看出持有这种方法的对象并不一定是整个文档对象(document).也能够是某一个元素节点。
(4)hasChildNodes()该方法用来推断一个元素是否有子节点,返回值为true或者false
1、该方法用来推断一个元素是否有子节点
2、返回值为true或者false
3、文本节点和属性节点不可能再包括子节点，所以对于这两类节点使用 ChildNodes()方法 返回值永远为false.
4、假设hasChildNodes()返回值为false,则childNodes,firstChild,lastChild将为空数组或者空字符串。
(5)nodeName
1.假设节点是元素节点，nodeName返回元素的名称
2.假设给定节点为属性节 点，nodeName返回属性的名称
3.假设给定节点为文本节点，nodeName返回为#text的字符串
(6)nodeType
1、元素节点类型 值为1
2、属性节点类型 值为2
3、文本节点类型 值为3
(7)nodeValue
1.假设给定节点是属性节点。返回值是这个属性的值
2.假设给定节点是文本节点，返回值是这个文本节点的内容
3.假设给定节点是元素节点。返回值是null
(8)replaceChild()
1.把一个给定父元素里的一个子节点替换为另外一个子节点
2.var reference = element.replaceChild(newChild,oldChild)
3.返回值指向已经被替换掉的那个子节点的引用
(9)getAttribute()
1、返回一个给定元素的给定属性的节点的值
2、var attributeValue = http://www.mamicode.com/element.getAttribute(attributeName)
3、给定属性的名字必须以字符串的形式传递给该方法
4、给定属性的值将以字符串的形式返回
5、通过属性获取属性节点
(10)setAttribute()
1、将给定元素加入一个新的属性或改变它现有属性的值
2、element.setAttribute(attributeName,attributeValue);
3、属性的名字和值必须以字符串的形式传递
4、假设这个属性已经存在，那么值将被attributeValue代替
5、假设这个属性不存在，那么先创建它，再给他赋值
(11)createElement()
1、依照给定的标签名创建一个新的元素节点，方法的參数为被创建的元素的名称
2、var reference = document.createElement(elementName);
3、方法的返回值指向新建节点的引用，返回值是一个元素节点。所以nodeType 为1
4、新建的节点不会自己主动加入到文档里，仅仅是存在于document里一个游离的对象
(12)createTextNode()
1、创建一个包括给定文本的新文本节点
2、这种方法的返回值指向这个新建的文本节点的引用
3、该方法有一个參数：新建文本节点的文本内容
4、它是一个文本节点，所以nodeType值为3
5、新建的文本对象不会自己主动加入到文档里，属于游离态的对象。
(13)appendChild()
1、为给定元素添加一个子节点
var newreference = element.appendChild(newChild);
2、给定子节点newChild将成为element的最后一个节点
3、方法的返回值指向新增节点的引用
4、该方法通常与createElement()与createTextNode()一起使用
5、新节点能够追加给文档中的不论什么一个元素（不是属性和文本）
(14)insertBefore()
1、把一个给定节点插入到一个给定元素子节点的前面
2、var reference = element.insertBefore(newNode,targetNode)
3、newNode节点将作为element的子节点出现，并在targetNode节点的前面
4、节点targetNode必须是element的一个子节点
5、该方法通常与createElement和createTextNode结合使用
(15)removeChild()
1、从给定的元素里删除一个子节点
2、var reference = element.removeChild(node)
3、返回值指向已经被删除的子节点的引用
4、当某个子节点被删除时，这个子节点所包括的子节点也被删除掉
5、假设想删除一个子节点，但不知道父节点。能够使用parentNode属性
(16)childNodes()
1、返回一个数组，这个数组是由给定节点的子节点组成的。
2、var nodeList = node.childNodes()
3、文本节点和属性节点不可能再包括子节点，所以他们的childNodes()方法返回一个空的数组
4、假设想知道这个节点有没有子节点能够利用hasChildNodes方法。
5、一个节点的子节点有多少个能够调用数组的length来得到。
6、假设这个节点还有子节点，那么这个节点肯定是元素节点
(17)firstChild
1、该属性返回给定节点的第一个子节点
2、var reference = node.firstChild
3、文本节点和属性节点不包括不论什么子节点，所以返回值为null
4、node.firstChild=node.childNodes[0]
(18)lastChild
1、该属性返回给定节点的最后一个子节点
2、var reference = node.lastChild
(19)nextSibling
1. 返回给定节点的下一个兄弟节点
(20)parentNode
1、返回给定元素节点的父节点
2、document没有父节点
(21)previousSibling
1.返回给定节点的上一个兄弟节点
(22)innerHTML
1. 用来读写某个元素中的HTML内容
(23)window.onload
1、在页面上全部的数据载入完以后触发该方法
2、这样做的优点是，有时候一些JS函数要用到页面上的一些数据，可是此时有些数据还没有载入进来。
这个时候触发函数，就会报一些异常。所以用window.onload方法能够确保数据安全落地。
Dom对象的经常用法