将简单的 jQuery 转换为纯 JavaScript

Question

我在尝试将这段代码从 jQuery 转换为纯 JavaScript 时遇到问题。

脚本是

if($('#item-1').find('#player').length == 1)
{
    innerHTML = "You Won!!!";
} else {
    innerHTML = "You Lose!!!";
}

我必须使用 getElementById 吗？

if(document.getElementById("#item-1 #player").length == 1)

Answer 1

getElementById接受不带#的单个元素的 ID。 你需要querySelector 。

document.querySelector('#item-1 #player').length

此外，由于 ID 是唯一的，因此不需要后代选择器。 可以直接使用元素的ID。

document.getElementById('player')

代码：

innerHtml = document.getElementById('player') ? 'You won!!!' : 'You lose!!!';

更复杂：

innerHtml = 'You ' + (document.getElementById('player') ? 'won' : 'lose') + '!!!';

Answer 2

使用 querySelector ：

//evaluates to true if length > 0
if(document.querySelectorAll('#item-1 #player').length)
{
    innerHTML = "You Won!!!";
} else {
    innerHTML = "You Lose!!!";
}

或在 1 行代码中：

var innerHtml = document.querySelectorAll('#item-1 #player').length ? 'You Won!!!' : 'You Lose!!!';