首页 > 代码库 > JavaScript:DOM编程

JavaScript:DOM编程



JavaScript:DOM编程
1.节点及其类型
 1)元素节点
 2)属性节点:元素的属性,通常情况下, 操作属性节点直接通过 "元素节点.属性名" 的方式来读写属性值
 3)文本节点:是元素的子节点,其内容为文本
 例<p title="name">donot forget me</p>
 element node : p
 attribute node : title="name"
 text node :donot forget me

 2.js在html中的位置
 在<head>中,写在window.onload = function(){  // js代码 };
 window.onload事件,在文档加载完成后执行,故在这里可以获得任何元素。

 3.如何获取元素节点
 Element getElementById(String elementId):根据id属性获取对应的单个节点
 NodeList getElementByTagName(String tagName):根据标签名获取指定节点的集合
 NodeList getElementByName(String elementName):根据节点的name属性获取节点的集合
 但IE的实现方式和W3C标准有差别:在html文档中,若某个节点(例如li)没有name属性,则IE使用getElementByName()不能获取到节点,但是火狐可以

 4.获取属性节点
  1)**可以通过Node.id(节点.属性)的方式来获取和设置属性节点的值
  2)通过元素节点getAttributeNode(name)方法来获取属性节点,然后再通过nodeValue来读写属性值

 5.获取元素节点的子节点(**只有元素节点才有子节点!!)
  1)childNodes属性获取全部的子节点,但方法不实用。因为如果要获取指定的节点的指定子节点的结合,可以直接调用元素节点的getElementByTagName()方法来获取
  2)firstChild属性获取第一个子节点
  3)lastChild属性最后一个子节点
  4)parentNode属性获取父节点

 6.获取文本节点:
  1)步骤:元素节点-->获取元素节点的子节点
  2)若元素节点只有一个文本节点一个子节点
  例如<li id="bj" name="BeiJing">北京</p>
  可以先获取到指定的元素节点eleNode,然后利用eleNode.forstChild.nodeValue的方法来读写其文本节点的值

  7.节点属性(nodeType、nodeName、nodeValue)
    nodeType、nodeName、nodeValue是每个Node都有的属性,像id、name是具体某个节点所具有的属性
    1)nodeName:代表当前节点的名字,只读属性。**如果给定节点是一个文本节点,nodeName是#text
    2)nodeType:返回一个整数,这个数值代表给定节点是类型。只读属性。1--元素节点,2--属性节点,3--文本节点
    **3)nodeValue:返回给定节点的当前值(字符串)。可读写属性
       ①元素节点,返回值是null
       ②属性节点,返回值是这个属性的值
       ③文本节点,返回值是这个文本节点的内容
 8.创建一个元素节点
    1).createElement(String elementName):按照给定的标签名创建一个新的元素节点。
    方法只有一个参数:被创建的元素节点的名字,是一个字符串。
    方法的返回值:是一个指向新建节点的引用指针,返回值是一个元素节点,所以它的nodeType属性值等于1
    **新元素节点不会自动添加到文档里,它只是一个存在于JavaScript上下文的对象
 9.创建一个文本节点
    1).createTextNode(String textValue):创建一耳光包含着给定文本的新文本节点,返回值是一个指向新文本节点的引用指针
    方法只有一个参数:新建文本节点锁包含的文本字符串,新元素节点不会自动添加到文档整里。
 10.为元素节点添加子节点
    1)appendChild(Node node)
    var reference = element.appendChild(newChild);
    给定子节点newChild将成为给定元素节点element的最后一个子节点
         方法的返回值是一个指向新增子节点的引用指针
 11.节点的替换
    1).replaceChild():把一个给定父元素里的一个子节点替换为另外一个子节点
        var reference = element.replaceChild(newChild,lodChild)
 返回值是一个指向已被替换的那个子节点的引用指针
    2).该节点除了替换功能以外还有移动的功能
    3).该方法只能完成单向替换,若需要使用双向替换,需要自定义函数
 12.删除节点
    1).removeChild():从一个指定元素里删除一个子节点
       var reference = element.removeChild(node)
       返回值是一个指向已被删除的子节点的引用指针,某个节点被removeChild()方法删除时,这个节点所包含的所有子节点将同时被删除
       如果删除某个节点,但不知道其父节点,可以通过parentNode属性获取
 13.插入节点
    1).insertBefore():把一个给定节点插入到一个给定元素节点的给定子节点的前面
       var reference = element.insertBefore(newNode,targetNode)
       节点newNode将被插入到元素节点element中并出现在targetNode的前面
       节点targetNode必须是element元素的一个子节点
 14.innerHTML属性
    1).浏览器几乎都支持该属性,但不是DOM标准的组成部分
    innerHTML属性可以用来读写某个给定元素里的HTML内容
 15.其他属性
    parentNode属性:获取给定元素的父节点
    nextSibling属性:获取给定元素的上一个元素
    previousSibling属性:获取给定元素的下一个元素


JavaScript:DOM编程