# 在学过python这样的面向对象编程语言之后,可以用其思维方式来学习javascript; # DOM文档对象模型就相当于一个包,或者模块,定义了许多类,对网页做操作;
# Document类型 # document对象时htmlDocument的一个实例; # 1.两种访问子节点的快捷方式; # ①documentElement # var html = document.documentElement直接取得<html>的引用; # ②childNodes列表访问文档元素 # 附:document对象还有一个body属性指向<body>元素的引用; # var body = document.body # 2.HTMLDocument继承Document对象,在其基础之上添加了3个属性; # ①URL:返回完整的URL # var url = document.URL # ②domain:返回域名 # var domain = document.domain # ③referer:返回链接至当前页面的URL # var referer = document.referer # 以上3个属性均保存在HTTP的请求头中; # 3.查找元素 # ①getElementById() 根据id特性返回元素的引用,id相同仅返回第一个; # ②getElementByTagName() # 返回一个HTMLCollection对象,作为一个包含相同标签的集合; # 怎么获取指定位置元素的某个特性? # ①根据下标获取元素位置,再取某个特性; # alert(images[0].src) # 其实,调用了item()方法,等同于:alert(images.item(0).src) # ②根据name特性获取元素,再取某个特性 # alert(images[‘myImage‘]) # 其实,调用了HTMLCollection对象的namedItem()方法, # 等同于:alert(images.namedItem(‘myImage‘)) # 附:‘*‘表示查找所有; # ③getElementByName() 根据name特性返回元素,返回一个NodeList; # 4.特殊集合 # document.anchors 返回所有带有name特性的<a>元素 # document.forms 返回所有<form>元素 # document.images 返回所有<img>元素 # document.links 返回所有带href特性的<a>元素 # 5.文档写入(将输出流写入网页中) # ①write() # ②writeln() 写入的字符串末尾添加换行符\n # 注:写入html标签时,需要加入转义字符 # 例: # <script>document.write("hello world")</script> # <!-- 写入 --> # <title>document.write()</title> # 注:如果在读取完整个文档之后写入将重写页面; # window.onload = function(){document.write("hello world")}; # 该事件使读取文档只有再执行写入;
# Element类型 # 1.HTML元素都是由HTMLElement对象或其子类表示的; # 2.取得特性 # ①getAttribute() 获取特性的值(自定义特性加上data-前缀以便验证) # 附:两类特殊的特性: # ①style. 通过CSS为元素指定样式; # getAttribute()返回CSS文本,通过属性访问,返回一个对象; # ②onclick等事件; # getAttribute()返回js代码,通过属性访问,返回一个函数; # 3.设置特性 # ①setAttrbute() 参数:特性名,值 # 如果特性不存在则创建并设置; # dir.setAttribute(‘id‘,‘someOtherId‘) 特性名自动转换成小写 # 因为所有特性都是属性,所以可以直接赋值: # div.id = "someOtherId" # 但是,这种方式添加自定义属性就不是属性; # ②removeAttribute() # 彻底删除元素的特性; # 4.创建元素 # document.createElement() # ①var div = document.createElement(‘div‘) # ②div.id = "myNerDiv" # 不再页面中展示 # ③document.body.appendChild(div) # 添加特性至文档树 # 5.元素子节点 # 注:IE外其他浏览器将元素间空白符作为文本节点, # 所以不可通过childNodes属性遍历子节点; # 获取子节点元素 # var ul = ducument.getElemntById("myList") # var items = document.getElementByTagNmae("li")