码迷,mamicode.com
首页 > 其他好文 > 详细

NODE操作

时间:2016-05-15 19:44:44      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:

 
1.NODE类型

DOM规定:整个文档时一个文档节点,每个html标签是一个元素节点 ,包含在html元素中的文本是文本节点。每个html属性是一个属性节点。主是属于 注释节点。

2.获取NODE的方式

a.通过获取元素的方式获取NODE

  document.getElementById("Id")

  document.getElementTagName("tagname")

  document.getElementByName("name")

  document.getElementClassName("classname")

b.通过NODE关系属性获得引用

parentNode 获取该元素的父节点

childNode 获取对象所有的子节点,只包含次级节点

firstChild 获取该元素的第一个子节点

lastChild 获取该元素的最后一个子节点

previouSibling 获取该元素上一个兄弟节点

nextSibling 获取该元素下一个兄弟节点

appendChild 向元素添加新的子节点,作为最后一个子节点

eg:

<body>

<ul id="myList"><li>milk</li><li>water</li></ul>
<ul id="myList"><li>milk</li><li>water</li></ul>
<ul id="myList"><li>milk</li><li>water</li></ul>

</body>
<button onclick="fn()">试试</button>

//返回首个子节点

function fn(){

        var x=document.getElementById("myList");
        console.log(x.firstChild.nodeName);

}

3.NODE属性

 

节点中文nodeType(节点类型)nodeName(节点名)nodeValue(节点值)
元素 1 TagName null
属性 2 attr 属性值
文本 3 #text 文本值
注释 8 #comment 注释文字
文档 9 #document null




4.NODE 增 删 查 改

### 新增节点 ###

a.新建元素  --creatElement

b.新建文本  --creatTextNode

c.元素中新增文本 -- 标签

d.找到已有元素--->获取getElementById

e.新增标签(加入到新元素里面作为子节点)--appendChild

### 删除节点 ###

a.找父元素(节点)--getElementById---a

b.找到要删除的元素--getElementById---b

c.执行删除 --removeChild

    b.parentNode.removeChild(b)

###改(替换节点) ##

a.replace(新,旧)

b.cloneNode()--属性及其值

c.insertBefore()--获取已有元素 插入新子节点




     

NODE操作

标签:

原文地址:http://www.cnblogs.com/1039595699TY/p/5495818.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!