Discuss / JavaScript / getElementByClassName
Back

getElementByClassName

Topic source

王闪_Frank

#1 Created at ... [Delete] [Delete and Lock User]

之前写第二个问题的时候失败了，所以做了一些测试和分析，现在分享出来，本人是初学者，有错误的话希望大家指正

getElementById因为能定位到唯一DOM节点，所以题目中第一题，写完document.getElementById("test-p");就得到<p id="test-p">JavaScript</p>

但是因为一个DOM结构可以有多个同名的class，所以getElementByClassName结果不唯一，我先写了

document.getElementsByClassName("c-red c-green");

返回值是

[div.c-red.c-green]

在浏览器的console中（我用的是chrome），这个返回值可以展开，有很多属性，其中一个就是 length = 1；length =1,那说明这个返回值对应的不是

    <p>Python</p>
    <p>Ruby</p>
    <p>Swift</p>

否则的话length应为是3；我尝试着把下面的原来class name是"c-green"改成了一样的 "c-red c-green",又测试了一下，这下返回值是

[div.c-red.c-green，div.c-red.c-green]

属性length的值是2； 这样子就明白了，直接在 document.getElementByClassName()后面接children是不行的，因为还没有定位到唯一的DOM节点，需要在数列中先找到对应的DOM节点；本题中，因为只有一个ClassName("c-red c-green"),所以这个DOM节点是

document.getElementsByClassName("c-red c-green")[0];
  • 1

Reply