按钮元素可以有childNodes吗?

时间:2018-05-26 12:55:41

标签: javascript html dom nodes

如果<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的孩子

1 个答案:

答案 0 :(得分:8)

是的,button元素是包含内容的元素。你只是没有正确检查他们的内容;元素上没有childNode属性。有childNodes(一个集合),firstChildlastChild及其元素版本childrenfirstElementChildlastElementChild,但没有{ {1}}。

您还使用了childNode而非Click(事件名称区分大小写),click可能是e.target元素而不是b 1}}(您希望buttonthis知道您引用了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"集合总是空的。