原生js节点操作

本是古典何须时尚 2022-06-09 04:21 205阅读 0赞

***节点属性值***  
1 获取上级节点

Node.parentNode     //返回父节点
        Node.ownerDocument  //返回祖先节点

2 获取下级节点

Node.childNodes     //返回相邻后代的元素节点和文本节点对象的集合(换行算作文本节点)
        Node.children       //返回相邻后代的元素节点集合
        Node.firstChild     //返回相邻后代第一个的元素节点
        Node.lastChild      //返回相邻后代最后一个的元素节点

3 获取同级节点

Node.previousSibling   // 返回前一个节点
        Node.nextSibling       // 返回后一个节点

***节点方法***  
1 创建

document.createElement('li')           //创建元素节点
        document.createAttribute("class")      //创建属性节点
        document.createTextNode("Hello World") //创建文本节点

2 复制

var newNode=Node.cloneNode(Boolean)    
        //Boolean:true 返回Node及其全部子孙节点
        //Boolean:false 只返回Node节点

3 增加

parentNode.appendChild(newNode)     //增加节点至子节点末尾
        parentNode.insertBefore(newNode,targetNode)   //增加节点至targetNode之前
        parentNode.innerHTML+='<li></li>'   //增加元素节点至子节点末尾
        parentNode.innerText+='Hello World' //增加文本节点至子节点末尾

4 删除

parentNode.removeChild(childNode)     //已知父节点
        node.parentNode.removeChild(childNod) //未知父节点

5 获取

document.getElementById()
        document.getElementsByClassName()
        document.getElementsByTagName()

发表评论取消回复

表情：

评论列表（有 0 条评论，205人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS 操作节点的使用

<table> <tbody> <tr> <td> <p>名称</p> </td> <td> <p>描述</p> </td> </tr>

àì夳堔傛蜴生んèń/ 2023年10月05日 08:34/ 0 赞/ 7 阅读

相关 js原生操作DOM整理

[JavaScript获取元素尺寸和大小操作总结][JavaScript] [JS获取子节点、父节点和兄弟节点的方法实例总结][JS] [js判断是否超过几行][js]

妖狐艹你老母/ 2022年10月15日 06:53/ 0 赞/ 167 阅读

相关 js 节点操作及事件

<span style="font-size:14px;"><div id="a1"> this is a div block; </div>

- 日理万妓/ 2022年08月10日 11:54/ 0 赞/ 207 阅读

相关原生js节点操作

节点属性值 1 获取上级节点 Node.parentNode //返回父节点 Node.ownerDocument //返回祖先节点

本是古典何须时尚/ 2022年06月09日 04:21/ 0 赞/ 206 阅读

相关原生js 操作dom

ng-click="brandFnc($event)" $scope.brandFnc = function($event) { // 通过 $

青旅半醒/ 2022年06月04日 08:12/ 0 赞/ 236 阅读

相关 JS中的节点操作

节点的增删改查 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

柔情只为你懂/ 2022年05月29日 14:14/ 0 赞/ 180 阅读

相关原生 JS 方法操作 DOM

原生 JS 方法操作 DOM 一、节点介绍 1、节点的类型和nodeType 标签节点的`nodeType`为1、文本节点的`nodeType`为3、注释节点

短命女/ 2022年03月11日 05:22/ 0 赞/ 277 阅读

相关原生JS操作大全

字符串操作：单字符切割字符串 var data= "烈日当头已数月有余，天气高温，汗流浃背，不知所言。"; var str = data.split

墨蓝/ 2021年12月10日 10:17/ 0 赞/ 311 阅读

相关关于原生js的节点兼容性

关于节点的兼容性： 1：获取元素的子节点　a:　childNodes：获取元素的子节点，空文本，非空文本，注释，获取的比较全面，　　　　　　　　　如果只是想获取元

绝地灬酷狼/ 2021年12月01日 10:56/ 0 赞/ 366 阅读

相关 Js原生如何操作Dom方法

\\ DOM操作方法 \\ 原生js5中操作dom一共是有三种方法：第一种：标签式的绑定（HTML事件处理）第二种：DOM0级事件处理第三种:DO

柔光的暖阳◎/ 2021年07月24日 18:40/ 0 赞/ 437 阅读