DOM文档对象模型 | Javascript

Posted pymkl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM文档对象模型 | Javascript相关的知识,希望对你有一定的参考价值。

#   在学过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")

 

以上是关于DOM文档对象模型 | Javascript的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript 文档对象模型模型DOM

javascript-dom文档对象模型1

DOM文档对象模型 | Javascript

DOM 文档对象模型+倒计时

JavaScript html Dom文档对象模型

JavaScript html Dom文档对象模型