您好,UncleToo欢迎您!  为了更好的浏览本站,请使用高版本浏览器
RSS  Tag     设为首页 | 加入收藏
 您所在的位置:首页 > 前端开发 > XML&DOM

Javascript:15个常用的DOM编程方法及属性

作者:UncleToo  来源:原创  日期:2014-11-04 18:31:44
收藏  评论:( 0 )  阅读:353

1.节点及其类型

1元素节点

2属性节点:元素的属性,通常情况下, 操作属性节点直接通过 "元素节点.属性名" 的方式来读写属性值

3文本节点:是元素的子节点,其内容为文本

例:

<p title="name">UncleToo中文网</p>

element node : p

attribute node : title="name"

text node :UncleToo中文网


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.获取元素节点的子节点(只有元素节点才有子节点!!)

 1childNodes属性获取全部的子节点,但方法不实用。因为如果要获取指定的节点的指定子节点的结合,可以直接调用元素节点的getElementByTagName()方法来获取

 2firstChild属性获取第一个子节点

 3)lastChild属性最后一个子节点

 4)parentNode属性获取父节点


6.获取文本节点

 1步骤:元素节点-->获取元素节点的子节点

 2若元素节点只有一个文本节点一个子节点

 例如

 <li id="bj" name="BeiJing">北京</p>

 可以先获取到指定的元素节点eleNode,然后利用eleNode.firstChild.nodeValue的方法来读写其文本节点的值


7.节点属性(nodeType、nodeName、nodeValue)

   nodeType、nodeName、nodeValue是每个Node都有的属性,像id、name是具体某个节点所具有的属性

   1nodeName:代表当前节点的名字,只读属性。如果给定节点是一个文本节点,nodeName是#text

   2nodeType:返回一个整数,这个数值代表给定节点是类型。只读属性。1--元素节点,2--属性节点,3--文本节点

   3nodeValue:返回给定节点的当前值(字符串)。可读写属性

      ①元素节点,返回值是null

      ②属性节点,返回值是这个属性的值

      ③文本节点,返回值是这个文本节点的内容


8.创建一个元素节点

   createElement(String elementName):按照给定的标签名创建一个新的元素节点。

   方法只有一个参数:被创建的元素节点的名字,是一个字符串。

   方法的返回值:是一个指向新建节点的引用指针,返回值是一个元素节点,所以它的nodeType属性值等于1

   新元素节点不会自动添加到文档里,它只是一个存在于JavaScript上下文的对象


9.创建一个文本节点

   createTextNode(String textValue):创建一个包含着给定文本的新文本节点,返回值是一个指向新文本节点的引用指针

   方法只有一个参数:新建文本节点锁包含的文本字符串,新元素节点不会自动添加到文档整里。


10.为元素节点添加子节点

   appendChild(Node node)

   var reference = element.appendChild(newChild);

   给定子节点newChild将成为给定元素节点element的最后一个子节点

   方法的返回值是一个指向新增子节点的引用指针


11.节点的替换

   1replaceChild():把一个给定父元素里的一个子节点替换为另外一个子节点

        var reference = element.replaceChild(newChild,lodChild)

        返回值是一个指向已被替换的那个子节点的引用指针

   2该节点除了替换功能以外还有移动的功能

   3该方法只能完成单向替换,若需要使用双向替换,需要自定义函数


12.删除节点

   1removeChild():从一个指定元素里删除一个子节点

      var reference = element.removeChild(node)

      返回值是一个指向已被删除的子节点的引用指针,某个节点被removeChild()方法删除时,这个节点所包含的所有子节点将同时被删除

      如果删除某个节点,但不知道其父节点,可以通过parentNode属性获取


13.插入节点

   1insertBefore():把一个给定节点插入到一个给定元素节点的给定子节点的前面

      var reference = element.insertBefore(newNode,targetNode)

      节点newNode将被插入到元素节点element中并出现在targetNode的前面

      节点targetNode必须是element元素的一个子节点


14.innerHTML属性

   1浏览器几乎都支持该属性,但不是DOM标准的组成部分

   innerHTML属性可以用来读写某个给定元素里的HTML内容


15.其他属性

   parentNode属性:获取给定元素的父节点

   nextSibling属性:获取给定元素的上一个元素

   previousSibling属性:获取给定元素的下一个元素




除非特别声明,本站所有PHP教程及其他教程/文章均为原创、翻译或网友投稿,版权均归UncleToo中文网所有, 转载请注明作者及出处。
原文网址:http://www.uncletoo.com/html/xmldom/1046.html
读完这篇文章后,你是否有所收获? 分享是一种生活的信念!
  • 0
  • 0
我来说两句
更多>>网友评论
UncleToo,一档有态度的PHP中文网

图片教程