JavaScript笔记(5)

1.DOM操做

经常使用的DOM操做

document.getElementById(id);
//返回指定id的元素，通用
document.getElementsByTagName(tagName);
//返回带有指定标签名的对象的集合，通用

/* 不经常使用 */
getElementsByClassName(className);  
//返回指定类名的元素集合，不兼容IE七、8，其余浏览器支持
getElementsByName();
//返回指定name属性元素的集合

DOM树中元素与元素之间的关系：父子、兄弟

假如如今有一个DOM元素为obj

找DOM节点

1.找父节点

/* 通用 */

obj.parentNode;

2.找兄弟节点

/* 不经常使用，应为不兼容 */

obj.nextSibling;//找obj“下一个”兄弟节点，这个属性只有IE七、8认识   

obj.nextElementSibling;//找obj“下一个”兄弟节点，其余浏览器认识  

obj.previousSibling;//找obj“上一个”兄弟节点，这个属性只有IE七、8认识  

obj.previousElementSibling;//找obj“上一个”兄弟节点，其余浏览器认识  

/* 兼容性写法：先通用 || 后IE七、8 */

var next = obj.nextElementSibling || obj.nextSibling;
var last = obj.previousElementSibling || obj.previousSibling;

3.找子节点

/* 找第一个子节点 */
obj.firstElementChild;通用
obj.firstChild;//只有IE七、8认识，不通用

/* 找最后一个子节点 */
obj.lastElementChild;//通用
obj.lastChild;//只有IE七、8认识，不通用

/* 兼容性写法：先通用 || 后IE七、8 */
var firstLi = obj.firstElementChild || obj.firstChild;
var lastLi = obj.lastElementChild || obj.lastChild;

/* 找全部子节点 */
obj.childNodes;//w3c标准，但会找到空文本的节点，不经常使用
obj.children;//非标准，只会计算“真正”的子元素，经常使用

DOM节点操做

在DOM操做里，全部的建立、插入、删除操做，都必须经过父节点来插入子节点和删除子节点

• 节点文本操做: 控制节点文本

• (1) innerText: 会原封不动的显示字符串（不经常使用）

• (2) innerHTML: 会解析这个字符串，若是该字符串中有HTML标记成分，就会被按照HTML的规范，将标记解析出来后显示（经常使用）

4.动态建立DOM节点

/* 尾部添加节点 */

var obj = document.createElement("tagName");
//此时只在内存里建立了节点，尚未写入HTML文档中
var fatherNode = document.getElementById("fatherId");
//拿到父节点
fatherNode.appendChild(obj);
//在父节点内部全部子节点尾部追加新建的节点
//此时节点才建立完成

/* 任意位置插入节点 */
var newChild = document.createElement("tagName");
var fatherNode = document.getElementById("fatherId");
var refChild = document.getElementById("refChild_Id");
fatherNode.insertBefore(newChild, refChild);//newChild: 新建节点   refChild: 参照节点  
//在参照节点以前插入新节点，参照节点能够为null，此时新建节点会被插入尾部

/* 删除节点 */

var fatherNode = document.getElementById("fatherId");
var oldChidNode = document.getElementById("oldChild_Id");
fatherNode.removeChild(oldChildNode);

动态设置DOM元素的属性

写属性: obj.setAttribute("valueName","value");
读属性: obj.getAttribute("valueName");

2.控制样式

3.动画效果