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.动画效果