getattribute () Метод
До сих пор мы представили два способа извлечения определенных узлов элементов: один из них заключается в использовании метода getElementbyId (), а другой - использовать метод getElementsbytagname (). Найдя этот элемент, мы можем использовать метод getattribute () для запроса значений его различных атрибутов.
Метод getAttribute () является функцией. У него есть только один параметр - имя атрибута, который вы планируете запрашивать:
object.getattribute (атрибут)
Тем не менее, метод getAttribute () не может быть вызван через объект документа, который отличается от других методов, которые мы представляли ранее. Мы можем вызвать это только через один объект элемента узла.
Например, вы можете объединить его с помощью метода getElementsbytagname (), чтобы запросить атрибут заголовка каждого элемента <p>, как показано ниже:
var text = document.getElementsbytagname ("p") для (var i = 0; i <text.length; i ++) {alert (text [i] .getattribute ("title"));}Если вы вставите приведенный выше код в конце примеров документа «Список покупок», данного ранее, и перезагрузить страницу в веб -браузере, на экране появится диалоговое окно ALTER с текстовым сообщением «Нежное напоминание».
В документе списка покупок есть только один элемент <p> с атрибутом заголовка. Если в документе есть один или несколько элементов <p> без атрибута заголовка, соответствующий вызов getattribute («title») вернет NULL. NULL - это нулевая ценность на языке JavaScript, и его значение - «то, что вы сказали, не существует». Если вы хотите проверить это лично, вставьте следующий текст в существующий текстовый абзац в документ списка покупок:
<p> Это просто тест </p>
Затем перезагрузите страницу. На этот раз вы увидите два диалога с изменением, а второй диалог будет пустым или только отобразит слово «null» - конкретная ситуация зависит от того, как ваш веб -браузер будет отображать нулевое значение.
Мы можем изменить наш сценарий, чтобы он появился только в том случае, когда существует свойство заголовка. Мы добавим оператор IF, чтобы проверить, является ли возвращаемое значение метода getAttribute () NULL. Используя эту возможность, мы также добавили несколько переменных для улучшения читаемости сценария:
var ts = document.getelementsbytagname ("li"); for (var i = 0; i <ts.length; i ++) {text = ts [i] .getattribute ("title"); if (text! = null) {alert (text)}}}}}}}}}}}}}}}}}}Теперь, если вы перезагружаете эту страницу, вы увидите только диалоговое окно ALTER, показывающее сообщение «Нежное напоминание», как показано ниже.
Мы можем даже уменьшить этот код до более короткого. Проверяя, являются ли определенные данные нулевым значением, мы фактически проверяем, существует ли они. Этот вид проверки может быть упрощен, чтобы напрямую использовать проверенные данные в качестве условия для оператора if. Если (что -то) полностью эквивалентно IF (что -то! = NULL), но первое, очевидно, более кратко. В настоящее время, если что -то существует, условие утверждения IF будет правдой; Если чего -то не существует, условие оператора IF будет ложным.
В этом примере, пока мы заменим if (title_text! = Null) на if (title_text), мы можем получить более краткий код. Кроме того, для дальнейшего увеличения читаемости кода мы также можем воспользоваться этой возможностью, чтобы написать альтернативные операторы, а также операторы на той же строке, что может привести их к английским предложениям в нашей повседневной жизни:
var ts = document.getelementsbytagname ("li"); for (var i = 0; i <ts.length; i ++) {text = ts [i] .getAttribute ("title"); if (text) alert (text)}3.4.2 Метод setAttribute ()
Все методы, которые мы представляли вам раньше, могут использоваться только для получения информации. Метод SetAtTribute () имеет важную разницу от них: он позволяет нам вносить изменения в значение узла атрибута.
Аналогично методу getattribute (), метод setattribute () также является функцией, которую можно вызвать только через объект Node Element, но метод SetAtTribute () требует от нас передачи два параметра:
ocect.setattribute (атрибут, значение)
В следующем примере первое оператор будет извлекать элемент, значение атрибута которого является покупка, а второй оператор установит значение атрибута заголовка этого элемента в список товаров:
var Shopping = document.getElementById ("покупки") Shopping.SetAtTribute ("Title", "Список товаров")Мы можем использовать метод getattribute (), чтобы доказать, что значение атрибута заголовка этого элемента действительно изменилось:
var Shopping = document.getElementById ("покупки"); alert (shopping.getAttribute ("title")); shopping.setattribute ("title", "список товаров"); alert (shopping.getattribute ("title"));Приведенные выше операторы будут всплыть два диалога оповещения на экране: первый диалог ALTER появляется до того, как будет вызван метод SetAtTribute (), он будет пустым или будет отображаться слово «нуль»; Второе появляется после установки значения атрибута заголовка, он отобразит сообщение «Список товаров».
В приведенном выше примере мы установили атрибут заголовка существующего узла, но этого атрибута не существует в первую очередь. Это означает, что вызов SetAtTribute (), который мы выпускаем, фактически завершает две операции: сначала создайте этот атрибут, а затем установите его значение. Если мы используем метод SetAtTribute () на существующем атрибуте узла элемента, текущее значение этого атрибута будет перезаписано.
В примере документа «Список покупок» элемент <p> уже имеет атрибут заголовка, и значение этого атрибута является мягким напоминанием. Мы можем использовать метод SetAtTribute () для изменения его текущего значения:
<script type = "text/javascript"> var ts = document.getelementsbytagname ("li"); for (var i = 0; i <ts.length; i ++) {var text = ts [i] .getattribute ("title"); alert (title "); alert (title] .getattribute (" title ")) if (text) {ts [i] .setattribute (" title "," Я буду преуспеть! ").Приведенный выше код сначала извлечет все элементы <p>, которые уже имеют атрибуты заголовка из документа, а затем изменят все значения атрибутов названия на новый текст заголовка. В частности, для документа «Список покупок» значение свойства, нежное напоминание будет перезаписано.
Вот очень примечательная деталь: модификации документа с помощью метода SetAtTribute () приведут к тому, что документ отображает эффекты и/или поведение в окне браузера соответственно, но когда мы просматриваем исходный код документа через опцию источника просмотра браузера, мы все равно увидим оригинальный атрибут - то есть модификации, сделанные в качестве Setattribute SourceTibut (). Сам не отражается в исходном коде. Это явление «противоречивого внутри и снаружи» происходит из рабочего режима DOM: сначала загрузите статическое содержание документа, а затем динамически обновить их. Динамическое обновление не влияет на статическое содержание документа. Это именно реальная сила и искушение DOM: освежающее содержание страницы не требует, чтобы конечные пользователи выполняли операции обновления страницы в своих браузерах.