Javascript：节点的操作与Style、事件

javaScript操作节点(Element)

firstElementChild跟firstChild的区别在于，有Element代表元素，firstElementChild是元素选择器，非元素他是不会选择到的，如文本节点之类的。而firstChild是所有都选择所有节点，包括文本。

注意：IE8以上的不支持元素选择器。

一、常用方法：

元素对象.parentNode 返回节点的父节点

元素对象.childNodes 返回节点的子节点集合

元素对象.firstchild 获得第一个子节点

元素对象.lastchild 获得最后一个子节点

元素对象.previousSlibing 获取上一个节点的内容

元素对象.nextsSlibing 获取下一个节点的内容

元素对象.childNodes 获取所有子节点的集合

.firstchild .lastchild 注：一般不用这两个方法来获取对象的子节点，因为无论是空格还是换行都会被计算到对象的节点中，所以获取到的即使是文本节点也算一个节点。

二、一般我们使用获取节点的方法，一般是获取它的元素节点，方法为

元素对象.firstElementChild

元素对象.lastElementChild

元素对象.previousSlibing

元素对象.nextSlibing

三、创建，添加，替换，删除节点

1.创建一个新的节点

var element = document.creatElement( "标签类型" )

2.将B标签添加到A标签的子节点里，成为子节点

A.appendChild( B )

3.删除一个节点（首先调用它的父节点，然后通过父节点来删除该节点）

元素对象.parentNode.removeChild( node )

4.替换一个节点（首先也是调用它的父节点，然后通过父节点来替换该节点）

实例代码：

创建：

<input type="button" onclick="book()" value="确定">
<div></div>
<script type="text/javascript">
    function book() {
        //获取div容器
       var tv_div= document.getElementsByTagName("div")[0];
       //创建节点
      var tv_img=  document.createElement("img");
      //赋值
        tv_img.setAttribute("src","../images/logo.png");
        tv_img.setAttribute("alt","图片无法显示");
       //追加
        tv_div.appendChild(tv_img);

    }
删除和替换

<input type="button" value="删除"  onclick="del()" >
<img src="../images/logo.png" id="first">

<input type="button" value="更换图片"  onclick="update()" >
<img src="../images/logo.png" id="two">

<script type="text/javascript">
    //删除节点
  function del() {
      var first=document.getElementById("first");
      first.parentNode.removeChild(first);
  }
  //替换节点
 function update() {

     var old_img=document.getElementById("two");
    /* old_img.setAttribute("src","../images/login-icons.png")*/
     //创建一个新节点
     var  new_img=document.createElement("img");
     new_img.setAttribute("src","../images/dd_logo.jpg");
     //替换
     old_img.parentNode.replaceChild(new_img,old_img);
 }

</script>

四、获得节点的nodeName，nodeValue，nodeType

1.节点的类型nodeType

元素节点 element返回值1

属性节点 attr返回值2

文本节点 text返回值3

注释节点 comments 返回值8

文档 document 返回值9

这个可以通过节点类型(nodeType)来获取，后期一般用这个来判断该对象是什么类型

2.nodeVlue 节点值对文本节点有用，假如我们需要获得一个文本节点，可以他通过child方法来获取数组，跟据文本节点的下标用nodeVlue的方法来获取这个文本信息，同时nodeVlue对元素节点没用，都会返回null

3.nodeName 返回元素的标签名，以大写形式表示

nodeName 属性指定节点的节点名称。

如果节点是元素节点，则 nodeName 属性返回标签名。

如果节点是属性节点，则 nodeName 属性返回属性的名称。

文本节点就返回#text，元素节点就返回该元素标签的大写名称如（SCRIPT P)

nodeType 该节点的类型，返回的会根据不同类型返回不同的数值（数值在上面有写）

五、操作节点的属性

元素对象.getAttribute(" 属性名 ") 获取节点的属性信息

元素对象.setAttribute( "属性名 " ，”属性值“) 设置节点的属性信息

六、操作节点的样式

通过ID获得该节点并设置其样式的方法

document.getElementById(“tv_div" ) . style="blackground-color : red ”；

通过点style 的方法直接给它添加样式类型

document.getElementById（“tv_div" ). classNode="样式名称";

也可以直接添加class样式，输入class样式名，就能将当前的样式覆盖原来的class样式，请注意，是覆盖，不是添加

获取元素的样式

alert ( document.getElementById( " tv_div" ).style.display )

不兼容ie的话，就用下面的方法

alert ( document.getElementById( " tv_div" ).currentstyle.display )

实例代码：

设置样式：

<div id="tv_div">
    当前字体样式
</div>
<input type="button" value="确" onclick="showStyle()">

<script type="text/javascript">
    function showStyle() {
       var tv_div=document.getElementById("tv_div");
        tv_div.style.color="red";
        tv_div.style.fontSize="80px";
        tv_div.style.fontStyle="italic";
        tv_div.style.fontFamily="微软雅黑"
    }
</script>

获取样式：

<div id="one_div" style="font-size: 80px;background-color: #0000FF;color: red;">加油</div>

<script type="text/javascript">
    alert(document.getElementById("one_div").style.color)
    alert(document.getElementById("one_div").style.backgroundColor)
    alert(document.getElementById("one_div").style.fontSize)
</script>

更改样式：

<script type="text/javascript">
    //移入鼠标
   function over() {
       document.getElementById("cartList").className="cartOver";
       document.getElementById("cartList").className="cartListOver";
   }
    function out() {
        //移除鼠标
        document.getElementById("cartList").className="cartOut";
        document.getElementById("cartList").className="cartListOut";
    }


</script>

七、触发事件类型

onclick 点击触发

onmouseover 当鼠标移到某元素之上

onmouseout 当鼠标从某元素移开

onmousedown 鼠标按钮被按下

---------------------------------------------------------------------

1,方法，div.parentNode 返回节点的父节

div.childNodes 返回节点的子节点集合

div.firstchild 获得第一个子节点

div.lastchild 获得最后一个子节点

div.previousSlibing 获取上一个节点的内容

div.nextsSlibing 获取下一个节点的内容

div.childNodes 获取所有子节点的集合

div.firstchild 获得第一个子节点 div.lastchild 获得最后一个子节点

注：一般不用这两个方法来获取对象的子节点，因为无论是空格还是换行都会被计算到对象的节点中，多以获取到的即使是文本节点也算一个节点，

2一般我们使用获取节点的方法，一般是获取它的元素节点，方法为

div.firstElementChild

div.lastElementChild

div.previousSlibing

div.nextSlibing

他只会获取对象子节点中的元素节点

3创建，添加，替换，删除

创建一个新的节点

var element = document.creatElement( "标签类型" )

将B标签添加到A标签的子节点集合的

A.appendChild( B )

删除一个节点（首先调用它的父节点，然后通过父节点来删除该节点）

div.parentNode.removeChild( node )

替换一个节点（首先也是调用它的父节点，然后通过父节点来替换该节点）

div.parentNode.replaceChild( newnode, oldnode)

4获得节点的nodeName，nodeValue，nodeType

nodeType根据类型不同就返回

1==元素element，

2==属性attr，

3==文本text，

8==注释comments，

9==文档document

注：这些返回的数字我们可以配套 i f 判断来进行别的操作

nodeVlue对文本节点有用，假如我们需要获得一个文本节点，可以他通过child方法来获取数组，跟据文本节点的下标用nodeVlue的方法来获取这个文本信息，同时nodeVlue对元素节点没用，都会返回null

nodeName会返回对应节点的name信息，假如是

文本节点就返回#text

元素节点就返回该元素标签的大写名称如（SCRIPT UL LI.....)

5操作节点的属性

div.getAttribute(" 属性名 ") 获取节点的属性信息

div.setAttribute( "属性名 " ，”属性值“) 设置节点的属性信息

6.操作节点的样式