Web-дизайн

:

Основы программирования на JavaScript
[+]
Опубликован: 19.10.2006 | Уровень: для всех | Доступ: платный
Лекция 7:

Объект документа и объект окна
A
|
версия для печати
< Лекция 6 || Лекция 7: 1234 || Лекция 8 >

Объект Document (window.document)

Одной из наиболее часто используемых функций в JavaScript является document.write. Можно сказать, что document.write получает строку и выводит ее на странице. Здесь необходимо только следить за одной вещью. Если страница полностью загрузилась и вызывается document.write, то вся страница будет очищена и на экране будет только результат работы document.write.

Мы уже видели различные свойства объекта document в действии. Например, document.forms возвращает массив всех форм на странице. Здесь также существует несколько свойств, подобных этому.

  • document.forms - массив, содержащий все формы на текущей странице;
  • document.images - массив, содержащий все изображения на текущей странице;
  • document.links - массив, содержащий все ссылки на текущей странице;
  • document.anchors - массив, содержащий все анкеры на текущей странице;
  • document.applets - массив, содержащий все апплеты на текущей странице;
  • document.styleSheets - массив, содержащий все таблицы стилей на текущей странице;
  • window.frames - массив, содержащий все фреймы на текущей странице.

Как мы видели в "предыдущей лекции" , почти все эти свойства можно продублировать с помощью document.getElementsByTagName. Чтобы получить все изображения на странице, можно воспользоваться, например, document.getElementsByTagName('IMG');. Существует три подобные функции:

  • document.getElementById - возвращает один элемент на основе его ID ;
  • document.getElementsByName - возвращает массив элементов, определенных по имени. В отличие от ID многие элементы могут иметь на странице одинаковые имена;
  • document.getElementsByTagName - возвращает массив элементов, определенных по имени тега. Имя тега является просто именем тега HTML, т.е. 'DIV', 'IMG', 'TABLE', 'A ' и т.д.

Существует еще одно свойство, document.all, которое выдает массив всех элементов на странице. Однако document.all поддерживается не всеми браузерами, поэтому предполагается, что вместо этого используется функция document.getElementsByTagName('*'), которая также вернет все элементы на странице.

document.body и document.documentElement

document.body ссылается на тег <BODY>, где должен предположительно находится весь контент. Весь DOM сайта вложен в document.body. Кроме этого, необходимо использовать document.body для определения, что документ был прокручен, и для получения размера окна. К сожалению, это является одной из наиболее сложных вещей, применяемых сегодня в Web-браузерах.

Существует концепция, называемая "Тип документа", которая задает для Web-браузера определенный набор правил. Изменение типа документа заставляет некоторые свойства переместиться из document.body в document.documentElement, но только некоторые свойства и только для некоторых браузеров.

Проще говоря, это является полным беспорядком, поэтому две следующие функции выдадут позицию прокручивания и размеры окна независимо от браузера.

function getScrollPos(){
  if (window.pageYOffset){
    return {y:window.pageYOffset, x:window.pageXOffset};
  }
  if(document.documentElement && document.documentElement.scrollTop){
    return {y:document.documentElement.scrollTop, x:document.documentElement.scrollLeft};
  }
  if(document.body){
    return {y:document.body.scrollTop, x:document.body.scrollLeft};
  }
  return {x:0, y:0};
}

function getWindowDims(){
  if (window.innerWidth){
    return {w:window.innerWidth, h:window.innerHeight};
  }
  if (document.documentElement && document.documentElement.clientWidth){
    return {w:document.documentElement.clientWidth, h:document.documentElement.clientHeight};
  }
  if (document.body){
    return {w:document.body.clientWidth, h:document.body.clientHeight};
  }
  return {w:0, h:0}
}

title, referer

Тремя последними свойствами документа являются title, referer и cookies. document.title и document.referer достаточно понятны. document.title содержит заголовок страницы. Его можно прочитать и изменить после полной загрузки документа. document.referer содержит просто URL страницы, которая привела пользователя на текущую страницу.

Поэтому, если вы щелкнули на ссылке, чтобы попасть на эту страницу, то document.referer будет содержать URL страницы, на которой находится ссылка. Если вы пришли на эту страницу сразу, задавая ее в поле адреса браузера, то document.referer будет неопределен.

Дальше >>
< Лекция 6 || Лекция 7: 1234 || Лекция 8 >

Вопросы и ответы

вопросов: 9
Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

ответить
Рустам Рахимов
Рустам Рахимов

Пол часа искал в интеренете, как что работает. Такое чувство что автор пишет для людей которые уже знают js, или просто хвастается своими знаниями. Конструкция формы непонятна. И можно было бы в кратце написать, что такое событие которое используют. Сорершенно не понятно как работает форма, и как брать из нее значение. 

function Complete() {

    var x = "Имя: " + document.tutform.firstname.value;

alert(x);

} - Так брать значение из формы tutform, firstname-получаем значение из имени. 

<INPUT TYPE="button" VALUE="Готово" onClick="Complete();"> - Нужно к кнопке прописать событие, при нажатие на кнопку готово, чтобы возвращалось значение с помощью функции. А так ничего не работает, и смысла учить нету, если не знать почему не работает.

 

ответить