码迷,mamicode.com
首页 > 编程语言 > 详细

DOM文档对象模型 | Javascript

时间:2018-01-19 11:43:24      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:other   links   div   获取   dir   不可   some   function   删除元素   

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

标签:other   links   div   获取   dir   不可   some   function   删除元素   

原文地址:https://www.cnblogs.com/pymkl/p/8314433.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!