我能'；t使用jQuery库，我得到的TypeError:document.getElementById（…）在'；翻译'；到纯javascript

我不能在我的项目中使用jQuery库，所以我需要将这个jQuery小片段转换成“纯”脚本

$(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（…）在第一行是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');
}

你能告诉我密码有什么问题吗

---

我在

中调用此脚本。您的主要问题似乎是getElementById的使用，此方法调用不能与JQuery使用相同的参数，因此在pur javascript中变得更加冗长，而且OffsetEight是一个属性而不是一个方法：

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;
}

---

您的主要问题似乎是getElementById的使用，此方法调用不能与JQuery使用相同的参数，因此在pur 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;
}

---

如果您想像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被替换。
如果您想像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
。
首先，您在
中的脚本将在浏览器有机会解析您的DOM之前立即执行；因此，您应该将脚本放置在页面的底部，并确保脚本仅在DOM就绪时执行：

window.onload = function () { 
    ...
};
window.onload=函数（）{
...
};
如果将OffsetEight（）更改为OffsetEight（它是一个属性，而不是方法），则第一行应该可以工作。对于其余部分，您需要深入研究CSS选择器和DOM api，以了解jQuery是如何做到这一点的

很抱歉，您不能使用jQuery，DOM API是一个可怕的怪物。
首先，您在
中的脚本将在浏览器有机会解析您的DOM之前立即执行；因此，您应该将脚本放置在页面的底部，并确保脚本仅在DOM就绪时执行：

window.onload = function () { 
    ...
};
window.onload=函数（）{
...
};
如果将OffsetEight（）更改为OffsetEight（它是一个属性，而不是方法），则第一行应该可以工作。对于其余部分，您需要深入研究CSS选择器和DOM api，以了解jQuery是如何做到这一点的

很抱歉，您不能使用jQuery，DOM API是一个可怕的怪物。
我为您不能使用jQuery感到抱歉，并希望您在允许的地方得到更好的工作。您将“纯”版本的javascript代码放在哪里了？jQuery代码在“document.ready”函数中运行，钩住了window.load。您的代码是否在DOM呈现之前运行？使用
document.getElementById（'home-news-list li:last child'）无法找到DOM元素在javascript中。jquery通过它的选择器让人很容易找到。首先，正如VJD所说，将javascript放在html的底部，然后如果你想使用css查询选择器来获取html元素，你可以使用document.querySelector（“home news list li:last child”）；如果你想像jquery那样使用css选择器，那么你可以使用javascript的
querySelector
和
querySelectorAll
方法。我为你不被允许使用jquery感到抱歉，并希望你能在允许的地方找到更好的工作。你把“纯”版本的javascript代码放在哪里了？jQuery代码在“document.ready”函数中运行，钩住了window.load。您的代码是否在DOM呈现之前运行？使用
document.getElementById（'home-news-list li:last child'）无法找到DOM元素在javascript中。jquery通过它的选择器让人很容易找到。首先，正如VJD所说，将javascript放在html的底部，然后如果你想使用css查询选择器来获取html元素，你可以使用document.querySelector（“home news list li:last child”）；如果您想像jquery一样使用css选择器，那么可以使用javascript的
querySelector
和
querySelectorAll
方法。