Где следует размещать скрипты при обращении к DOM? - PullRequest
1 голос
/ 17 июля 2011

Если у вас есть что-то вроде приведенного ниже кода, невозможно получить доступ к любому типу узла ниже тега head. Я предполагаю, что причина в том, что код JavaScript был выполнен до того, как остальная часть документа была создана. Но есть ли способ получить доступ к этим узлам из тега head. Я хочу получить к ним доступ из тега head, потому что мне нравится, чтобы мой код JavaScript находился в одном месте, если это возможно. Я знаю, что jquery использует $ (document) .ready (). Есть ли что-то похожее на это?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var div  = document.getElementById('myDiv')
alert(div)
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div id='myDiv'></div>
</body>
</html>

Ответы [ 4 ]

3 голосов
/ 17 июля 2011

Простейшим аналогом jQuery $ (document) .ready () является window.onload:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
window.onload = function(){
    var div  = document.getElementById('myDiv')
    alert(div)
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div id='myDiv'></div>
</body>
</html>

Это не так хорошо, потому что будет ждать, пока все изображения будут загружены, прежде чем сработает.Если у вас должен быть эквивалент, вы можете использовать микролиб, например этот .

1 голос
/ 17 июля 2011

«Мне нравится, чтобы мой код JavaScript находился в одном месте, если это возможно»

Да: внешний файл js. Это плохая практика, чтобы писать JS в голову. Точно так же, как стиль письма в голове оставляет желать лучшего. Надеюсь, вы используете jquery для чего-то большего, чем просто готовое событие, но это неоценимый инициализатор, даже если вы этого не делаете. Запишите ваши js в отдельный файл, мы надеемся, в какой-то тип контейнера, чтобы не загромождать глобальное пространство имен и инициализировать его как $(document).ready();

0 голосов
/ 17 июля 2011

Ну, как правило, я все равно ставлю все строчные j в конец документа, только внешние я обычно помещаю в голову.Однако вы можете использовать те же методы, которые использует jquery.Я не знаю точно, как выглядит исходный код jq, но что-то вроде этого должно работать (не проверено):

window.onDomReady = function (fn) {
    if(document.addEventListener) {
      document.addEventListener("DOMContentLoaded", func, false);
    } else {
      document.onreadystatechange = function(func){
        if(document.readyState == "interactive") {
          fn(func);
        }
      }
    }
  };

И тогда вы будете использовать его как:

window.onDomReady(function(){
   // do your stuff
});

Я не знаю, если это полностьюкросс-браузерная совместимость либо ... это было бы одним из преимуществ использования чего-то вроде jQuery вместо написания собственного.

0 голосов
/ 17 июля 2011

Вы должны дождаться события DOM onload. jquery $ (document) .ready () - это оболочка для установки обработчиков событий для загрузки.

Без jQuery вы можете попробовать:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function do_onload() {
    var div  = document.getElementById('myDiv')
    alert(div)
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body onload='do_onload()'>
<div id='myDiv'>I am here</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...