js中获取子节点集合中第一个节点为什么是text

你好，

在DOM中实际上有一个叫做textNode的元素，相应的还有documentcreateTextNode的JS方法，而在IE和Chrome浏览器中会将源代码中的换行符渲染成一个textNode，只是视觉上不可见。

然而，通过childNodes来获取子元素的时候，结果会包含这些textNode，所以会得到题主所见的情况。

而解决方法很简单，主要有两种：

第一，使用children代替childNodes

第二，遍历childNodes，根据nodeType过滤掉textNode

希望能解决你的问题。

1节点至少拥有以下三个信息：

node Type:节点类型，元素节点类型为1，属性为2，文本为3，注释为8

node Name:节点名称

node value:节点值

2父节点：parentNode

语法：elementParentNode

得到的是离元素最近的父节点，如果找不到就返回null

3子节点：ParentNodechildNodes

获得所有子节点

4创建节点：documentcreateElement()

documentcreateElement("元素名") 创建元素节点 

let div1 = documentcreateElement('div');

consolelog(div1);

documentcreateTextNode("文本")   创建文本节点 

let divText = documentcreateTextNode('我是div');consolelog(divText);

AappendChild( B) 把B节点追加至A节点的末尾 

div1appendChild(divText)

 consolelog(div1);

 let body = documentquerySelector('body');

 bodyappendChild(div1)

父节点insertBefore( A,B ) 把A节点插入到B节点之前 /

let gege = documentcreateElement('button');

let btnText = documentcreateTextNode('btn的哥哥');

gegeappendChild(btnText)

let didi = documentgetElementById('btn1');

bodyinsertBefore(gege,didi)

 创建一个h1 我是h1 插入到 btn的前面 /

}

var a_arr = documentgetElementById("demo")getElementsByTagName("a");这就是找到所有demo下的a，返回的是数组

用children属性

var div = documentgetElementById('div');

var children = divchildren;

给你写个简单的 demo

<div class="boxbox clearfix">

    <span class="selected" id="boxboxa">a</span>

    <span id="boxboxb">b</span>

</div>

<div class="boxbox-con">

    <div class="onediv" id="onediv">一个div</div>

    <div class="otherdiv" id="otherdiv">另一个div</div>

</div><style type="text/css">

    clearfix:before,clearfix:after {display: table; content: ''; height: 0; width: 0; clear: both;}

    boxbox span {width: 200px; float: left; display: inline-block; height: 35px; line-height: 35px; text-align: center; font-size: 24px}

    boxbox spanselected {background-color: #f1f1f1;}

    boxbox-con {height: 300px;}

    boxbox-con onediv {background-color: red; height: 100%;}

    boxbox-con otherdiv {background-color: cyan; display: none; height: 100%}

</style><script type="text/javascript" src="jqueryjs"></script>

<script type="text/javascript">

    $('#boxboxa')on('click',function(){

        $(this)addClass('selected')siblings()removeClass('selected');

        $('#onediv')show();

        $('#otherdiv')hide();

    });

    $('#boxboxb')on('click',function(){

        $(this)addClass('selected')siblings()removeClass('selected');

        $('#onediv')hide();

        $('#otherdiv')show();

    });

</script>

这个要用到JS中的innerHTML来实现，具体代码如下：

<style>

ul{width:300px; height:auto; margin:0 auto; border:1px dotted #F00; text-decoration:none;}//给UL定义一个样式

li{width:300px; height:30px; line-height:30px; list-style: none; }//控制LI显示样式

</style>

<ul id="aaa">//这里给出UL一个ID，以便JS脚本获取相应元素

<li>中国</li>

<li>美工</li>

<li>意大利</li>

<li>德国</li>

</ul>

<script>

windowonload = function(){

var obj_lis = documentgetElementById("aaa")getElementsByTagName("li");

for(i=0;i<obj_lislength;i++){

obj_lis[i]onclick = function(){

alert(thisinnerHTML);

}

}

}

</script>。

在DhtmlXtree中可以用treegetLeafCount(itemId)获取节点下的子节点数，如果你想计算的是根节点下所有的子节点的话，可以先用上面的计算出根节点下的子节点数然后在有循环判断这些子节点中那个有孩子节点然后在根据treegetLeafCount(itemId)计算此节点下的字节点数，依次循环直至最后。

以上就是关于js中获取子节点集合中第一个节点为什么是text全部的内容，包括:js中获取子节点集合中第一个节点为什么是text、js之节点、JS 如何通过标签名获取子节点（不用jq）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！