JS-DOM-操作

---

layout: post
title: "JS-DOM-操作"
date: 2016-06-01 23:45:06 +0800
comments: true
categories: [JavaScript]

---

DOM操作HTML用起来感觉总有点没理解透。希望借这个机会好好深入一下

访问子结点childNodes

访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。

    
    
    
    
    
    
    
    

      javascript  
      
javascript
      
jQuery
      
PHP
    
    
    
    

运行结果:

IE:

ul子节点个数:3
节点类型:1

其它浏览器:

ul子节点个数:7
节点类型:3

注意:

1. IE全系列、firefox、chrome、opera、safari兼容问题

2. 节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7，如下图所示:

image

代码改成这样：

    
javascript
jQuery
PHP

就一样了

访问子结点的第一和最后项

• irstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
• lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。

访问父节点parentNode

• elementNode.parentNode 访问父节点
  • 注意:父节点只能有一个

访问兄弟节点

• nextSibling
  • 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
• previousSibling
  • 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。

插入节点appendChild()

在指定节点的最后一个子节点列表之后添加一个新的子节点

    
    
    
    
    
    
    
    
    

      
JavaScript
      
HTML
    
 
     
     
    
    
    

插入节点insertBefore()

insertBefore() 方法可在已有的子节点前插入一个新的子节点。

• insertBefore(newnode,node);
  • newnode: 要插入的新节点。
  • node: 指定此节点前插入节点。

    
    
    
    
    
    
    
    
    
JavaScript
HTML
 
     
     
    
    
    

删除节点removeChild()

removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

注意: 把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作。如果要完全删除对象，给 x 赋 null 值，代码如下:

image

替换元素节点replaceChild()

replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。

• node.replaceChild (newnode,oldnew )
  • newnode : 必需，用于替换 oldnew 的对象。
  • oldnew : 必需，被 newnode 替换的对象。

    
    
    
    
    
    
    
    
    
      
JavaScript是一个很常用的技术，为网页添加动态效果。
       将加粗改为斜体
      
        
      
     
    

创建元素节点createElement

createElement()方法可创建元素节点。此方法可返回一个 Element 对象。

• document.createElement(tagName)
  • tagName：字符串值，这个字符串用来指明创建元素的类型。

创建文本节点createTextNode

createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。

• document.createTextNode(data)
  • data : 字符串值，可规定此节点的文本。