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);//BUTTONconsole.log(elenode.nodeType);//1console.log(elenode.nodeValue);//null//属性节点var attrnode = elenode.getAttributeNode('name');//属性节点的nodeName属性为当前属性名console.log(attrnode.nodeName);//nameconsole.log(attrnode.nodeType);//2//属性节点的nodeValue属性为当前属性值console.log(attrnode.nodeValue);//btn//文本节点var textnode = elenode.firstChild;//文本节点的nodeName属性为#textconsole.log(textnode.nodeName);//#textconsole.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 不支持,undefinedsixia.textContent = '千秋此意';var content;if (sixia.textContent===undefined){//IE6/7/8 不支持content=sixia.innerText;}else {//其他浏览器支持content=sixia.textContent;}console.log(content);
</script>
</body>
Node对象的一些方法相关推荐
- Node对象的insertBefore方法
var node = parentNode.insertBefore(node, referenceNode) 作用:将node节点插入到referenceNode节点之前,parentNode为对应 ...
- Node 裁切图片的方法
1.安装 jimp $ npm install --save jimp 2.读取本地图片切图 jimp.read('本地图片地址', function (err, im ...
- Node.js 调用 C++ 方法 / C++ Addons 详解
最近开发涉及到了一些Node.js调用C++的地方,于是网上搜了一下,发现网上好多文章都是比较片面的东西,没法直接使用.于是花点时间总结一下. Android开发中Java 调用C++的部分叫JNI, ...
- Node对象与Element对象
Node对象与Element对象 Node对象 Node对象是什么 继承链关系 判断节点类型 遍历节点 获取父节点 空白节点问题 空白节点 空白节点的解决方案 获取子节点 获取相邻兄弟节点 插入节点 ...
- html中有csstext方法吗,style对象的cssText方法有哪些使用方法
这次给大家带来style对象的cssText方法有哪些使用方法,style对象的cssText方法使用的注意事项有哪些,下面就是实战案例,一起来看一下. cssText 本质是什么? cssText ...
- Spring中利用applicationContext.xml文件实例化对象和调用方法
Spring中实例化对象和调用方法入门 1.jar包和xml的准备 已上传至百度云盘,链接: https://pan.baidu.com/s/1CY0xQq3GLK06iX7tVLnp3Q 提取码: ...
- Node.js与Sails~方法拦截器policies
policies sails的方法拦截器类似于.net mvc里的Filter,即它可以作用在controller的action上,在服务器响应指定action之前,对这个action进行拦截,先执行 ...
- 对象的notify方法的含义和对象锁释放的三种情况
1,notify的含义 (1)notify一次只随机通知一个线程进行唤醒 (2)在执行了notify方法之后,当前线程不会马上释放该对象锁,呈wait状态的线程也不能马上获得该对象锁, 要等到 ...
- ES使用org.elasticsearch.client.transport.NoNodeAvailableException: No node available 错误解决方法
ES使用org.elasticsearch.client.transport.NoNodeAvailableException: No node available 错误解决方法 参考文章: (1)E ...
最新文章
- engine中调整Element的上下显示顺序(遮盖)
- linux sudo漏洞 可导致用户以 root 权限运行命令
- invalid dts/pts combination
- boost::callable_traits的is_reference_member的测试程序
- 机器学习实际应用_机器学习的实际好处是什么?
- 碧蓝航线8.20服务器维护,碧蓝航线半人马来袭 8.20更新公告
- matlab6.1实用指南,MATLAB 6.1实用指南
- Order By后产生NULL的问题
- HDU 1230解题报告
- Android 自定义一个简版的取色器ColorPicker
- ETS88 获取TesterID
- word打开出错,要进入安全模式问题
- HTML计算平均成绩,access计算平均值取整
- NVP6124I北京冠宇铭通 芯片
- Linux系统 ELK(8.3.1)单机环境搭建
- 中国版LinkedIn到底长什么样
- 各种进制数按位权展开
- lo显示l服务器维护,斐讯电子秤显示LO是啥意思
- AutoCAD命令集
- 记录一次抢票成功的经历。
热门文章
- open3d使用知识拾遗
- 亚声速-超声速等熵喷管拟一维流动的CFD解法(附完整代码)
- 中国智能电饭煲行业运营模式及趋势预测分析报告2022-2028年版
- nexus5 博通芯片WIFI详解 (1)
- 低速常温离心机S400
- 爬虫工具在就业市场的受欢迎程度
- 计算机组成原理:循环冗余校验码CRC具备“一位纠错”功能的思考与探索
- spark(1)---概述
- 阿里云服务器ECS上部署简单的SSM项目
- Can‘t read file : End of file found 文件:txn_current、current svn无法正常读取文件