2012-04-06 5 views
4

Я пытался использовать document.getElementByID для извлечения информации из файла HTML из внешнего JS-файла и, похоже, не работает. Работает ли document.getElementByID, если он встроен в HTML-файл или может работать должным образом в внешнем JS-файле? Файл JS вызывается в документе HTML правильно, потому что другие функции работают.document.getElementByID внешний или встроенный?

+0

Он должен работать на обоих направлениях .. вы пытались найти объект с помощью JQuery вместо document.getElementById, чтобы проверить, есть ли какая-то разница? – pollirrata

+0

Убедитесь, что вы используете getElementById (обратите внимание на нижний регистр d в конце), а не getElementByID. – j08691

+0

опубликуйте свой html вместе с тем, как вы вызываете свой файл js. – DG3

ответ

11

ли document.getElementById работать только если это рядный с HTML-файл

No.

она может работать должным образом на внешнем файле JS?

Да.

Вы, вероятно, звоните document.getElementById() перед тем, как DOM готов.

+0

Я звонил ему, прежде чем DOM был готов. Благодаря! –

2

Если вы поместили скрипт в <head>, тогда тело еще не загрузилось, и поэтому элементов там нет.

Либо отложить сценарий с помощью функций jQuery, либо поместить скрипт в конец тела.

8

Прежде всего, убедитесь, что вы используете document.getElementById("xxx"), а не document.getElementByID("xxx") (обратите внимание на разницу в капитализации в конце). Ваш вопрос относится к document.getElementByID("xxx"), так что это может быть проблемой прямо здесь.

Во-вторых, вы должны убедиться, что эта функция выполнена ПОСЛЕ того, как браузер проанализировал соответствующие элементы DOM. Если вы помещаете document.getElementById во внешний JS-файл, который загружается в раздел <head> и выполняется сразу после его загрузки, то DOM еще не будет готов.

У вас есть несколько вариантов:

1) Поместите внешний JS файл <script> теги в конце тела, непосредственно перед </body> тега. Это будет не только загружать/отображать вашу страницу быстрее, но и гарантировать, что DOM анализируется, прежде чем что-либо в этом JS-файле может работать.

<body> 
Your HTML here 

<script type="text/javascript" src="myscript.js"></script> 
</body> 

2) Поскольку у вас есть JQuery, положить сразу исполняемый код внутри $(document).ready(fn) блока, так что Jquery будет сдерживать выполнение, пока DOM не будет готов. Если вы сделаете это так, вы можете поместить свой код в любом месте (в том числе в разделе <head>, если хотите).

$(document).ready(function() { 
    // put your page initialization code here 
}); 

3) Поместите свой код в любом месте вы хотите, но не имеют какой-либо из него выполнить немедленно. Вместо этого поместите весь код инициализации в функцию intialization (назовем его myPageInit(), что вы называете от:

$(document).ready(myPageInit); 

4) Поместите свой код в любом месте вы хотите, но не имеют какой-либо из него выполнить немедленно.Вместо этого поместите весь код инициализации в функции intialization (назовем его myPageInit(), что вы вызываете из сценария непосредственно перед на </body> тег с этим:

<script type="text/javascript">myPageInit()</script> 
+0

У меня есть два вопроса для вас, сэр: 1. Почему бы попросить опер использовать 'getElementById', если у него есть jquery? 2. почему бы не 'window.onload = function() {// Todo};'? – Dementic

+0

'getElementById()' на самом деле немного быстрее jQuery, если все, что вам нужно, - это один элемент DOM. Я не знаю, почему OP не использует jQuery. Что касается вашего второго вопроса, 'window.onload()' происходит ПОСЛЕ загрузки всех изображений. '$ (document) .ready()' возникает, когда DOM готов до того, как все изображения будут загружены, так что это произойдет раньше и лучше, если вам не нужно ждать завершения всех изображений. – jfriend00

+0

Селектор id jquery - это точно 'document.getElementById', и о том, почему не использовать jquery, ну, я и мой коллега строят сайты из шаблона, он использует jquery, и я этого не делаю. он код для сайтов составляет около 30kb (не включая зависимость jquery), а мой составляет 15kb. – Dementic

2

Мое предложение сделать это:

window.onload = function() { 
// document.getElementById() code here 
} 

Тогда ваш document.getElementById() не будет выполняться, пока не будет полностью загружен каждый элемент на странице.

Смежные вопросы