JavaScript的基本DOM操作用法

1.childNodes可以获取任意节点的子节点(任意元素的子元素),他是一个包含所有子元素的数组

使用方法:

<div id="demo">
    <div></div>
    <span></span>
</div>

var oDom = document.getElementById('demo');
var oNode = oDom.childNodes;

注意: childNodes返回的结果中不只有div,span,这三个节点,就HTML而言,文档里面几乎所有的东西都是一个节点,甚至连空格符号,换行符

都是一个节点,在获取节点,我们需要获取一些可用的节点,需要使用nodeType

2.nodeType,nodeType属性共有12种可取值,但其中仅有三种具有使用价值

元素节点的nodeType的属性值为1

属性节点的nodeType的属性值为2

文本节点的nodeType的属性值为3

使用方法:

借用上述的代码:

for(var i = 0;i<oNode.length;i ++){
        if( oNode[i].nodeType == 1){
            console.log(oNode[i]);//只会输出元素节点
        }
    }

3.nodeValue,获取文本节点的值

例如: 

<div id="demo">aaaaaa
    <div>vvvvv</div>
    <span></span>
</div>

var oDom = document.getElementById('demo');

var oNode = oDom.childNodes;

console.log(oDom.firstChild.nodeValue);  //  输出aaaaaa,而不是div里面的vvvvv

因为aaaaaa是一个文本节点,也是第一个节点

如果要获取div里面的vvvvv,需要使用如下语法
console.log( oNode[1].nodeValue ); //输出 null,

console.log( oNode[1].nodeChild[0] ); //输出vvvvv

第一种输出为什么会输出为空呢?

因为nodeValue是div的一个属性,并非是

div元素里面的值,而div元素本身的nodeValue的属性值是一个空值,而div里面得值其实质是div的一个子节点

,所以,这里需要注意哦!

 

4.firstChild,lastChild获取子元素的第一个节点和最后一个节点,等同于firstChild

使用方法 : 

oDom.firstChild

注意:

<div id="demo"><p></p>
    <div></div>
    <span>
        <span>sdfsdf</span>
    </span>
</div>

如果是以上结构

console.log(oDom.firstChild);//打印出<p></p>

<div id="demo">
    <div></div>
    <span>
        <span>sdfsdf</span>
    </span>
</div>

如果是这种结构

console.log(oDom.firstChild);//打印出#text,

这是一个文本节点,前文已经

说过,HTML文档里面的任何东西都是节点,包括空格,回车符等都是空格

5.createElement(),创建一个节点,

使用方法

var child = document.createElement('p'); //创建一个p元素(节点)

document.createElement('div');//创建一个div元素(节点)

6.appendChild(),给某个节点插入一个字节点

使用方法

parent.appendChild(child);

7.createTextNode()创建一个文本节点,

例如:上述我们插入了一个子节点,但此时我们需要给他插入一个文本内容,此时可以使用此方法

var oTextValue = createTextNode('hello world')

child .appendChild(oTextValue);

注意 : createElement,createTextNode生成的节点只能使用一次,不可重复使用,

如果重复使用,只会使用最后一个

8.insertBefore(),把一个新的节点插入到某个节点之前,

在使用此方法时需要注意三个点

1.新元素:你想插入的元素(newElement)

2.目标元素 :你先把这个元素插入到那个元素之前(targetElement)

3.父元素:目标元素的父元素(parentElement)

语法:

parentElement.insertBefore(newElement,targetElement)

注意 : JavaScript虽然有insertBefore()方法,但是没有insertAfter()方法哟

9.parentNode,当前的节点的父节点

语法

oCurrentNode.parentNode ;

10.nextSibling,当前节点的下一个节点

语法

oCurrentNode.nextSibling;

注意:当前节点的下一个节点也可能是文本节点哦!