Question

具有以下HTML结构：

class CircleTransform : Transformation {
    override fun transform(source: Bitmap): Bitmap {
        val size = Math.min(source.width, source.height)

        val x = (source.width - size) / 2
        val y = (source.height - size) / 2

        val squaredBitmap = Bitmap.createBitmap(source, x, y, size, size)
        if (squaredBitmap != source) {
            source.recycle()
        }

        val bitmap = Bitmap.createBitmap(size, size, source.config)

        val canvas = Canvas(bitmap)
        val paint = Paint()
        val shader = BitmapShader(squaredBitmap,
                Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)
        paint.shader = shader
        paint.isAntiAlias = true

        val r = size / 2f
        canvas.drawCircle(r, r, r, paint)

        squaredBitmap.recycle()
        return bitmap
    }

    override fun key(): String {
        return "circle"
    }
}

如何使用Javascript获取<div class="fruit"> <div class="tomato">get this one</div> </div> <div class="vegetable"> <div class="tomato">not this one</div> </div>元素内部的.tomato元素，而不是.fruit内部的元素？

示例：

.vegetable

Answer 1

另一种选择是将选择器与函数Document.querySelectorAll一起使用

Element方法querySelectorAll()返回一个静态（非实时）NodeList，代表与指定选择器组匹配的文档元素列表。

let tomatos = document.querySelectorAll('.fruit .tomato');

let tomatos = document.querySelectorAll('.fruit .tomato');
// The function map is only to demonstrate the selected elements.
console.log(Array.from(tomatos).map(d => d.textContent));

<div class="fruit">
  <div class='tomato'>tomatos#1</div>
  <div class='tomato'>tomatos#2</div>
</div>
<div class="vegetable">
  <div class='tomato'>tomatos#3</div>
  <div class='tomato'>tomatos#4</div>
</div>

Answer 2

改为使用querySelector（或querySelectorAll），您可以向其中传递查询字符串，该字符串允许非常简洁地进行这种DOM遍历：

const tomato = document.querySelector('.fruit .tomato');

将选择第一个.tomato元素，它是.fruit元素的最终后代。

如果要选择满足这些条件的 all 个元素，请改用querySelectorAll：

const tomatoes = document.querySelectorAll('.fruit .tomato');

请注意，getElementsByClassName返回的是 live HTMLCollection，而querySelectorAll返回的是（静态）NodeList，两者略有不同。（除了实时和静态的区别外，我认为要记住的最大区别是NodeList在现代浏览器中具有forEach方法-很方便-但是HTMLCollection s

在具有class =“ A”的元素内获得具有class =“ B”的DOM元素

2 个答案: