节点操作 - DOM编程

1. 获取节点

1.1 直接获取节点

父子关系：

element.parentNode
element.firstChild/element.lastChild
element.firstElementChild/element.lastElementChild
element.childNodes/element.children

兄弟关系：

element.previousSibling/element.nextSibling
element.previousElementSibling/element.nextElementSibling

<body>

  <ul id="ul">

    <li>First</li>

    <li>Second</li>

    <li>Third</li>

    <li>Fourth</li>

  </ul>

  <p>Hello</p>

</body>

var ulNode = document.getElementsByTagName("ul")[0];

console.log(ulNode.parentNode);             //<body></body>

console.log(ulNode.previousElementSibling); //null

console.log(ulNode.nextElementSibling);     //<p>Hello</p>

console.log(ulNode.firstElementChild);      //<li>First</li>

console.log(ulNode.lastElementChild);       //<li>Fourth</li>

1.2 通过接口获取节点

getElementById
getElementsByTagName
getElementsByClassName
querySelector
querySelectorAll

getElementById

获取文档中指定id的节点对象。getElementById只作用于document，返回唯一值。

var element = document.getElementById('id');

getElementsByTagName

获取指定标签元素节点的集合。此接口可直接通过元素而获取，不必直接作用于document之上。

  <ul id="ul">

    <li>First</li>

    <li>Second</li>

    <li>Third</li>

    <li>Fourth</li>

  </ul>

var ul = document.getElementById('ul');

console.log(ul.getElementsByTagName('li')); // HTMLCollection(4) [li, li, li, li]

console.log(document.getElementsByTagName('li')); // HTMLCollection(4) [li, li, li, li]

// 取出第一个li元素

console.log(document.getElementsByTagName('li')[0]); // <li>First</li>

getElementsByClassName

获取指定元素中具有指定class的所有节点。多个class可的选择可使用空格分隔，与顺序无关。

  <ul id="ul">

    <li class="li first">First</li>

    <li>Second</li>

    <li>Third</li>

    <li>Fourth</li>

  </ul>

var body = document.getElementsByTagName('body')[0];

console.log(body.getElementsByClassName('li first')); // HTMLCollection [li.li.first]

console.log(body.getElementsByClassName('first li')); // HTMLCollection [li.li.first]

console.log(document.getElementsByClassName('li first')); // HTMLCollection [li.li.first]

console.log(document.getElementsByClassName('first li')); // HTMLCollection [li.li.first]

querySelector / querySelectorAll

  <ul id="ul">

    <li class="aaa">First</li>

    <li class="aaa">Second</li>

    <li>Third</li>

    <li>Fourth</li>

  </ul>

var ul = document.getElementById('ul');

console.log(ul.querySelector('.aaa')); // <li class="aaa">First</li>

console.log(ul.querySelectorAll('.aaa')); // NodeList(2) [li.aaa, li.aaa]

console.log(document.querySelector('.aaa')); // <li class="aaa">First</li>

console.log(document.querySelectorAll('.aaa')); // NodeList(2) [li.aaa, li.aaa]

2. 创建节点

2.1 创建元素节点

document.createElement('tagName')

2.2 创建文本节点

document.createTextNode('text')

3. 修改节点

3.1 修改文本内容

获取或设置节点以及其后代节点的文本内容。

<p class="p">Hello</p>

var p = document.getElementsByTagName('p')[0];

console.log(p.textContent); // Hello

console.log(p.innerText); // Hello

textContent和innerText的作用是一样的。

3.2 innerHTML

获取或设置指定节点之中所有的HTML内容。

var elementsHTML = element.innerHTML;

4. 插入节点

appendChild

在指定的元素内追加一个元素节点。

<ul id="tea">

	<li>红茶</li>

	<li>绿茶</li>

	<li>普洱茶</li>

</ul>

<ul id="drink">

	<li>咖啡</li>

	<li>牛奶</li>

	<li>果汁</li>

</ul>

var drink = document.getElementById('drink');

var li = document.createElement('li');

li.innerText = '啤酒';

drink.appendChild(li);

insertBefore

在指定元素的指定节点前插入指定的元素。

var tea = document.getElementById('tea');

var li = document.createElement('li');

li.innerText = '凉茶';

tea.insertBefore(li, tea.firstChild);

5. 删除节点

<ul id="tea">

	<li>红茶</li>

	<li>绿茶</li>

	<li id="puer">普洱茶</li>

</ul>

<ul id="drink">

	<li>咖啡</li>

	<li>牛奶</li>

	<li>果汁</li>

</ul>

var tea = document.getElementById('tea');

tea.removeChild(document.getElementById('puer'));

参考：

节点操作 · 前端开发笔记本

节点操作 - DOM编程的更多相关文章

JavaScript 节点操作Dom属性和方法(转)
JavaScript 节点操作Dom属性和方法一些常用的dom属性和方法,列出来作为手册用. 属性: 1.Attributes 存储节点的属性列表(只读) 2.childNodes 存储 ...
Jquery6 DOM 节点操作
学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面中的元素结构就是通过这种节点模型来互相对应着的,通过这 ...
第一百六十七节，jQuery，DOM 节点操作，DOM 节点模型操作
jQuery,DOM 节点操作,DOM 节点模型操作学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...
轻松学习JavaScript二十二：DOM编程学习之节点操作
DOM编程不只能够查找三种节点,也能够操作节点.那就是创建,插入,删除.替换和复制节点.先来看节点操作方法: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...
(转载)html dom节点操作(获取/修改/添加或删除)
DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下 HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...
JavaScript操作DOM节点
DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网 ...
JavaScript之DOM操作，事件操作，节点操作
1,DOM操作 1.1 概念所谓DOM,全称Document Object Model 文档对象模型,DOM是W3C(World Wide Web Consortuum )标准,同时也定义了访问诸 ...
深入理解DOM节点操作
× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点前面的话一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...
Query节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作
一．创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...

随机推荐

机器学习实战基础（二十九）：决策树（二）DecisionTreeClassiﬁer与红酒数据集
DecisionTreeClassiﬁer与红酒数据集 1 sklearn.tree.DecisionTreeClassifier class sklearn.tree.DecisionTreeCla ...
机器学习实战基础（二十七）：sklearn中的降维算法PCA和SVD（八）PCA对手写数字数据集的降维
PCA对手写数字数据集的降维 1. 导入需要的模块和库 from sklearn.decomposition import PCA from sklearn.ensemble import Rando ...
python生成器原理剖析
python生成器原理剖析函数的调用满足"后进先出"的原则,也就是说,最后被调用的函数应该第一个返回,函数的递归调用就是一个经典的例子.显然,内存中以"后进先出&quo ...
git的工作区和暂存区
目录备注: 知识点工作区(Working Directory) 版本库(Repository) 备注: 本文参考于廖雪峰老师的博客Git教程.依照其博客进行学习和记录,感谢其无私分享,也欢迎各位查 ...
重装win7时遇到点小问题
最近装系统的时候有个头疼的事,事情的起因是这样的,我在工作的时候用的win7,破解的时候各种工具都破解不了,说是有未分配的盘符.并且,当时装的是没更新的win7,工作上要用到ie11只能在w ...
sql与SQL CODE和SQL State相关报错
操作数据库过程中,遇到许多问题,很多都与SQL CODE和SQL State相关,现在把一个完整的SQLCODE和SQLState错误信息和相关解释作以下说明,一来可以自己参考,对DB2错误自行找出原 ...
OSCP Learning Notes - File Transfers(3)
Metasploit Attack Target Server: IE8 on WinXP 1.Start the Metasploit. setoolkit 2.Select 2)Website A ...
Shell基本语法---函数
函数函数定义 function 函数名 () { 指令... return n } 函数调用及参数传递 function func() { echo "第零个参数:" $ #脚本 ...
vue中引入jq的步骤--以及注意事项
django 学习记录（一）
不使用 drf 来实现django 的 api 接口 json序列化 from django.shortcuts import render from django.views.generic.bas ...