NODE操作

 
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 οnclick="fn()">试试</button>

//返回首个子节点

function fn(){

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

}

3.NODE属性

 

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




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()--获取已有元素 插入新子节点




     

转载于:https://www.cnblogs.com/1039595699TY/p/5495818.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值