childNote and children
来源:互联网 发布:人大 网络教育二学位 编辑:程序博客网 时间:2024/06/03 07:34
1,childNodes 属性,标准的,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本。可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才是元素节点,2是属性节点,3是文本节点。
有些人错误的使用()去取该集合元素,下表列出各浏览器对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
<element children="p" ... >
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 oParentDIV
includes 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" onclick="console.log('Some alert.');">The Label for the Button</button></div><hr><button id="b1" onclick="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
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> elementif (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.).
See also
childElementCount
firstElementChild
lastElementChild
nextElementSibling
previousElementSibling
Browser compatibility
- Desktop
- Mobile
- childNote and children
- A. Jzzhu and Children
- Jzzhu and Children
- A. Jzzhu and Children
- Jzzhu and Children
- codeforces-DIV2-A-Jzzhu and Children
- (CF#257)A. Jzzhu and Children
- Jzzhu and Children - CF 450A 水题
- Codeforces 450A Jzzhu and Children
- CodeForces 450-A. Jzzhu and Children
- Codeforces 450A Jzzhu and Children(水题)
- A. Jzzhu and Children (周赛4)
- 【CF 450A】 Jzzhu and Children
- ARC 059E Children and Candies DP
- codeforces 450A Jzzhu and Children
- Creating and managing container children at run time
- Fun With Elasticsearch's Children and Nested Documents
- POJ 3083 Children of theCandy Corn(DFS and BFS)
- JAVA wait(), notify(),sleep详解
- 搜索引擎相关资源
- Entiy Framework研究 - 项目架构搭建
- 域名与域名解析-DNS原理
- Hibernate知识宝库
- childNote and children
- ibatIS中返回结果map 并使用list获取
- 浅谈HTTPS传输协议原理
- Spring知识宝库
- java.lang.InstantiationException:(实例化异常)
- 线程的最佳实践二:不使用stop方法停止线程
- typeid操作符
- SetTimer 函数在控制台应用程序中的应用 (在控制台应用程序中使用定时器)
- HDOJ 4529 - N骑士问题 状态压缩DP