javascriptDOM操作页面元素方法（一）

javascriptDOM操作页面元素方法（一）

1、DOM简介

DOM 是 W3C（World Wide Web Consortium）标准。同时也 定义了访问诸如 XML 和 HTML 文档的标准：

DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。

在HTML和JavaScript的学习中，DOM操作可谓时重中之重

2、DOM节点

DOM节点分为三大类：元素节点、属性节点、文本节点；

由DOM树我们可以看到，文本节点、属性节点属于元素节点的子节点。

文本节点和属性节点就像是这颗DOM树的果子，而元素节点就是树枝，所以，在操作时，一定要要记顺枝摘果：得先取到元素节点！然后再操作子节点！！

要先取到元素节点！要先取到元素节点！要先取到元素节点！重要的事情说三遍！

3、常用的DOM对象方法

（1）getElementById（）通过id获取元素返回，如果id重名，只能取到第一个。

var idtext01 = document.getElementById('text01');
console.log(idtext01);
//返回<input type="text" id="text01" class="text01" name="text01">

（2）getElementsByClassName（）通过class类名获取元素（划重点–>获取到的元素是一个集合）

var classtext01 = document.getElementsByClassName('text01')[0];
//0表示获取元素的索引   应为获取到是一个集合
console.log(classtext01);
//返回<input type="text" id="text01" class="text01" name="text01">

（3）getElementsByTagName（）根据元素的名字获取元素（划重点–>获取到的元素是一个集合）

var yuansuname = document.getElementsByTagName('input')[0];
//0表示获取元素的索引   应为获取到是一个集合
console.log(yuansuname);
//返回<input type="text" id="text01" class="text01" name="text01">				

（4）getElementsByName根据元素的name名字获取元素（划重点–>获取到的元素是一个集合）， 不是每一个元素都有name名称 ，有name名称的比如有:form表单

var name = document.getElementsByName('text01')[0];
//0表示获取元素的索引   应为获取到是一个集合
console.log(name);
//返回<input type="text" id="text01" class="text01" name="text01">				

（5）createElement()创建元素节点节点,通过document对象

var newnode=document.createElement('div');
console.log(newnode);		//返回<div></div>表示创建成功

（6）appendChild() 把新的子节点添加到指定节点

window.onload=function(){
    var box=document.getElementById('box');
    box.appendChild(newnode);
}

（7） removeChild()删除子节点 （划重点–>是删除 子 节点， 不是节点）

			window.onload=function(){
				var box=document.getElementById('box');
				box.removeChild(newnode);
			}

（8） replaceChild() 替换子节点。

//语法：document.getElementById("子节点的父元素").replaceChild(新节点,旧节点);
window.onload=function(){
    var box=document.getElementById('box');
    var box1=document.getElementById('box1');
    var news=document.createElement('div')
    box.replaceChild(news,box1);
}

（9）insertBefore() 在指定的子节点前面插入新的子节点。

//语法document.getElementById("子节点的父元素").insertBefore(插入的节点,在哪个子节点之前插入);
window.onload=function(){
    var box=document.getElementById('box');
    var box2=document.getElementById('box2');
    var news=document.createElement('span')
    box.insertBefore(news,box2);
}

（10）createTextNode() 创建文本节点。

//语法document.createTextNode('创建的文本内容')
window.onload=function(){
    var textnod=document.createTextNode('123456');
    var box2=document.getElementById('box2');
    box2.appendChild(textnod);
}

（11）getAttribute()返回指定的属性值。

//语法： document.getElementsByTagName("a")[0].getAttribute(属性名)
window.onload=function(){
    var a=document.getElementsByTagName("a")[0];
    var zhi=a.getAttribute("target");
    console.log(zhi);		//返回_blank
}			

（12）

createAttribute()方法创建属性节点。

//语 法 ：document.createAttribute(attributename)
head:
    <style type="text/css">
    .democlass{color:red}
</style>
body：
	<h1>Hello World</h1>
JS:
var h1=document.getElementsByTagName("H1")[0];
var att=document.createAttribute("class");
att.value="democlass";
h1.setAttributeNode(att);

（13） setAttribute()方法把指定属性设置或修改为指定的值。

语 法 ：element.setAttribute(attributename,attributevalue)
body:
    <input type="text" value="OK">
    <p id="demo">点击按钮来设置按钮的 type 属性。</p>
    <button onclick="myFunction()">试一下</button>
JS:
    function myFunction()
    {
    var txtInput=document.getElementsByTagName("input")[0];
    txtInput.setAttribute("type","button");
    }