将简单的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!!!";
}

或在一行代码中：

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