如果<b>
内置<button>
个标记,那么<b>
是<button>
代码的子节点吗?请考虑以下代码:
<button id='mooo'><b>Cows can't mooo</b></button>
使用Javascript:
x = document.getElementById('mooo');
x.addEventListener("Click", mooo);
function mooo(e){
if(e.target.childNode == "B"){
console.log("B is a child of Button");
}else{
console.log("B is not a child of Button");
}
代码返回后者,但我只需要确定B是否确实不是BUTTON的孩子
答案 0 :(得分:8)
是的,button
元素是包含内容的元素。你只是没有正确检查他们的内容;元素上没有childNode
属性。有childNodes
(一个集合),firstChild
,lastChild
及其元素版本children
,firstElementChild
和lastElementChild
,但没有{ {1}}。
您还使用了childNode
而非Click
(事件名称区分大小写),click
可能是e.target
元素而不是b
1}}(您希望button
或this
知道您引用了e.currentTarget
)。
实例:
button
var x = document.getElementById('mooo');
x.addEventListener("click", mooo);
function mooo() {
if (this.firstElementChild.tagName == "B") {
console.log("B is a child of Button");
} else {
console.log("B is not a child of Button");
}
console.log("Contents of the button:");
for (let child = this.firstChild; child; child = child.nextSibling) {
switch (child.nodeType) {
case 1: // Element
console.log(child.tagName + " element, innerHTML = " + child.innerHTML);
break;
case 3: // Text node
console.log("Text node, nodeValue = " + child.nodeValue);
break;
default:
console.log(child.nodeName);
break;
}
}
}
相比之下,<button id='mooo'><b>Cows can't mooo</b></button>
元素为void elements;他们没有内容,他们的input type="button"
集合总是空的。