DOM 对象

获取 dom

1. getElementsByName()方法 返回带有指定名称的节点对象的集合

   var i = document.getElementsByName('haha')
   var li = i[0]
   alert(li.innerHTML)
   alert(i[5].innerHTML)
   

   1. 因为 name 属性可能不唯一，返回的是元素的数组，而不是一个元素。
   2. 与数组类似，也有 length 属性。
2. getElementsByTagName()方法 返回带有指定标签名结点的集合 数组
   1. TagName 是标签的名字,如 p，input 等；
   2. 与数组类似，有 length 属性，从 0 开始；
3. 区别
   1. ID 是一个人的身份证号码，是唯一的。所以通过 getElementById 获取的是指定的一个人。
   2. Name 是他的名字，可以重复。所以通过 getElementsByName 获取名字相同的人集合。
   3. TagName 可看似某类，getElementsByTagName 获取相同类的人集合。如获取小孩这类人，getElementsByTagName(“小孩”)。
4. getAttribut(“name”)方法 通过元素节点的属性名称获取属性的值
   1. elementNode.getAttribute(”name“)； 使用 getElementById()、getElementsByTagName()等方法，获取到的元素节点；
   2. name 想要查询属性的名字；
5. setAttribute()方法
   1. elementNode.setAttribute(name,value) 增加一个指定名称和值的新属性
   2. name 要设置的属性名，value 要设置的属性值。
   3. 如果不存在指定名称的属性将会创建一个新属性，类似于 getAttribute 方法，只能通过元素节点调用函数。

节点

1. 节点属性
   1. nodeName：节点的名称 只读
      1. 元素节点的 nodeName 与标签名相同
      2. 属性节点的 nodeName 是属性的名称
      3. 文本节点的 nodeName 永远是#text
      4. 文档节点的 nodeName 永远是#document
   2. nodeValue：节点的值
      1. 元素节点的 nodeValue 是 undefined 或 null
      2. 文本节点的 nodeValue 是文本自身
      3. 属性节点的 nodeValue 是属性的值
   3. nodeType：节点的类型 只读
      1. 元素 1
      2. 属性 2
      3. 文本 3
      4. 注释 8
      5. 文档 9
2. 访问子节点 elementNode.childNodes 返回数组

   // parg 是一个到 <p> 元素的引用
   var children = parg.childNodes
   

   // 因为 ByTagName 返回的也是数组;
   var i = document.getElementsByTagName('div')[0].childNodes
   

3. 访问子节点的第一和最后项
   1. node.firstchild 如果没有子节点则返回 NULL
   2. node.lastchild 如果没有子节点则返回 NULL
4. 访问父节点
   1. elementNode.parentNode
   2. elementNode.parentNode.parentNode 祖节点
5. 访问兄弟节点
   1. nodeObject.nextSibling 返回下一个节点
   2. nodeObject.previousSbling 返回上一个节点
6. 插入节点 后

   var otest = document.getElementById('test')
   var newnode = document.createElement('li')
   newnode.innerHTML = 'php'
   otest.appendChild(newnode)
   

   1. xxxx.appendChild(newnode); 在指定节点(xxx)添加最后一个子节点
   2. 如果被插入的节点已经存在于当前文档的文档树中,则那个节点会首先从原先的位置移除,然后再插入到新的位置.
7. 插入节点 前

   var otest = document.getElementById('test')
   var node = document.getElementsByTagName('li')[1]
   var newnode = document.createElement('li')
   newnode.innerHTML = 'php'
   otest.insertBefore(newnode, node)
   

   1. insertBefore(newnode,node) newnode 要插入的新节点，node 在此节点前插入。
   2. otest.insertBefore(newnode,node); otest 父节点。
8. 删除节点
   1. nodeObject.removeChild(node); nodeObject 父节点 node 子节点中要删除的节点
   2. var a = nodeObject.removeChild(node); 删除的节点可以赋值给 x ，这个字节点不在 dom 树中，但是还存在内存中，可通过 x 操作，若要完全删除， a = null ;
9. 替换元素节点 返回被替换对象的引用
   1. node.replaceChild(newnode,oldnode); node 父节点 n 用于替换的对象 o 被替换的对象
   2. 当 oldnode 被替换时，所有与之相关的属性内容都将被移除。newnode 必须先被建立。
10. 创建元素节点
    1. createElement(tagName)
    2. var a = document.createElement(“input”); a.value=“button” 也可通过 setAttribute 设置
11. 创建文本节点
    1. var I = document.createTextNode(data) data 内容
    2. var a = document.createElement(“p”);
       1. appendChild(i); // 在 a 中加入 i 的内容 即 <p>data</p>

• ← Previous Post
• Next Post →