JavaScript笔记(5)

1.DOM操作

常用的DOM操作

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

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

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

假如现在有一个DOM元素为obj

找DOM节点

1.找父节点

/* 通用 */

obj.parentNode;

2.找兄弟节点

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

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

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

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

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

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

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

3.找子节点

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

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

/* 兼容性写法：先通用 || 后IE7、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.动画效果