JavaScript:DOM编程1

页面导航:首页 > 网络编程 > JavaScript > JavaScript:DOM编程1

JavaScript:DOM编程1

来源: 作者: 时间:2016-02-05 11:06 【

65279; 65279;JavaScript:DOM编程1 节点及其类型 1)元素节点 2)属性节点:元素的属性,通常情况下, 操作属性节点直接通过 元素节点 属性名 的方式来读写属性 20540; 3)文本节点:是元素的子节


JavaScript:DOM
1.节点及其类型
1)元素节点
2)属性节点:元素的属性,通常情况下, 操作属性节点直接通过 "元素节点.属性名" 的方式来读写属性值
3)文本节点:是元素的子节点,其内容为文本

donot forget me


element node : p
attribute node : title="name"
text node :donot forget me

2.js在html中的位置
在中,写在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)若元素节点只有一个文本节点一个子节点
例如

  • 北京


    可以先获取到指定的元素节点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属性:获取给定元素的下一个元素


  • Tags:

    相关文章

      文章评论

      最 近 更 新
      热 点 排 行
      Js与CSS工具
      代码转换工具
      
      <