Node对象的一些方法
Node对象是什么提供了
DOM的标准规范提供了Node对象，该对象主要提供了解析DOM节点树结构的属性和方法，DOM树结构主要是依靠节点进行解析，称为DOM节点树结构。Node对象是解析DOM节点树结构的主要入口。
- Node对象时继承于EventTarget对象的，EventTarget是一个用于接受时间的对象。
- Document对象和Element对象是继承于Node对象的。
判断节点类型
<body>
<button id="but" name="btn">按钮</button>
<script>
//元素节点
var elenode = document.getElementById('but');
//元素节点的nodeName属性为元素名大写
console.log(elenode.nodeName);//BUTTON
console.log(elenode.nodeType);//1
console.log(elenode.nodeValue);//null
//属性节点
var attrnode = elenode.getAttributeNode('name');
//属性节点的nodeName属性为当前属性名
console.log(attrnode.nodeName);//name
console.log(attrnode.nodeType);//2
//属性节点的nodeValue属性为当前属性值
console.log(attrnode.nodeValue);//btn
//文本节点
var textnode = elenode.firstChild;
//文本节点的nodeName属性为#text
console.log(textnode.nodeName);//#text
console.log(textnode.nodeType);//3
//文本节点的nodeValue属性为当前文本内容
console.log(textnode.nodeValue);//按钮
</script>
</body>遍历节点
获取父节点与父元素节点
父节点与父元素节点的区别
- parentNode：获取指定节点的父节点，其父节点不一定是元素节点
- parentElement：获取指定元素的父元素节点，其父节点必须是元素节点
<body>
<ul id="parent">
<li>苹果</li>
<li id="mi">小米</li>
<li>锤子</li>
</ul>
<script>
//子节点
var mi = document.getElementById('mi');
//通过子节点获取父节点
var parent1 = mi.parentNode;
console.log(parent1);
//通过子节点获取父元素节点
var parent2 = mi.parentElement;
console.log(parent2);
var html = document.documentElement;
console.log(html.parentNode);//文档节点
console.log(html.parentElement);//null
</script>
</body>空白节点
主流浏览器浏览器解析HTML页面内容为DOM节点树结构时，由于HTML中的源代码换行，会产生空文本的空白节点。
// 创建对象 - 专门用于封装解决空白节点问题
var myTools = {
// 解决获取其所有子节点childNodes属性的问题
childNodes : function(parentNode){
var children = parentNode.childNodes;
var arr = [];
for (var i=0; i<children.length; i++) {
var child = children[i];
if (child.nodeType === 1) {
arr.push(child);
}
}
return arr;
},
firstChild : function(parentNode){
var firstChild = parentNode.firstChild;
firstChild = firstChild.nextSibling;
return firstChild;
}获取子节点
通过html页面中置顶元素查找其子节点，通过Node对象的属性实现：
- childNodes：获取指定节点的所有子节点
- firstChild：获取指定节点的第一个子节点
- lastChild：获取指定节点的最后一个子节点
<body>
<ul id="parent">
<li>苹果</li>
<li id="mi">小米</li>
<li>锤子</li>
</ul>
<script>
var parent = document.getElementById('parent');
//获取所有的子节点
var childnode = myTools.childNodes(parent);
console.log(childnode);
//获取第一个子节点
var firschild = myTools.firstChild(parent);
console.log(firschild);
//获取最后一个子节点
var lastchild = parent.lastChild;
lastchild=lastchild.previousSibling;
console.log(lastchild);
</script>
</body>获取相邻兄弟节点
- proviousSibling:获取指定节点的相邻兄弟节点
- nextSibling：获取指定节点的后面相邻节点
<body>
<ul id="parent">
<li>苹果</li>
<li id="mi">小米</li>
<li>锤子</li>
</ul>
<script>
var mi =document.getElementById('mi');
//获取上一个相邻的兄弟节点
var presib = mi.previousSibling;//空白节点
var presib = presib.previousSibling;
console.log(presib);//苹果
var nextsib = mi.nextSibling;
var nextsib = nextsib.nextSibling;//空白节点
console.log(nextsib);//锤子
</script>
</body>插入节点
Node对象的appendChild()方法可以向指定节点的子节点列表的最后添加一个新的子节点
<body>
<ul id="parent">
<li>苹果</li>
<li id="mi">小米</li>
<li>锤子</li>
</ul>
<script>
var parent = document.getElementById('parent');
var newli = document.createElement('li');
var textnode = document.createTextNode('华为');
newli.appendChild(textnode);
/*
parentNode.appendChild(childNode)
* 说明
* parentNode - 表示指定节点(作为父节点)
* childNode - 表示被添加的节点(作为子节点)
* 特点 - 被添加在指定节点所有子节点列表的最后
*/
parent.appendChild(newli);insertbefore()方法
insertbefore()方法将一个新节点插入节点的某一个子结点之前
<body>
<ul id="parent">
<li>苹果</li>
<li id="mi">小米</li>
<li>锤子</li>
</ul>
<script>
var parent = document.getElementById('parent');
//创建子节点
var newli = document.createElement('li')
var textnode = document.createTextNode('华为');
newli.appendChild(textnode);
//获取指定的子节点
var mi = document.getElementById('mi');
//添加子节点
parent.insertBefore(newli,mi);
</script>
</body>删除节点
Node对象提供了removeChild()删除指定节点
<body>
<ul id="parent">
<li>苹果</li>
<li id="mi">小米</li>
<li>锤子</li>
</ul>
<li id="hua">爆米花</li>
<script>
var parent = document.getElementById('parent');
var mi = document.getElementById('mi');
parent.removeChild(mi);
//删除不是子节点的节点
var hua = document.getElementById('hua');
parent.removeChild(hua);//无法删除 报错
</script>
</body>替换节点
Node对象提供了replaceChild()方法用于替换节点
<body>
<ul id="parent">
<li id="hua">化物语</li>
<li>伪物语</li>
<li>猫物语</li>
</ul>
<ul id="ms">
<li>燃尽人间色</li>
<li id="re">东进不太热</li>
<li>提灯照河山</li>
</ul>
<script>
//定位要替换节点的父节点
var parent = document.getElementById('parent');
//定位被替换的子节点
var hua = document.getElementById('hua');
//创建新的子节点
var newli = document.createElement('li');
var textnode = document.createTextNode('恋物语');
newli.appendChild(textnode);
//替换节点
/* 对于新的节点用于替换，就是替换节点
* 已有的节点用于替换，移动+替换->原有节点从原来位置删除*/
parent.replaceChild(newli,hua);
//定位用于替换的原有节点
var re = document.getElementById('re');
//用原有节点替换节点
parent.replaceChild(re,newli);
</script>
</body>复制节点
Node对象提供了cloneNode()方法实现节点复制功能
<body>
<div id="ms1">白衣渡我</div>
<script>
var ms1 = document.getElementById('ms1');
/* node.cloneNode.(deep)
* deep参数 - 设置是否复制节点后代
* true - 复制后代
* false - 不复制后代*/
var ms2 = ms1.cloneNode(true);
var body = document.body;
body.appendChild(ms2);
</script>
</body>textContent属性、innerText属性
通过textContent属性可以获取和修改节点及其后代的文本属性
IE引入的innerText属性，类似于textContent，但有一定的区别。
<body>
<div id="sixia">提灯照河山</div>
<script>
var sixia = document.getElementById('sixia');
//设置节点文本内容
//具有浏览器兼容问题，ie6/7/8 不支持，undefined
sixia.textContent = '千秋此意';
var content;
if (sixia.textContent===undefined){
//IE6/7/8 不支持
content=sixia.innerText;
}else {
//其他浏览器支持
content=sixia.textContent;
}
console.log(content);
</script>
</body>Node对象的一些方法的更多相关文章
- getSelection、range 对象属性，方法理解，解释
网上转了一圈发现没有selection方面的解释,自己捣鼓下 以这段文字为例子.. <p><b>法国国营铁路公司(SNCF)20日承认,</b>新订购的2000列火 ...
- Aspose.Words：如何添加另一个WORD文档中的Node对象
原文:Aspose.Words:如何添加另一个WORD文档中的Node对象 首先看一段代码,这段代码意图从docSource中获取第一个表格,并插入docTarget的末尾: , true); doc ...
- 浏览器根对象document之方法概述
1.1 节点 筛选 getRootNode返回上下文的根节点. querySelector返回文档中匹配指定 CSS 选择器的第一个元素. querySelectorAll返回文档中匹配指定 CSS ...
- DOM基础知识（Node对象、Element对象）
5.Node对象 u 遍历节点 u 父节点 .parentNode - 获取父节点—> 元素节点或文档节点 .parentElement - 获取父元素节点—> 元素节点 u 子节 ...
- 怎样理解Node对象接口
dom中的节点都继承自Node接口, 也就是说, 所有的节点都具有Node接口所规定的属性和方法, 比如下面这个 <a> 标签, 它也继承了Node的所有属性和方法: 可以认为Node接口 ...
- JS高级---为内置对象添加原型方法
为内置对象添加原型方法 我们能否为系统的对象的原型中添加方法, 相当于在改变源码 我希望字符串中有一个倒序字符串的方法 //我希望字符串中有一个倒序字符串的方法 String.prototype. ...
- Thread 类的 sleep()方法和对象的 wait()方法都可以让线 程暂停执行，它们有什么区别?
sleep()方法(休眠)是线程类(Thread)的静态方法,调用此方法会让当前线程 暂停执行指定的时间,将执行机会(CPU)让给其他线程,但是对象的锁依然保 持,因此休眠时间结束后会自动恢复(线程回 ...
- Effective java笔记（二），所有对象的通用方法
Object类的所有非final方法(equals.hashCode.toString.clone.finalize)都要遵守通用约定(general contract),否则其它依赖于这些约定的类( ...
- TODO：Node.js pm2使用方法
TODO:Node.js pm2使用方法 pm2 是一个带有负载均衡功能的Node应用的进程管理器. 当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着,0秒的重载, PM2是完 ...
随机推荐
- Trailing Zeroes (III) LightOJ - 1138 不找规律-理智推断-二分
其实有几个尾零代表10的几次方但是10=2*510^n=2^n*5^n2增长的远比5快,所以只用考虑N!中有几个5就行了 代码看别人的: https://blog.csdn.net/qq_422797 ...
- SQL语句创建函数
----先create,再alter alter function fuc (@userid int,@strWhere varchar(max),@strWhere2 varchar(max) ) ...
- JAVA总结--分布式锁
1.概念 分布式锁出现的原因:单体应用单机部署环境下,为了解决多线程并发问题,我们会使用ReentrantLcok或synchronized来解决互斥问题:但业务的需求,单机部署演变成分布式系统后,在 ...
- BZOJ 1179 (Tarjan缩点+DP)
题面 传送门 分析 由于一个点可以经过多次,显然每个环都会被走一遍. 考虑缩点,将每个强连通分量缩成一个点,点权为联通分量上的所有点之和 缩点后的图是一个有向无环图(DAG) 可拓扑排序,按照拓扑序进 ...
- Java并发知识总结
jixu 8. 并发 启动线程的几种方式 Thread t7 = new Thread(timer); t7.start(); Thread.sleep(100) //暂停当前线程 class MT ...
- javascript事件触发器fireEvent和dispatchEvent
javascript事件触发器fireEvent和dispatchEvent 事件触发器就是用来触发某个元素下的某个事件,IE下fireEvent方法,高级浏览器(chrome,firefox等) ...
- Vue.js——60分钟组件快速入门（上篇）二
来源:https://www.cnblogs.com/keepfool/p/5625583.html 组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小 ...
- 行人重识别(ReID) ——数据集描述 CUHK03
数据集简介 CUHK03是第一个足以进行深度学习的大规模行人重识别数据集,该数据集的图像采集于香港中文大学(CUHK)校园.数据以"cuhk-03.mat"的 MAT 文件格式存储 ...
- Sersync 上配置 Sersync 服务
上面的工作做好之后呢,下面就开始正式配置我们的 Sersync 了! 我们在 Sersync 安装过程中所用到包均是从谷歌 Sersync 项目组取得的,地址: https://code.google ...
- dotnet ef执行报错, VS 2019发布时配置项中的Entity Framework迁移项显示不出来
VS 2019发布时配置项中的Entity Framework迁移项显示不出来 dotnet ef dbcontext list --json “无法执行,因为找不到指定的命令或文件.可能的原因包括: ...