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");
