javascript DOM 编程艺术笔记1

javascript在(x)HTML中的引入

两种方式：

1. <script>javascript code</script>将< script >标签放到< head >之间。
2. <script src="file.js"></script>将javascript代码存入扩展名为.js的独立文件，再在< script >中通过src属性指向该文件；最好是将script标签放到HTML文档最后,< /body >标签之前，有利于提高页面加载速度。

对象object

定义：由一些属性和方法组合在一起而构成的一个数据实体。

属性是隶属于某个特定对象的变量；方法是只有某个特定对象才能调用的函数。

DOM

定义：全称为文档（document）对象（object）模型（model）；它是一种应用程序接口（API）;它将HTML文档表示为DOM树，清晰地表示了文档的结构组成。

节点（node）分类：

1. 元素节点：如< p >,< span >等元素。
2. 文本节点：如包含在< p >标签里的”text node”；并非所有元素都有文本节点。
3. 属性节点：用于对元素做出更具体的描述；特别是在css那些事中提到的class，ID等属性，经常被用到。

DOM中获取元素的方法

1. document.getElementById("id")返回有特定id值的元素。
2. document.getElementsByTagName("tag")返回包含所有标签名为tag的元素数组。
3. document.getElementsByClassName("class")返回包含所有类名为class的元素数组。

   注释

• 一般获取到元素或元素数组后会将其赋值给变量，以方便操作使用。
• 对于通过类名获取而言,存在新老浏览器兼容问题,可用以下代码解决。
  function getElementsByClassName(node，classname){ if（node.getElementsByClassName）{ //使用现有方法 return node.getElementsByClassName(classname); }else{ var results = new Array(); var elems = node.getElementsByTagName("*"); for (var i=0;i<elems.length;i++){ if (elems[i].className.indexOf(classname)!=-1){ results[results.length] = elems[i]; } } return results; } }

  获取和设置属性

• object.getAttribute(attribute)
  该方法不属于document对象，所以不能通过document对象调用，只能通过元素节点对象调用；它可以和上述节点对象获取方法合用。
• object.setAttribute(attribute，value)
  该方法允许对属性节点做出修改。与get~一样，它也只能用于元素节点。