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是完 ...

随机推荐

linux查找所有文件中某个字符串
查找目录下的所有文件中是否含有某个字符串 find .|xargs grep -ri "IBM" 查找目录下的所有文件中是否含有某个字符串,并且只打印出文件名 find .|xar ...
Java反序列化漏洞整理
Fastjson 反序列化 CVE-- Fastjson 利用版本范围为 Fastjson 及之前的版本 Struts2 S2-, S2-, S2-, S2-, S2-, S2-, S2-, S2-, ...
使用SSI框架写的简单Demo（查询模块）
在网上看到好多个版本,自己有时间索性就写个Demo记录下整个框架的逻辑流程: 1.首先拷贝整个框架所需要的jar包到WEB-INF/lib包下(这个网上都可以搜到的) 2.配置文件的配置, 2.1.在 ...
<每日一题> Day6：HDU递推专题完结
原题链接这是我自己Clone的专题,A,B题解昨天发过了 C:参考代码: /* 很容易我们可以手推出n = 1, 2, 3时的情况,我们假设前n - 1 列已经放好,方法有dp[n - 1]种,第n ...
三连击 P1008 洛谷 python写法
三连击 P1008 洛谷题意将$1,2, \cdots,9$共9个数分成3组,分别组成3个三位数,且使这3个三位数构成1:2:3的比例,试求出所有满足条件的3个三位数. 解题思路这里我使用了 ...
Python 的 sys 模块常用方法？
总结就是,os模块负责程序与操作系统的交互,提供了访问操作系统底层的接口; sys模块负责程序与python解释器的交互,提供了一系列的函数和变量,用于操控python的运行时环境. sys.argv ...
P5443 [APIO2019]桥梁
传送门子任务 $4$ 告诉我们可以离线搞带权并查集从大到小枚举询问,从大到小连边如果没有修改操作就可以过了但是有修改,考虑最暴力的暴力,搞可撤销并查集同样先离线,从大到小处理询问时,按原边权 ...
python学习笔记(6)关键字与循环控制
一.变量和类型 1.基本变量类型 (1)整数 (2)浮点数 (3)字符串 (4)布尔值 (5)空值 (6)函数 (7)模块 (8)类型 (9)自定义类型 print(type()) print(typ ...
Python之路-函数基础&局部变量与全局变量&匿名函数&递归函数&高阶函数
一.函数的定义与调用函数:组织好的.可重复使用的.用户实现单一或者关联功能的代码段.函数能够提高应用的模块性和代码的重复利用率.Python提供了很多内置的函数,比如len等等,另外也可以根据自己的 ...
HBase的访问方式
这里只介绍三种最常用的方式 1.HBase shell HBase的命令行工具是最简单的接口,主要用于HBase管理首先启动HBase 帮助 hbase(main):001:0> help 查 ...

Node对象的一些方法