我无法使用jQuery库，并且遇到TypeError：将“翻译”为纯JavaScript时document.getElementById（…）为null
[英]I can't use jQuery library, and I am getting TypeError: document.getElementById(…) is null when 'translating' to pure javascript
问题描述
I can't use jQuery library on my project so I need to get this little jQuery snippet to 'pure' javscript 
我无法在我的项目上使用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);
}
});
So it basically removes the last list item until list height is less than 150. My javascript skills are not that good so this is the code I came up with and it gives me TypeError: document.getElementById(...) is null on the first line, so I have no idea if the rest is worth anything: 因此，它基本上删除了最后一个列表项，直到列表高度小于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');
}
Could you please tell me what I wrong with the code? 您能告诉我代码有什么问题吗？
I am calling this script in <head></head> 我在<head></head>调用此脚本
3 个解决方案
解决方案1
2 2013-06-20 20:02:51
Your main problem seems to be the use of getElementById, this method call can't be used with the same parameters as JQuery and so becomes cubersome and more verbose within pur javascript, also offsetHeight is a property instead of a method: 您的主要问题似乎是使用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;
}
解决方案2
1 已采纳 2013-06-20 20:08:08
If you want to use css selectors like jquery does then you can use javascript's querySelector and querySelectorAll methods. 如果要像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');
}
This is the same as you code but with querySelector substituted when getElementByid does not work. 这与您的代码相同，但是在getElementByid不起作用时替换了querySelector 。
解决方案3
1 2013-06-20 20:13:22
First off, your script in <head> will execute immediately before the browser has a chance to parse your DOM; 首先， <head>脚本将在浏览器有机会解析DOM之前立即执行； so you should place the script at the bottom of the page, and to ensure that the script executes only when the DOM is ready: 因此，您应该将脚本放置在页面底部 ，并确保仅在DOM准备就绪时才执行脚本：
window.onload = function () {
...
};
The first line should work if you change offsetHeight() to offsetHeight (it's a property, not method). 如果将offsetHeight（）更改为offsetHeight（这是属性，而不是方法），则第一行应该可用。 For the rest, you need to dig through CSS selector and DOM api to figure out how jQuery do it... 对于其余部分，您需要深入研究CSS选择器和DOM API，以了解jQuery的工作方式...
I'm sorry that you can't use jQuery, the DOM API is a terrifying monster. 抱歉，您不能使用jQuery，DOM API是一个可怕的怪物。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.