요소에 Javascript에 자식이 있는지 확인하는 방법은 무엇입니까?
간단한 질문,을 통해 잡는 요소가 .getElementById ()
있습니다. 자녀가 있는지 어떻게 확인합니까?
몇 가지 방법 :
if (element.firstChild) {
// It has at least one
}
또는 hasChildNodes()
기능 :
if (element.hasChildNodes()) {
// It has at least one
}
또는 length
속성 childNodes
:
if (element.childNodes.length > 0) { // Or just `if (element.childNodes.length)`
// It has at least one
}
모든 최신 브라우저 (및 IE8-사실, IE6까지)에서 자식 요소 (텍스트 노드, 속성 노드 등과 반대) 에 대해서만 알고 싶다면 다음 과 같이 할 수 있습니다. ( Florian 에게 감사드립니다 !)
if (element.children.length > 0) { // Or just `if (element.children.length)`
// It has at least one element as a child
}
즉,에 의존 children
에 정의되지 않은 특성, DOM1 , DOM2 , 또는 DOM3 하지만 거의 보편적 인지지를 받고있다. (그것은에서 크롬, 파이어 폭스, 오페라 IE6과까지 작동 이상 까지 다시이 원래 작성되었습니다 년 11 월 2012 년 한.) 이전의 모바일 기기를 지원하는 경우, 반드시 지원을 확인 할 수 있습니다.
IE8 및 이전 지원이 필요하지 않은 경우 다음을 수행 할 수도 있습니다.
if (element.firstElementChild) {
// It has at least one element as a child
}
그것은 firstElementChild
. 마찬가지로 children
, DOM1-3에서도 정의되지 않았지만 children
IE9까지는 IE에 추가되지 않았습니다.
DOM1에 정의 된 것을 고수하려면 (아마도 정말 모호한 브라우저를 지원해야 할 수도 있음) 더 많은 작업을 수행해야합니다.
var hasChildElements, child;
hasChildElements = false;
for (child = element.firstChild; child; child = child.nextSibling) {
if (child.nodeType == 1) { // 1 == Element
hasChildElements = true;
break;
}
}
이 모든 것이 DOM1의 일부 이며 거의 보편적으로 지원됩니다.
이것을 함수로 감싸는 것은 쉽습니다. 예 :
function hasChildElement(elm) {
var child, rv;
if (elm.children) {
// Supports `children`
rv = elm.children.length !== 0;
} else {
// The hard way...
rv = false;
for (child = element.firstChild; !rv && child; child = child.nextSibling) {
if (child.nodeType == 1) { // 1 == Element
rv = true;
}
}
}
return rv;
}
slashnick & bobince가 언급했듯이 hasChildNodes()
공백 (텍스트 노드)에 대해 true를 반환합니다. 그러나 나는이 행동을 원하지 않았고 이것은 나를 위해 일했습니다. :)
element.getElementsByTagName('*').length > 0
편집 : 동일한 기능에 대해 더 나은 솔루션입니다.
element.children.length > 0
children[]
childNodes[]
요소 만 포함 하는의 하위 집합입니다 .
요소에 자식 노드가 있는지 확인할 수 있습니다 element.hasChildNodes()
. Mozilla에서는 태그 뒤에 공백이 있으면 true를 반환하므로 태그 유형을 확인해야합니다.
https://developer.mozilla.org/En/DOM/Node.hasChildNodes
다음을 수행 할 수도 있습니다.
if (element.innerHTML.trim() !== '') {
// It has at least one
}
This uses the trim() method to treat empty elements which have only whitespaces (in which case hasChildNodes
returns true) as being empty.
JSBin Demo
Late but document fragment could be a node:
function hasChild(el){
var child = el && el.firstChild;
while (child) {
if (child.nodeType === 1 || child.nodeType === 11) {
return true;
}
child = child.nextSibling;
}
return false;
}
// or
function hasChild(el){
for (var i = 0; el && el.childNodes[i]; i++) {
if (el.childNodes[i].nodeType === 1 || el.childNodes[i].nodeType === 11) {
return true;
}
}
return false;
}
See:
https://github.com/k-gun/so/blob/master/so.dom.js#L42
https://github.com/k-gun/so/blob/master/so.dom.js#L741
Try the childElementCount property:
if ( element.childElementCount !== 0 ){
alert('i have children');
} else {
alert('no kids here');
}
A reusable isEmpty( <selector> )
function.
You can also run it toward a collection of elements (see example)
const isEmpty = sel =>
![... document.querySelectorAll(sel)].some(el => el.innerHTML.trim() !== "");
console.log(
isEmpty("#one"), // false
isEmpty("#two"), // true
isEmpty(".foo"), // false
isEmpty(".bar") // true
);
<div id="one">
foo
</div>
<div id="two">
</div>
<div class="foo"></div>
<div class="foo"><p>foo</p></div>
<div class="foo"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
returns true
(and exits loop) as soon one element has any kind of content beside spaces or newlines.
<script type="text/javascript">
function uwtPBSTree_NodeChecked(treeId, nodeId, bChecked)
{
//debugger;
var selectedNode = igtree_getNodeById(nodeId);
var ParentNodes = selectedNode.getChildNodes();
var length = ParentNodes.length;
if (bChecked)
{
/* if (length != 0) {
for (i = 0; i < length; i++) {
ParentNodes[i].setChecked(true);
}
}*/
}
else
{
if (length != 0)
{
for (i = 0; i < length; i++)
{
ParentNodes[i].setChecked(false);
}
}
}
}
</script>
<ignav:UltraWebTree ID="uwtPBSTree" runat="server"..........>
<ClientSideEvents NodeChecked="uwtPBSTree_NodeChecked"></ClientSideEvents>
</ignav:UltraWebTree>
참고URL : https://stackoverflow.com/questions/2161634/how-to-check-if-element-has-any-children-in-javascript
'developer tip' 카테고리의 다른 글
장기 실행 쿼리에 대해 Oracle 데이터베이스를 확인하는 방법 (0) | 2020.08.30 |
---|---|
C에서 Linux에서 PID로 프로세스의 CPU 사용량을 계산하는 방법은 무엇입니까? (0) | 2020.08.30 |
Rails 환경에서 Ruby 파일을 어떻게 실행하나요? (0) | 2020.08.30 |
TypeScript 유형 배열 사용 (0) | 2020.08.30 |
Symfony2 요청 객체의 POST 값에 액세스 (0) | 2020.08.29 |