childNote and children

最新推荐文章于 2020-09-13 21:25:10 发布

lzynihao

最新推荐文章于 2020-09-13 21:25:10 发布

阅读量1.2k

点赞数

分类专栏： java script

java script 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1，childNodes 属性，标准的，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。

有些人错误的使用()去取该集合元素，下表列出各浏览器对childNodes(i)的支持情况：

	IE6/7/8/Safari/Chrome/Opera	IE9/Firefox
childNodes(i)	支持	不支持

有时候需要获取指定元素的第一个HTML子节点（非属性/文本节点），最容易想到的就是firstChild 属性。代码中第一个HTML节点前如果有换行，空格，那么firstChild返回的就不是你想要的了。可以使用nodeType来判断下。

 
        function  
        getFirst(elem){ 
       
        for 
        ( 
        var  
        i=0,e;e=elem.childNodes[i++];){ 
       
        if 
        (e.nodeType==1) 
       
        return  
        e; 
       
        }       
       
        }

2，children 属性，非标准的，它返回指定元素的子元素集合。经测试，它只返回HTML节点，甚至不返回文本节点。且在所有浏览器下表现惊人的一致。和childNodes 一样，在Firefox下不支持()取集合元素。因此如果想获取指定元素的第一个HTML节点，可以使用children[0]来替代上面的getFirst函数。需注意children在IE中包含注释节点。

Retrieves a collection of DHTML Objects that are direct descendants of the object.

Syntax

HTML	`<element children="p" ... >`
JavaScript	p = object.children

Property values

Type: Object

Array containing the direct descendants of an object.

Standards information

There are no standards that apply here.

Remarks

Similar to the objects contained in the all collection, the objects contained in the children collection are undefined if the child elements are overlapping tags.

The children collection can contain HTML elements.

Examples

This example shows how to retrieve a collection of DHTML Objects using script. The children collection for oParentDIVincludes input type=text, div and button. The children collection for oChildDIV includes p.

 
 
 
   
<!doctype html>
<html>
<head>

<script type="text/javascript">
  var oColl; //Collection for children.
  var oRow, oCell; //Use for row and cell.
  function fnCollection() {
    oColl = oParentDIV.children;
    //Call function to create cells for the top parent object.
    getChildren(oColl, oParentDIV);
    /*Call function to create cells for the child within the parent object
          containing its own child.*/
    oColl = oChildDIV.children;
    getChildren(oColl, oChildDIV);
  }
  /*****************************************************************************
  In:
    oColl - Collection of children.
    oCollection - Parent object.
  Out: 
    Output to screen.
  ******************************************************************************/
  function getChildren(oColl, oCollection) {
    for (x = 0; x < oColl.length; x++) {
      //Create new row.
      oRow = oTable.insertRow();

      //Create cell with the array index of current child.
      oCell = oRow.insertCell();
      oCell.align = 'center';
      oCell.style.color = '#0000FF';
      oCell.innerText = x;

      //Create cell with the tagName of current child.          
      oCell = oRow.insertCell();
      oCell.align = 'center';
      oCell.innerText = oCollection.children.item(x).tagName;
      //Create cell with ID / name of current child.            
      oCell = oRow.insertCell();
      oCell.align = 'center';
      if (oCollection.children.item(x).name != null) {
        oCell.innerText = oCollection.children.item(x).name;
      } else {
        oCell.innerText = oCollection.children.item(x).id;
      }

      //Create cell with applicable Parent object to the child.
      oCell = oRow.insertCell();
      oCell.align = 'center';
      oCell.innerText = oCollection.id;
    }
  }
</script>
</head>
<body>

<span class="oTitle">DIV Object (ID: oParentDIV)</span>
<div id="oParentDIV" class="oDIV">
	Some Input (non-editable): <input type="text" name="SomeInputTextBox"
        value="" size="5"  contenteditable="false">
  <div id="oChildDIV">
    <p id="oParagraph1">Some text in a paragraph</p>
  </div>
  <button name="SomeButton" οnclick="console.log('Some alert.');">The Label for
        the Button</button>
</div>
<hr>
<button id="b1" οnclick="fnCollection(); b1.disabled=true;"
    style="cursor:hand">Retrieve Collection</button>
  <br/>
  <br/>
<table border="1" id="oTable" alt="Child Listing">
<tr>
    <th>Array Index</th><th>Child Element</th><th>ID</th><th>Parent Object</th>
</tr>
</table>

</body>
</html>
 
     
 
    

Element.children

This article is in need of a technical review.

« Gecko DOM Reference

Summary

children returns a collection of child elements of the given element.

Syntax and values

var elList = elementNodeReference.children;

elList is an ordered collection of element objects that are children of the current element. If the element has no children, then elListcontains no elements.

The elList is a variable storing the node list of children. Such list is of type HTMLCollection. The children attribute is read-only.

Example

// parg is an object reference to a <p> element
if (parg.childElementCount)
// So, first we check if the object is not empty, if the object has child elements
 {
   var children = parg.children;
   for (var i = 0; i < children.length; i++) 
   {
   // do something with each child element as children[i]
   // NOTE: List is live, Adding or removing children will change the list
   };
 };

Notes

The items in the collection of elements are objects and not strings. To get data from those node objects, you must use their properties (e.g.elementNodeReference.children[1].nodeName to get the name, etc.).