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")

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

时间: 2024-08-12 05:51:09

DOM文档对象模型 | Javascript的相关文章

DOM 文档对象模型+倒计时

DOM 文档对象模型 DOM (document object model) 文档对象模型,它定义了操作文档对象的接口. DOM 把一份html文档表示为一棵家谱树,使用parent(父), child(子), sibling(兄弟)等记号来表明家庭成员之间的关系. 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML. JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够

JavaScript(三、DOM文档对象模型)

一.什么是DOM DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式." W3C DOM 标准被分为 3 个不同的部分: 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对

JavaScript学习笔记——5.DOM(文档对象模型)

1.获得对象方式 方法一 document.getElementsByTagName("div"); document.getElementById("head"); document.getElementsByName("username"); 方法二 //通过数组 document.all //存在为IE,不存在为FF document.body document.forms document.images document.links 2.

dom 文档对象模型 有关的知识

本文非本人原创,只是感觉对自己有用特拿来学习,特此声明. document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用.其中,appendChild() 方法在节点的子节点列表末添加新的子节点.insertBefore() 方法在节点的子节点列表任意位置插入新的节点. 下面,举例说明document.createElement()的用法.<div id="board"></div&

JavaScript笔记03——文档对象模型(Document Object Model,简称DOM)

Dom技术使得用户页面可以动态地变化,如可以动态地显示或隐藏一个元素,改变它们的属性,增加一个元素等,Dom技术使得页面的交互性大大地增强.[1] DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的对象.这些对象的行为和属性以及这些对象之间的关系.可以把DOM认为是页面上数据和结构的一个树形表示,不过页面当然可能并不是以这种树的方式具体实现. 通过 JavaScript,您可以重构整个 HTML 文档.您可以添加.移除.改变或重排页面上的项目. 要改变页面的某个东西,J

DOM(文档对象模型)改变HTML

声明:因本人近期对前端尤其的感兴趣,故一直在自学.而最近这几天处于初学期,估计前端的门槛都还没踩到,这会仅是对学习过程的一个记录,如有错误,请指出.万一你不幸被我误导了,勿怪勿怪,我也不是故意的. DOM(文档对象模型)改变HTML (1)查找HTML元素的常用方法: ①  id: var x=document.getElementById("intro");  ②  元素标签的名字: var x=document.getElementById("main"); v

DOM(文档对象模型)

1.定义: DOM是Document Object Model文档对象模型的缩写.是针对HTML和XML文档的一个API,通过DOM可以去改变文档. 例如:我们有一段HTML,那么如何访问第二层第一个节点呢,如何把最后一个节点移动到第一个节点上面去呢? DOM就是定义了如果做类似操作,那么应该怎么做的标准.比如用getElementById来访问节点,用insertBefore来插入节点. 当浏览器载入HTML时,会生成相应的DOM树. 简而言之,DOM可以理解为一个访问或操作HTML各种标签的

文档对象模型(DOM)系列一:DOM基础

前言: 通过javascript可以重构整个HTML文档,可以添加.移除.改变.或重排页面上的项目.要改变页面上的某个部分,javascript就需要对HTML文档中所有元素设置进行访问的接口.通过这个接口,可以提供对HTML元素进行添加.移动.改变.或移除的方法和属性,这些都是由文档对象模型(DOM)来实现.简单点说,HTML文档代表的是页面,而DOM则代表了如何去操作页面. 1.DOM树的结构 DOM节点树中的节点有元素节点.文本节点.和属性节点等三种不同的类型. 2.document对象

JS DOM(文档对象模型)与BOM(浏览器对象模型)

在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTML节点的操作,CSS的操作和HTML事件的监听和处理.BOM不要包括浏览器相关的一些属性和方法. DOM知识点1.改变页面的元素和属性a.获取元素的方法:document.getElementById()document.getElementsByTagName()document.getEleme