节点操作 - 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> ...
随机推荐
- java 基本语法（十八）Lambda （五）Stream API
1.Stream API的理解:1.1 Stream关注的是对数据的运算,与CPU打交道集合关注的是数据的存储,与内存打交道 1.2 java8提供了一套api,使用这套api可以对内存中的数据进行过 ...
- java 基本语法（十六）Lambda （三）函数式接口
方法引用1.理解:方法引用可以看做是Lambda表达式深层次的表达.换句话说,方法引用就是Lambda表达式,也就是函数式接口的一个实例,通过方法的名字来指向一个方法. 2.使用情境:当要传递给Lam ...
- bzoj3375[Usaco2004 Mar]Paranoid Cows 发疯的奶牛*
bzoj3375[Usaco2004 Mar]Paranoid Cows 发疯的奶牛 题意: 依次给出n只奶牛的产奶时间段,求最大的k使得前k只奶牛不存在一个时间段被另一个时间段完全覆盖的情况.n≤1 ...
- CCNA-Part4 -网络层 - IP 协议了解一下
网络层主要提供寻址,路由的功能.而 IP 协议就是为了实现该功能而设计的. IP 协议 IP 协议的特性 工作在网络层 面向无连接的协议 具有单独处理包的能力 分层的地址 不可靠,尽力而为的传送 独立 ...
- 尝鲜刚发布的 SpringFox 3.0.0，以前造的轮子可以不用了...
最近 SpringFox 3.0.0 发布了,距离上一次大版本2.9.2足足有2年多时间了.可能看到这个名字,很多读者会有点陌生.但是,只要给大家看一下这两个依赖,你就知道了! <depende ...
- 题解 CF585F 【Digits of Number Pi】
考虑用数位 \(DP\) 来统计数字串个数,用 \(SAM\) 来实现子串的匹配. 设状态 \(f(pos,cur,lenth,lim,flag)\),表示数位的位数,在 \(SAM\) 上的节点,匹 ...
- 大型Java进阶专题(九) 设计模式之总结
前言 关于设计模式的文章就到这里了,学习这门多设计模式,你是不是有这样的疑惑,发现很多设计模式很类似,经常会混淆某些设计模式.这章节我们将对设计模式做一个总结,看看各类设计模式有什么区别.需要注意 ...
- redis pipelined 示例
redis 常用的数据类型 有序集合(sort set).无序集合 (set),hashMap redis pipelined 示例 List<Object> list = jedisTe ...
- nginx location proxy_pass 后面的url 加与不加/的区别
在nginx中配置proxy_pass时,当在后面的url加上了/,相当于是绝对根路径,则nginx不会把location中匹配的路径部分代理走;如果没有/,则会把匹配的路径部分也给代理走. 首先是l ...
- 【laravel】基于jwt实现用户认证
安装及基础配置 使用 composer 安装 # 建议使用1.0以上版本 composer require tymon/jwt-auth .*@rc 进行一些配置 有些文档会说要添加 Tymon\JW ...