码迷,mamicode.com
首页 > 编程语言 > 详细

javascript学习笔记DOM(2)

时间:2014-10-29 18:29:33      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:des   style   io   color   ar   使用   java   for   sp   

DOM

 

DOM元素的类型

  节点类型          节点名称        节点值

nodeType      nodeName      nodeValue

           元素节点        文本节点          注释节点      document
nodeType              1        3         8       9
nodeName       大写的标签名      #text         #comment    #document
nodeValue     null             文本内容          注释内容          null

1)IE6~8不会将空格和Enter当作节点,但是其他浏览器会把他当作文本节点
2)HTML中元素节点的nodeName是大写标签名,但是在XHTML或者XML中,我们的标签名写的是大写他就是大写,写的是小写他就是小写

 

DOM节点的关系

通过DOM节点的关系可以准确的找到想要的元素

(比如想要找你的爷爷直接找到你的爸爸的爸爸就可以了。想要找你的堂弟可以找到你爸爸然后找到你爸爸的兄弟,再找他的儿子)。

1、childNodes 获取所有的子节点 (节点:元素)
2、children 获取所有的元素子节点
3、parentNode 获取父亲节点
4、previousSibling 获取哥哥节点
5、nextSibling 获取弟弟节点
6、firstChild 获取第一个子节点
7、lastChild 获取最后一个子节点

 

DOM的操作

1、创建DOM元素

  document.createElement("标签");

  用于创建一个新的DOM元素,接收一个标签名。来创建这个类型的DOM元素

2、在元素最后添加DOM元素

  appendChild

  将一个元素对象添加到指定的区域内,并且在最后面的位置

  语法:父亲元素.appendChild(要添加的元素对象)

3、在某元素之前添加DOM元素

  insertBefore

  将一个元素对象(新对象)放在指定对象(已有对象)前面

  语法:已有对象.parentNode.insertBefore(新对象,已有对象);

4、替换元素

  replaceChild

  用一个新的元素把旧的元素替换掉

  语法:旧元素.parentNode.replaceChild(新元素,旧元素);

5、复制元素

  cloneNode

  把已有的元素复制一个。

  语法:要复制的元素.cloneNode(TRUE/FALSE);

  需要一个boolen类型的参数。 true:包括所有的子元素都一同复制 false,只复制当前的元素没有子元素

6、删除元素

  删除指定的元素

  语法:要删除的元素.parentNode.removeChild(要删除的元素);

动态创建DOM节点耗性能,我们尽量少用

设置自定义属性

setAttribute

setAttribute有两种使用方法。

1)如果传两个参数的话是直接设置自定义属性的值。

2)如果传的参数只有一个,则获取这个属性上绑定的值。

setAttribute 设置class的属性,IE6~8不兼容

removeAttribute 删除属性

removeAttribute ("属性名");

 

javascript学习笔记DOM(2)

标签:des   style   io   color   ar   使用   java   for   sp   

原文地址:http://www.cnblogs.com/Star-xx/p/4059822.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!