JavaScript DOM操作

来源：互联网发布：java 图片上传 base64 编辑：程序博客网时间：2024/05/21 14:46

DOM对象:DocumentObject Model

DOM:将文档解析成内存中的树状结构.通过树状结构对文档进行添加节点删除节点修改节点查找节点

DOM 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：

1.使用document查找标签：

getElementById();-- 通过ID获得元素；

getElementByTagName();-- 通过标签获得元素，返回一个数组

getElementByName();通过name属性获得元素

//获得id为username1的标签的value的值。

var input = document.getElementById("username1");

alert(input.value);

//获得所有的input的标签的value的值

var inputs=document.getElementsByTagName("input");

for(var i=0;i<inputs.length;i++){

alert(inputs[i].value);

}

//获得所有名称是username的标签的value的值。

var inputs =document.getElementsByName("username");

for(var i=0;i<inputs.length;i++){

alert(inputs[i].getAttribute("value")); //这里等同于上面的inputs[i].value

}

2Document创建标签

createElement();---创建一个元素标签

createTextNode(); ---创建一个文本节点

node对象.appendChild(node); ---把文本放入标签（对应的文本对象）

<BODY>

</ul>

</BODY>

//需求:创建一个<li>深圳</li> 将其放在ul中

//1.创建li标签 <li></li>

varliElement = document.createElement("li");

//2.创建一个文本节点深圳

vartextElement = document.createTextNode("深圳");

//3.将文本内容添加到li中 <li>深圳</li>

liElement.appendChild(textElement);

//4.将li添加到ul中.(查找ul.)

varcity = document.getElementById("city");

city.appendChild(liElement);

</SCRIPT>

3.【Element对象:元素(标签)】元素对象操作属性

getAttribute("属性的名");//获得属性的值

setAttribute（“属性名”，“属性值”）； //添加和修改

removeAttribute（“属性名”）；·//移除属性

//查找元素

var input =document.getElementsByTagName("input")[0];

//alert(input.getAttribute("value"));

//修改name属性的值

//input.setAttribute("name","uname");

//alert(input.getAttribute("name"));

//添加一个属性id

//alert(input.getAttribute("id"));

//input.setAttribute("id","username");

alert(input.name);

input.removeAttribute("name");

alert(input.getAttirbute("name"));

4.在标签下查找标签

childNodes：获得所有的子节点，属性不是所有的浏览器都兼容

// 查找第一个ul下的所有的li标签.

// 1.先查找第一个ul标签.

var city1 =document.getElementById("city1");

// 2.再找ul下的li标签.

//var childs = city1.childNodes;

//alert(childs.length);

var lis =city1.getElementsByTagName("li");

alert(lis.length);

Node对象:节点对象.

l Node中的常用的属性

节点包括元素节点属性节点文本节点.

nodeName

nodeType

nodeValue

元素节点

nodeName：标签名 nodeType: 1 nodeValue:没有 null

属性节点

nodeName: 属性名 nodeType: 2 nodeValue:属性的值

文本节点

nodeName: #text nodeType: 3 nodeValue:文本内容

案例:

// 分别获得元素节点的节点名称节点类型节点的值.

// 1.元素节点

var input = document.getElementById("username");

//alert(input.nodeName); // output INPUT

//alert(input.nodeType); // output 1

//alert(input.nodeValue); // output null

// 2.属性节点

var attr = input.getAttributeNode("name"); // 获得属性节点.

//alert(attr.nodeName); // output name

//alert(attr.nodeType); // output 2

//alert(attr.nodeValue); // output username

// 3.文本节点

var p = document.getElementsByTagName("p")[0];

var t = p.firstChild;

alert(t.nodeName); // output #text

alert(t.nodeType); // output 3

alert(t.nodeValue); // output 文本

l 节点对象的父节点子节点及同辈节点

parentNode

childNodes

firstChild

lastChild

nextSibling

previousSibling

l 检测节点中是否有子节点和属性.

hasChildNodes()

hasAttributes()

l 节点的插入

appendChild();

insertBefore(newNode,oldNode);

l 删除和替换节点.

removeChild()

replaceChild(newNode,oldNode)

l 复制节点

cloneNode(boolean); boolean:true 克隆的时候带着子节点一起克隆.默认是false。

0 0