搜索
您的当前位置:首页正文

Javascript DOM变成艺术学习笔记

来源:欧得旅游网
1.对象

对象是自包含的数据集合,包含在对象里的数据可以通过两种形式进行访问----属性(property)和方法(method)。

  • JavaScript语言里的对象可以分为三种类型。
  • 用户定义对象(user-defined object):由程序员自行创建的对象。本书不讨论这种对象。
  • 内建对象(native object):内建在JavaScript语言里的对象,如Array、Math和Date等。
  • 宿主对象(host object):由浏览器提供的对象。
属性:隶属于某个特定对象的变量–object.property
方法:只有某个特定对象才能调用的方法–object.method()
2.获取元素
  • 一份文档就是一棵节点树。
  • 节点分为不同的类型:元素节点、属性节点和文本节点等。
  • getElenentById将返回一个对象,该对象对应着文档里的一个特定的元素节点。
  • getElementsByTagName和getElementByclassName将返回一个对象数组,它们分别对应着文档里的一组特定的元素节点。
  • 每个节点都是一个对象。
3.获取和设置属性

通过getElenentById、getElementsByTagName和getElementByclassName来获取元素,之后通过getAttribute方法获取元素的各个属性,通过setAttribute方法更改各个属性的值。

  • object.getAttribute(attribute) :getAttribute方法不属于document对象,所以不能通过document对象调用,只能通过元素节点对象调用。
  • object.setAttribute(attribute,value)
  • setAttribute做出的修改不会反映在文档本身的源代码里
4.事件处理函数

事件处理函数的作用是,在特定事件发生时调用特定的JavaScript代码。
添加事件处理函数语法:

  • event=“Javascript stament(s)”
5. childNodes属性

childNodes属性返回的数组包含所有类型的节点,不仅仅是元素节点、文本节点、属性节点,甚至包括空格、换行符等等。

6.nodeType 属性

nodeType 属性:node.nodeType
nodeType属性总共有12种可取值,但其中仅有3种具有实用价值。

  • 元素节点的nodeType属性值是1。
  • 属性节点的nodeType属性值是2。
  • 文本节点的nodeType属性值是3。
7.平稳退化

所谓平稳退化指的是,当用户使用不支持JavaScript的浏览器或者禁用JavaScript的情况下,如果正确使用JavaScript脚本,虽然某些功能无法使用,但是依然能够完成基本操作。
“JavaScript:”伪协议内嵌事件处理函数,都不能做到平稳退化
JavaScript:伪协议----<a herf="javascript:popUp('http://www.baidu.com/');" >百度</a>
内嵌处理函数:----<a herf='#' onclick="http://www.baidu.com/');return false;">百度</a>
解决方案:----<a href="http://www.baidu.com/" onclick="popUp(this.getAttribute("href));return false;" >Baidu</a>

8.分离JavaScript

语法结构:element.event = action…
具体步骤:

  • 1.把文档的所有链接全部放到一个数组中
  • 2.遍历数组
  • 3.如果某个链接的class属性等于popup,就表示点击这个链接时应该调用popUp()函数
  • 3.a 把链接的href属性传递给popUp()函数
  • 3.b 取消链接的默认行为,不让链接把访问者带离当前窗口
  • var links=document.getElementsByTagName('a');

因篇幅问题不能全部显示,请点此查看更多更全内容

热门图文

Top