节点操作 - 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> ...
随机推荐
- shell专题（十一）：企业真实面试题（重点）
11.1 京东 问题1:使用Linux命令查询file1中空行所在的行号 答案: [atguigu@hadoop102 datas]$ awk '/^$/{print NR}' sed.txt 问题2 ...
- 04 flask源码剖析之LocalStack和Local对象实现栈的管理
04 LocalStack和Local对象实现栈的管理 目录 04 LocalStack和Local对象实现栈的管理 1.源码入口 1. flask源码关于local的实现 2. flask源码关于l ...
- 数据可视化之powerBI入门（五）PowerQuery,支持从多种源导入数据
PowerBI的强大绝不仅是最后生成炫酷的可视化报告,她在第一步数据获取上就显示出了强大的威力,利用Power Query 的强大数据处理功能,几乎可以从任何来源.任何结构.任何形式上获取数据 htt ...
- python 面向对象专题（七）：异常处理
目录 python面向对象07/异常处理 1. 异常错误分类 2. 什么是异常? 3. 异常处理 4. 为什么要有异常处理 5. 异常处理的两种方式 1.if判断 2.try 6. 常见异常种类 1. ...
- Hello！GitHub 好用好玩值得收藏的开源项目集合~
这是我许久以来从各处发现的极佳开源项目,希望分享给大家~ 如果帮到你了,给我个赞好嘛 编程语言类 ️learn-go-with-tests(通过单元测试学Go) GitHub地址:https://gi ...
- clang-format的介绍和使用
目录 参考信息 介绍 安装 命令格式 基本使用 使用.clang-format来实现自定义格式化 导出.clang-format文件 使用.clang-format文件 .clang-format配置 ...
- Crystal Reports --报表设计
完整的报表解决方案 数据访问—>报表设计—>报表管理—>与应用系统集成 一.规划报表 设计报表的准备工作 谁看报表? 报表的数据是什么?(页眉页脚的内容?是否需要分组?是否需要汇总? ...
- msf stagers开发不完全指北(四): msf 中使用域前置技术隐藏流量
msf 中使用域前置技术隐藏流量 前几篇都是说了下如何采用不同的语言开发 reverse_tcp 第二阶段,接下来将慢慢分析 reverse_http,这篇文章并不会围绕 stagers 进行讲解,这 ...
- BT面板安装教程
面板特点 一键配置服务器环境(LAMP/LNMP) 一键安全重启 一键创建管理网站.ftp.数据库 一键配置(定期备份.数据导入.伪静态.301.SSL.子目录.反向代理.切换PHP版本) 一键安装常 ...
- C++语法小记---类模板
类模板 类模板和函数模板类似,主要用于定义容器类 类模板可以偏特化,也可以全特化,使用的优先级和函数模板相同 类模板不能隐式推倒,只能显式调用 工程建议: 模板的声明和实现都在头文件中 成员函数的实现 ...