节点操作 - DOM编程
1. 获取节点
1.1 直接获取节点
父子关系：
element.parentNodeelement.firstChild/element.lastChildelement.firstElementChild/element.lastElementChildelement.childNodes/element.children
兄弟关系：
element.previousSibling/element.nextSiblingelement.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 通过接口获取节点
getElementByIdgetElementsByTagNamegetElementsByClassNamequerySelectorquerySelectorAll
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> ...
随机推荐
- MYSQL 之 JDBC（九）：增删改查（七）DAO的补充和重构
DAO重构后的代码 package com.litian.jdbc; import org.apache.commons.beanutils.BeanUtils; import java.sql.*; ...
- scrapy 基础组件专题（二）：下载中间件
下载器中间件是介于Scrapy的request/response处理的钩子框架,是用于全局修改Scrapy request和response的一个轻量.底层的系统. 1.激活Downloader Mi ...
- java 基本语法（九） 数组（二） 一维数组
1.一维数组的声明与初始化 正确的方式: int num;//声明 num = 10;//初始化 int id = 1001;//声明 + 初始化 int[] ids;//声明 //1.1 静态初始化 ...
- javascript基础（三）： 操作DOM对象（重点）
DOM:文档对象模型 核心 浏览器网页就是一个Dom树形结构! 更新:更新Dom节点 遍历Dom节点:得到Dom节点 删除:删除一个Dom节点 添加:添加一个新的节点 要操作一个Dom节点,就必须要先 ...
- 你有认真了解过自己的“Java对象”吗？ 渣男
对象在 JVM 中是怎么存储的 对象头里有什么? 文章收录在 GitHub JavaKeeper ,N线互联网开发必备技能兵器谱,有你想要的. 作为一名 Javaer,生活中的我们可能暂时没有对象,但 ...
- c++运行程序 改变字和背景的颜色与窗口大小和位置 (c++)(windows)
关于改变字体的颜色和背景颜色: 在#include <windows.h> 库里 0=黑色 1=蓝色 2=绿色 3=湖蓝色 4=红色 5=紫色 6=黄色 7=白色 8=灰色 9=淡蓝色 A ...
- 开源 5 款超好用的数据库 GUI 带你玩转 MongoDB、Redis、SQL 数据库
作者:HelloGitHub-*小鱼干 工欲善其事必先利其器,想要玩溜数据库,不妨去试试本文安利的 5 款开源的数据库管理工具.除了流行的 SQL 类数据库--MySQL.PostgreSQL 之外, ...
- 在linux下修改文件夹机器子文件夹的权限
使用命令:chmod 用法:chmod [选项]... 模式[,模式]... 文件... 或:chmod [选项]... 八进制模式 文件... 或:chmod [选项]... --reference ...
- Python Ethical Hacking - The Lab and Needed Software
The Lab and Needed Software Attacker Machine - Kali Linux https://www.kali.org/ 1. Install the softw ...
- postman之测试集
简单点,说话的方式简单点 步骤1:测试全部通过,哈哈~ 开玩笑! 适用场景:多组数据测试,像排比句那样,有规律,比如姓名,性别,年龄.这时候的测试要求就是这些信息与返回体的结果做比较!! 步骤1:创建 ...