《JavaScript DOM 编程艺术》06:获取与修改属性

《JavaScript学徒》系列会以经典书籍为教材制作影片,和大家一起学习JavaScript。

本文同步发表于我的个人网站:ZackLive

这是《JavaScript学徒》系列的第六课,今天会继续《JavaScript DOM 编程艺术》第3章,介绍如何用DOM方法获取与修改元素属性。

教学视频连结

YouTube

优酷

B站

获取属性:getAttribute

object.getAttribute(attribute)

var para = document.getElementsByTagName("p");

for (var i = 0; i < para.length; i++) {

  alert(para[i].getAttribute("title"));

}

若属性不存在,则返回null。对if语句来讲null就等于false,属性存在时会返回的字符串,而字符串只要不是空的,对if来讲就是true。

var para = document.getElementsByTagName("p");

for (var i = 0; i < para.length; i++) {

  text = para[i].getAttribute("title")

  if (text) alert(text);

}

只有属性存在时才alert。

修改属性:setAttribute

object.setAttribute(attribute, value)

同样透过元素节点对象调用。

var buyList = document.getElementById(purchases);

alert(buyList.getAttribute("title"));

buyList.setAttribute("title", "things to buy");

alert(buyList.getAttribute("title"));

若属性原本不存在,则会先创建,再赋值。

当你查看网页的源代码时,并不会看到修改后的内容,因为浏览器会先载入网页,再运行JavaScript进行动态修改,因此所有修改并不会影响原本的网页文件(HTML)。

文本节点?

我们知道节点有三种:元素节点、属性节点和文本节点。而我们学习了:

元素节点的获取:

getElementById

getElementsByTagName

getElementsByClassName

属性节点的获取与修改:

getAttribute

setAttribute

那文本节点又是如何操作的呢?这便是《JavaScript DOM 编程艺术》第四章的重点。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 归根结底,代码都是思想和概念的体现。没人能把一种程序设计语言的所有语法和关键字都记住,可以查阅参考书来解决。...
    朱细细阅读 2,993评论 4 14
  • 本章内容 理解包含不同层次节点的 DOM 使用不同的节点类型 克服浏览器兼容性问题及各种陷阱 DOM 是针对 HT...
    闷油瓶小张阅读 706评论 0 1
  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 1,349评论 0 5
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,814评论 0 8
  • “据说全世界惟有中国人骂起人来是有条有理、合逻辑的。英国人不信地狱之存在也还咒人‘下地狱’,又如他们最毒的一个字是...
    狮肩瘦阅读 2,170评论 7 35