javascript-dom的常用方法

1.获得元素

获得元素要等页面加载完成之后再获取，在页面加载的时候获取的话页面还没有加载完成，然后你获取元素的话，会获取不到。

方法1.document.getElementById（“元素的id”）；通过元素的id来获取，返回的是你获取了那个元素对象的引用，这个是document类的方法。

方法2.document.getElementsByTagName（“元素名称”）;获取一类元素，以数组的形式返回。（这个是node节点接口的方法，就是所有的元素对象都有这个方法。）

方法3.document.getElementByName（“元素name属性”）;通过元素的name属性来获取，也是以数组的形式返回。

2.获取元素属性。

元素属性的最推荐的方式就是通过对象.属性的方式来读取。

3.获取子元素

1.父元素名称.childNodes来获取所有子元素。包含空的文本元素。此方法不实用

2.通过 getElementByTagName（“标签名”）；通过对象调用次方法获取的是他的子孙元素。

3.firstChild 第一个子元素 lastChild最后一个子元素。

4.获取文本元素。

通过firstChild来获取。然后通过 nodeValue来读写文本的属性。

5.新建元素文本节点，添加元素文本节点，

新建元素节点 document.createElement(“标签名”);返回的是创建的那个元素节点的引用。

新建文本节点document.createTextNode(“文本内容”)；返回此元素的引用

添加元素节点。父元素.appendChild（节点名）;

6.替换子元素元素节点

父元素名.replaceChild("新节点","旧节点")；

元素.parentNode。返回父元素节点

元素名.cloneNode（deep）;克隆一个节点。deep为true表示连子节点一起克隆，为false不克隆子节点。

7.在子元素的前面插入一个元素 insertBefore(要插入的元素，插入在哪个元素前面)

可以自定义一个在元素后面插入元素的函数

function insertLast(aNode,bNode){
				var bNodeParent=bNode.parentNode;
				if(bNodeParent!=null){
					//判断bNode是不是最后一个节点，如果是则直接appendChild（）添加到最后面
					if(bNodeParent.lastChild===bNode){
						bNodeParent.appendChild(aNode);
					}else{
						//不是的话，则找到他的下面的一个兄弟元素节点。然后插入到前方。
						//nextSibling 找到下一个兄弟元素节点。
						nextNode=bNode.nextSibling;
						bNodeParent.insertBefore(aNode,nextNode);
					}
				}

8.删除元素节点

parent. removeChild（要删除的子节点）;

javascript-dom的常用方法

猜你喜欢