精华内容
下载资源
问答
  • 主要介绍了JavaScript操作DOM元素的childNodes和children区别,本文直接给出测试代码运行效果来讲解它们之间的区别,需要的朋友可以参考下
  • 关于childNodes和children区别一、parentNodeparentElement区别?二、childNodes和children区别1.区别 HTML共同 <ul id="uu"> <li>1</li> <li>2</li> <li id="li">3<...


    HTML共同
      <ul id="uu">
            <li>1</li>
            <li>2</li>
            <li id="li">3</li>
            <li>4</li>
            <li>5</li>
        </ul>
         var ul = document.getElementById('uu');
    

    一、parentNode和parentElement区别?

    1.parentNode 获取的是父节点 parentElenment 获取的事父元素 并且都可以配合nodeName获取节点名字
    console.log(uu.parentNode);
    console.log(uu.parentElement); 
    
    console.log(uu.parentNode.nodeName); 
    console.log(uu.parentElement.nodeName);
    
    2.唯一的区别是 在获取根部document节点是,parentElement找的是元素,因此报错null,而parentNode获取的是节点,返回的是#document

    二、childNodes和children区别

    1.区别

    代码如下(示例):
    childNodes:获取子节点——返回所有节点的数组,只返回文本和元素节点,对于属性节点直接无视
    children:子元素——只返回元素节点

    		var child = ul.children;
            console.log(child);
    

    图片:

    在这里插入图片描述



    		 var child = ul.childNodes;
            console.log(child);
    

    图片:

    在这里插入图片描述

    展开全文
  • 做题的时候碰见了关于 childNodes children之间的区别的问题,查了一点点资料,对他们二者之间也有了一些了解,写博客加深一下自己的印象. 二者的定义: childNodes: 返回包含指定节点的子节点的集合,该集合为即时...

    做题的时候碰见了关于 childNodeschildren之间的区别的问题,查了一点点资料,对他们二者之间也有了一些了解,写博客加深一下自己的印象.

    二者的定义:

    1. childNodes: 返回包含指定节点的子节点的集合,该集合为即时更新的集合
    2. children : 是一个只读属性,返回 一个Node的子elements ,是一个动态更新的 HTMLCollection,属于非标准型,不过它还是依旧可以被所有的浏览器所支持

    用下面的一段代码来展示二者之间具体的区别:
    childNodes的结果:

        <ul id ='list'>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    
        <script>
            let oul = document.getElementById('list');
            let olis = oul.childNodes;
            console.log(olis.length);
            console.log(olis);
        </script>
    

    打印结果如下图:
    在这里插入图片描述
    在我们的认识中,这里难道不应该打印3吗?他为啥打印了7呢,因为Internet Explorer 会忽略节点之间生成的空白文本节点(比如换行字符),而 Mozilla 不这么做。

    我们具体来看看到到时为啥会打印7呢?
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    childNodes 获取的是元素所有的子节点.

    childrem 打印情况:

            let oul = document.getElementById('list');
            let olis = oul.children;
            console.log(olis.length);
            console.log(olis);
    

    打印的结果如下:
    在这里插入图片描述
    children 用来获取所有的子元素,所以打印的结果是 3. children不需要去计算空格所占的节点

    获取标签里面的内容值需要通过下标获取对应的元素,然后获取元素中的内容即可:

            console.log(oul.childNodes[3].innerHTML);
            console.log(oul.children[1].innerHTML);
    

    得到的结果实现相同的,如下图:
    在这里插入图片描述

        for(let i = 0 ; i < olis.length ; i++) {
            if (oul.childNodes[i].nodeType == 1) {
                // nodes.childNodes[i] 是元素节点
                console.log(`${i}是元素节点`);
            }else if(oul.childNodes[i].nodeType == 2) {
                console.log(`${i}是属性节点`);
            }else {
                console.log(`${i}是文本节点`);
            }
        }
    

    不建议使用childNodes方法。
    硬要使用这个方法,可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才是元素节点,2是属性节点,3是文本节点。因此我们做如下判断:

    
            for(let i = 0 ; i < olis.length ; i++) {
                if (oul.childNodes[i].nodeType == 1) {
                    // nodes.childNodes[i] 是元素节点
                    console.log(`${i}是元素节点`);
                }else if(oul.childNodes[i].nodeType == 2) {
                    console.log(`${i}是属性节点`);
                }else {
                    console.log(`${i}是文本节点`);
                }
            }
    

    childNodes 方法相比,更推荐使用 children方法.

    展开全文
  • childNodes和children区别

    千次阅读 2017-06-17 15:50:27
    <title>children childnodes区别 window.onload = function(){ document.getElementById("btn1").onclick=function(){ var tab = document.getElementsByName("tab")[0]; ...
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>children 和  childnodes的区别</title>
    		<script type="text/javascript">
    			window.onload = function(){
    				
    				
    				document.getElementById("btn1").οnclick=function(){
    					var tab = document.getElementsByName("tab")[0];
    					alert(tab.nodeName);
    					var tbody = tab.childNodes[3];
    					alert(tbody.nodeName);
    					var tr = tbody.childNodes[1];
    					alert(tr.nodeName);
    					var td1 = tr.childNodes[1];
    					alert(td1.nodeName);
    					document.getElementById("in1").value=td1.innerHTML;
    				}
    				
    				document.getElementById("btn2").onclick = function(){
    					var tab = document.getElementsByName("tab")[0];
    					alert(tab.nodeName);
    					var tbody = tab.children[1];
    					alert(tbody.nodeName);
    					var tr = tbody.children[0];
    					alert(tr.nodeName);
    					var td = tr.children[0];
    					alert(td.nodeName);
    					document.getElementById("in2").value=td.innerHTML;
    				}
    				
    				//结论:
    				//childNodes和children计算子节点的区别在于:
    				//childNodes计算空白子节点
    				//而children计算的时候不包括子节点,只包含标签节点
    			}
    			
    		
    				
    			
    			
    		</script>
    	</head>
    	<body>
    		
    		children 和  childnodes的区别
    		<table border="1"  name = "tab">
    			<thead>
    				<tr>
    					<td>thead1</td>
    					<td>thead2</td>
    					<td>thead3</td>
    				</tr>
    			</thead>
    			<tbody>
    				<tr>
    					<td> tbody1</td>
    					<td> tbody2</td>
    					<td> tbody3</td>
    				</tr>
    				<tr>
    					<td>tbody4</td>
    					<td>tbody5</td>
    					<td>tbody6</td>
    				</tr>
    			</tbody>
    			<tfoot>
    				<tr>
    					<td>tfoot7</td>
    					<td>tfoot8</td>
    					<td>tfoot9</td>
    				</tr>				
    			</tfoot>
    		</table>
    		<input id="btn1" type="button" value="使用childnodes获取第二行第一个格子"/>
    		<input id="in1" type="text"/>
    		
    		<input id="btn2" type="button" value="使用children获取第二行第一个格子"/>
    		<input id="in2" type="text"/>
    		
    		
    	</body>
    </html>
    

    展开全文
  • 【前言】最近讲课讲到DOM操作遍历,之前讲课只讲了普通获取节点方法,今天又讲了个升级版。这里备注下,以后再讲课强调下【主体】(1)原生JS遍历时操作如下childNodes获取所有子节点(包括包括文本节点、注释节点即...

    【前言】

    最近讲课讲到DOM操作和遍历,之前讲课只讲了普通获取节点方法,今天又讲了个升级版。这里备注下,以后再讲课强调下

    【主体】

    (1)原生JS遍历时操作如下

    childNodes

    获取所有子节点(包括包括文本节点、注释节点即回车、换行、空格、文本等等)

    firstChild

    获取第一个子节点(可以为注释节点)

    lastChild

    获取最后一个子节点(与firstChild类似)

    parentNode

    返回给定节点的父级节点

    nextSibling

    返回给定节点的下一个节点

    previousSibling

    返回给定节点的上一个节点

    注意:上面写法是IE8之前旧版本写法,也可以在IE8以上及IE9+正常运行。但随着更新,出现新方法选取子节点,同时可以进行过滤,只获取元素节点。

    (2)新方法--兼容IE9+

    children

    返回元素子节点(元素节点)

    firstElementChild

    返回第一个子节点(元素节点)

    lastElementChild

    返回最后一个子节点(元素节点)

    parentElement

    父节点(元素节点)

    nextElementSibling

    返回元素的上一个兄弟元素节点(不包括文本节点、注释节点)

    previousElementSibling

    返回元素的下一个兄弟元素节点(不包括文本节点、注释节点)

    注意: 空格、回车也会看作文本,以文本节点对待

    (3)previousSibling 模拟 previousElementSibling:

    • 第一个
    • 第二个
    • 第三个

    我是第二个子节点

    function myPre(ele){

    if(ele.previousElementSibling !== undefined){

    return ele.previousElementSibling;

    }else{

    var item = ele.previousSibling;

    while(item && item.nodeType !=1){

    item = item.previousSibling;

    }

    return item;

    }

    }

    var oNe = document.getElementById("one");

    console.log(myPre(oNe));

    (4)firstChild,lastChild兼容方案1

    • 1
    • 2
    • 3
    • 4

    var ul = document.getElementsByTagName('ul')[0];

    ul.firstChild.style.background = '#ff0000';

    // IE8/7/5兼容, IE9+及其它browser不兼容,获取的是空白文本节点

    ul.firstElementChild.style.background = '#ff0000';

    // IE8/7/5不兼容,IE9+及其它browser兼容

    兼容方案:

    function firstChild(obj) {

    return obj.firstElementChild ? obj.firstElementChild : obj.firstChild;

    }

    function lastChild(obj) {

    return obj.lastElementChild ? obj.lastElementChild : obj.lastChild;

    }

    var ul = document.getElementsByTagName('ul')[0];

    firstChild(ul).style.background = '#ff0000';

    lastChild(ul).style.background = '#00ff00';

    (5)firstChild,lastChild兼容方案2

    firstChild与lastChild 兼容Ie6,7,8    返回指定节点的首个子节点与返回指定节点的最后一个子节点

    firstElementChild与lastElementChild 不兼容低版本的浏览器

    var first=e.firstElementChild||e.firstChild;

    var last=e.lastElementChild||e.lastChild;

    var pre=e.previousElementSibling || e.previousSibling;

    var next=e.nextElementSibling || e.nextSibling;

    .

    展开全文
  • JavaScript之childNodes children 区别

    千次阅读 2018-07-24 00:34:25
    1、先让我们来看看childNodes的用法,以及是如何计算节点数量:   为什么输出是7而不是3呢?原来Internet Explorer 会忽略节点之间生成的空白文本节点(比如换行字符),而 Mozilla 不这么做。  ...
  • parentNodeparentElement功能一样,childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的,可以说比较通用。而另外两个只是IE支持,不是标准,Firefox就不支持 ————————————...
  • JS children和childNodes区别

    千次阅读 2017-07-25 23:19:01
    children:返回父元素所有的直系子节点的集合,注意,children只返回HTML元素节点,不包括文本节点属性节点。 childNodes childNodes:返回父元素所有的直系子节点的集合,注意,与children不同的是,childNodes...
  • childNodeschildren区别

    2017-04-21 19:24:15
    获取节点信息是js中必不可少的操作,那么childNodes和children有什么区别呢? instanceof用来判断获取的节点的类型 测试对象在其原型链中是否存在一个构造函数的prototype属性 instanceof 运算符用来检测 ...
  • children ...有的时候不一定有children属性 为了兼容可以把childNodes中的非文本元素过滤出来 function getChildeElement(element){ if(element.children){ return element.children }el...
  • childNodes和Children区别 1、childNodes: 标准的,返回指定元素的子元素集合,包括HTML属性,所有属性,文本。可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才是元素节点,2是属性...
  • 在定义上来说childNodes是属于一种标准型属性,它会计算上包括空格的所有节点,所以在选择childNodes[i]时,我认为是一件比较麻烦的事情。而children是属于非标准型,不过它还是依旧可以被所有的浏览器所支持,在...
  • childrenchildNodes都是获取目标元素的子节点,不同的是: 1、children是非标准属性,childNodes是标准属性。 2、children获取的都是元素节点,而childNodes获取的是所有节点(包括元素节点、属性节点、文本节点...
  • 本篇文章是对javascript中parentNode,childNodes,children的应用进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,637
精华内容 6,254
关键字:

childnodes和children的区别

友情链接: NumericalAlgorithm.rar