JavaScript基础之DOM操作

DOM的结构

• Document节点
• 标签节点，或者叫元素节点
• 文字节点

DOM节点元素的获取

1. var a = document.getElementByID("div1"); 由于ID的唯一性，返回值是DOM元素本身，只用于document。
2. var b = div1.getElementsByClassName("p2");获取的是一个数组，不仅可以用于document 也可以用域父级元素。
3. var c = div1.getElementsByTagName("div"); 同上。
4. 还有一些其他的方法如：getElementsByAttribute( attrib, value ):等

DOM节点的创建，添加与删除

1. var div1 = document.createElement("div");创建div 节点；
2. div0.appendChild(div1); 把div1添加到div0里面；
3. div0.removeChild(div1); 把div1从div0里面删除掉； div1.parentNode.removeChild(div1);在不获取父级元素的情况下删除节点；
4. var pTxt = document.createTextNode("content");创建文字节点；div1.appendChild(pTxt);添加文字节点；

DOM元素的修改

1. 属性的修改：
   • html自带的属性直接用"."获取：img1.id, img1.src等；但是有两个特例需要注意：
     1. 获取修改class属性，由于class 是js的关键字：img1.className = "container";
     2. style属性可以层叠，如：img1.style.width = "100px"; img1.style.color = "red";
   • 自定义的属性：
     1. 获取：img1.getAttribute("属性名");
     2. 添加和设置：img1.setAttribute("属性名","属性值");
     3. 删除：img1.removeAttribute("属性名");
2. 内容的修改：
   • p1.innerHTML = "内容"; 支持HTML格式，可以含有HTML标签，并可以被识别；
   • p1.textContent = "内容"; 文本格式
   • p1.innerText = "内容"; 文本格式 （区别是会触发重排？）