JavaScript 节点操作

àì夳堔傛蜴生んèń 2022-05-26 02:44 237阅读 0赞

*   *  1.创建节点
     *  2.复制节点
     *  3.插入节点
     *  4.替换节点
     *  5.移除节点
     *  6.查找节点

## 1.创建节点 ##

// 创建元素节点
    document.createElement('div');
    
    // 创建文本节点
    document.createTextNode();
    
    // 创建注释节点 并木有用
    document.createComment();
    
    // 创建片段
    document.createDocumentFragment();

## 2.复制节点 ##

// true标识会克隆原节点的所有子节点
    nodeObj.cloneNode(boolean)

## 3.插入节点 ##

// 在目标节点追加尾部子节点
    parentNode.appendChild(childNode);
    
    // 在目标节点追加首位子节点
    parentNode.insertBefore(newNode, targetNode);
    
    /* option: 'beforeBegin' 在node之前插入html 'afterEnd' 在node之后插入... 'afterBegin' 在子元素之前插入... 'before' 在子元素之后插入... */
    node.insertAdjacentHTML(option, html)

## 4.替换节点 ##

parentNode.replace(newNode, targetNode)

## 5.移除节点 ##

parentNode.removeChild(childNode) // 谋杀式
    childNode.remove() // 自杀式

## 6.查找节点 ##

document.getElementById()
    document.getElementsByTagName()
    document.getElementByName()
    
    // 返回子节点列表
    node.childNodes
    
    // 返回第一个子节点
    node.firstChild
    
    // 返回最后一个子节点
    node.lastChild
    
    // 返回父节点
    node.parentNode
    
    // 返回祖先节点
    node.ownerDocument
    
    // 返回同级前一个节点
    node.previousSibling
    
    // 返回同级后一个节点
    node.nextSibling

发表评论取消回复

表情：

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

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

相关阅读

相关 JavaScript中DOM节点常用操作 (节点的增删追加以及节点属性操作)

动态创建DOM节点 var obj = document.createElement(tagName); 例： var li = document.c

刺骨的言语ヽ痛彻心扉/ 2023年06月09日 14:26/ 0 赞/ 173 阅读

相关 JavaScript节点操作--创建节点、添加节点、删除节点、复制节点

节点操作创建节点 document.createElement('tagName') document.createElement()方法创建由tagN

喜欢ヅ旅行/ 2022年12月23日 06:13/ 0 赞/ 266 阅读

相关 JavaScript经典案例：表格节点操作

效果展示: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

逃离我推掉我的手/ 2022年12月23日 03:22/ 0 赞/ 69 阅读

相关 JavaScript DOM 基础：节点查找与节点操作

DOM概念文档对象模型（Document Object Model），它定义了访问和处理HTML文档的标准方法。 HTML文档中的每个成分都是一个节点。HTML文档中

谁践踏了优雅/ 2022年11月19日 06:28/ 0 赞/ 278 阅读

相关 JavaScript中的DOM节点操作

创建一个节点的方法 1. document.createElement() //创建元素节点 2. document.createTextNode()

曾经终败给现在/ 2022年06月12日 23:12/ 0 赞/ 257 阅读

相关通过节点JavaScript操作改变文字大小

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Ti

╰半夏微凉°/ 2022年06月09日 06:17/ 0 赞/ 223 阅读

相关 JavaScript 节点操作

1.创建节点 2.复制节点 3.插入节点 4.替换节点 5.移除节点 6.查找节点 1.创

àì夳堔傛蜴生んèń/ 2022年05月26日 02:44/ 0 赞/ 238 阅读

相关 JavaScript复习之JavaScript 操作 DOM 节点

今日目录 1、JavaScript 处理 DOM 事件 2、JavaScript 操作 DOM 节点 3、

清疚/ 2022年05月25日 10:37/ 0 赞/ 299 阅读

相关 JavaScript-子节点类型判断与操作

<h2 id="header">hello</h2> <ul class="list"> <li>1</li> <li>2</li>

迈不过友情╰/ 2022年04月17日 01:07/ 0 赞/ 210 阅读

相关 javascript事件和节点操作说明

javaScript事件处理 load：load事件在浏览器载入文档时触发，如果某事件（如启动定时器，提前加载图片等）要在文档载入时触发，一般都在标记里面加入类似于”...

你的名字/ 2021年02月10日 09:33/ 0 赞/ 619 阅读