我无法使用jQuery库，并且遇到TypeError：将“翻译”为纯JavaScript时document.getElementById（…）为null

Question

我无法在我的项目上使用jQuery库，因此我需要获取此jQuery小片段以“纯净” javscript

$(document).ready(function(){
$listHeight = $('ul#home-news-list').height();
$child = $('ul#home-news-list li:last-child');
while ($listHeight > 150) {
    $($child).remove();
    $listHeight = $('#home-news-inner ul').height();
    $child = $('ul#home-news-list li:last-child');
    console.log($listHeight);
    }
});

因此，它基本上删除了最后一个列表项，直到列表高度小于150。我的JavaScript技能不是那么好，所以这是我想出的代码，它给我TypeError: document.getElementById(...) is null在第一行，所以我不知道其余的是否值得：

var listHeight = document.getElementById('home-news-list').offsetHeight();
var child = document.getElementById('home-news-list li:last-child');
while (listHeight > 150) {
    child.parentNode.removeChild(child);
    var listHeight = document.getElementById('home-news-list').offsetHeight();
    child = document.getElementById('home-news-list li:last-child');
}

您能告诉我代码有什么问题吗？

我在<head></head>调用此脚本

Answer 1

您的主要问题似乎是使用getElementById，此方法调用不能与JQuery使用相同的参数，因此在javascript中变得冗长而冗长，而且offsetHeight是属性而不是方法：

var listHeight = document.getElementById('home-news-list').offsetHeight;
var parent = document.getElementById('home-news-list');
var child = parent.lastChild;
while (listHeight > 150) {
    child.parentNode.removeChild(child);
    listHeight = document.getElementById('home-news-list').offsetHeight;
    child = parent.lastChild;
}

Answer 2

如果要像jquery一样使用css选择器，则可以使用javascript的querySelector和querySelectorAll方法。

var listHeight = document.getElementById('home-news-list').offsetHeight();
var child = document.querySelector('home-news-list li:last-child');
while (listHeight > 150) {
    child.parentNode.removeChild(child);
    var listHeight = document.getElementById('home-news-list').offsetHeight();
    child = document.querySelector('home-news-list li:last-child');
}

这与您的代码相同，但是在getElementByid不起作用时替换了querySelector 。

Answer 3

首先， <head>脚本将在浏览器有机会解析DOM之前立即执行； 因此，您应该将脚本放置在页面底部，并确保仅在DOM准备就绪时才执行脚本：

window.onload = function () { 
    ...
};

如果将offsetHeight（）更改为offsetHeight（这是属性，而不是方法），则第一行应该可用。 对于其余部分，您需要深入研究CSS选择器和DOM API，以了解jQuery的工作方式...

抱歉，您不能使用jQuery，DOM API是一个可怕的怪物。

我无法使用jQuery库，并且遇到TypeError：将“翻译”为纯JavaScript时document.getElementById（…）为null

问题描述

3 个解决方案

解决方案1
2 2013-06-20 20:02:51

解决方案2
1 已采纳 2013-06-20 20:08:08

解决方案3
1 2013-06-20 20:13:22

我无法使用jQuery库，并且遇到TypeError：将“翻译”为纯JavaScript时document.getElementById（…）为null

问题描述

3 个解决方案

解决方案1 2 2013-06-20 20:02:51

解决方案2 1 已采纳 2013-06-20 20:08:08

解决方案3 1 2013-06-20 20:13:22

解决方案1
2 2013-06-20 20:02:51

解决方案2
1 已采纳 2013-06-20 20:08:08

解决方案3
1 2013-06-20 20:13:22