节点操作 - 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> ...
随机推荐
- redis（七)：Redis 字符串(String)（python）
# -*- coding: utf-8 -*- import redis #这个redis不能用,请根据自己的需要修改 r =redis.Redis(host="123.516.74.190 ...
- gvim使用总结
我的gvim配置 set nocompatible " 关闭vi兼容 " 显示相关 set go= set number set cursorline set nowrap set ...
- Cyber Security - Palo Alto Security Policies(1)
Security policies: Enforcing network traffic by configuring rules of what is allowed or denied to co ...
- Python Ethical Hacking - DNS Spoofing
What is DNS Spoofing Sniff the DNSRR packet and show on the terminal. #!/usr/bin/env python from net ...
- 题解 UVA1193 Radar Installation
原题 PDF OJ 思路 分析 因为半径d已经确定,所以对于每个点,我们可以算出它在x 轴上的覆盖位置线段LR,如图. 此问题便转为: 对于 n 个区间,每个区间内至少有1个点,求最少点数. 算法 我 ...
- JavaScript以万或亿为单位显示，并保留两位小数或取整
//单位:万 n = 814308678.00; n = Math.floor((n /10000) * 100) / 100; //保留小数点两位 //n = parseInt((n /10000) ...
- 使样式只在webkit内核生效
@media screen and (-webkit-min-device-pixel-ratio:0){ .do someting{ } } 使用媒体查询,制定样式
- 【Nginx】如何实现Nginx的高可用负载均衡？看完我也会了！！
写在前面 不得不说,最近小伙伴们的学习热情是越来越高,不断向冰河提出新的想学习的技术.这不,又有小伙伴问我:冰河,你在[Nginx专题]写的文章基本上都是Nginx单机版的,能不能写一篇关于Nginx ...
- 使用java实现希表的基础功能
用java代码完成哈希表数据结构的简单实现, 以公司雇员的添加修改作为模拟实例 具体代码如下: package com.seizedays.hashtable; import java.util.Sc ...
- Windows 平台做 Python 开发的最佳组合
在 Windows 上怎样做 Python 开发?是像大神那样使用纯文本编辑器,还是用更加完善的 IDE?到底是用自带的命令行工具,还是需要装新的 Terminal?本文将带你了解如何利用微软官方维护 ...