DOM概述
官方定义:
-
DOM是W3C制定的一个规范(标准),(Document Object Model,文档对象模型),是提供了访问和操作网页中各元素的方法,让程序可以动态的修改或改变网页元素的内容、样式、结构。
-
DOM是W3C制定的一个规范(标准),而这个规范在浏览器中,以对象的形式得以实现。
在 1998 年,W3C 发布了第一级的 DOM 规范,所有的浏览器都执行了这个标准,因此,DOM 的兼容性问题也几乎难觅踪影了
DOM按其内容可分为5个部分
-
核心DOM:可以同时操作HTML和XML两种文档的公共的属性和方法。;
-
XMLDOM:针对XML操作的接口,也是一些属性和方法
-
HTML DOM:HTML专用接口,也是一些属性和方法;
-
DOM事件模型:定义DOM能够响应的事件.比如:onclick、onload、onchange;
-
CSS DOM:让JS去操作和访问CSS的各种属性
DOM的结构
HTML DOM 将 HTML 文档视作树结构。结构图中的每一项称为节点(Node),树状结构叫节点树.结构树反映了各HTML元素之间的层次关系。DOM就通过这种树结构的层次关系,来定位、访问与控制文档中各元素及其内容。
DOM节点
根据 DOM,HTML 文档中的每个成分都是一个节点,HTML文档的节点类型有5个:
-
整个文档是一个文档节点 ,它对应的对象是document对象 9
-
每个 HTML 标签是一个元素节点 1 div=null
-
每一个 HTML 属性是一个属性节点 2 属性=属性值
-
包含在 HTML 元素中的文本是文本节点 (它下面不能再有其它子节点) 3 #test=文本
-
注释属于注释节点 8
<a href=”http://www.baidu.com”>百度</a> 节点对象.nodeType 节点对象.nodeName
节点关系
节点彼此间都存在关系。父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。
-
除文档节点之外的每个节点都有父节点(parentNode)。
父节点(parentNode):当前节点的上一级元素;
-
大部分元素节点都有子节点。 子节点(childNode):当前节点的下一级元素(1层);
-
当节点分享同一个父节点时,它们就是同辈(同级节点)。
-
节点也可以拥有后代,后代指某个节点的所有子节点,或者这些子节点的子节点
-
节点也可以拥有先辈。先辈是某个节点的父节点,或者父节点的父节点
只要知道一个节点, 按关系找到其它节点
节点信息
节点信息。每个节点都拥有包含着关于节点某些信息的属性。这些属性是:nodeName(节点名称), nodeValue(节点值),nodeType(节点类型)。
节点名称 obj.nodeName
-
nodeName 是只读的
-
元素节点的 nodeName 与标签名相同
-
属性节点的 nodeName 是属性的名称
-
文本节点的 nodeName 永远是 #text 元素节点的文本内容
节点值 obj.nodeValue
-
元素节点的 nodeValue 是 null
-
文本节点的 nodeValue 是 文本自身
-
属性节点的 nodeValue 是 属性的值
节点类型 obj.nodeType
DOM中定义了12种节点类型,有些类型是XML专有的,与HTML相关的节点类型如下图所示。
-
nodeType 是只读的
-
nodeType 属性规定节点的类型
获取节点对象
获取节点
在访问节点树中节点时,起点是document对象。 1.获取元素节点
document.getElementById("ID") document.getElementsByTagName("标签名称") document.getElementsByClassName("类名"); document.getElementsByName("name属性值") document.querySelector(); document.querySelectorAll();
document.getElementById('ID').getElementsByTagName("标签名称");
-
获取属性
属性节点包括:clsaa,id,style,name等
obj.attributes[0|'id']; //获取对象的所有的属性的集合 obj.getAttribute(“id”); //获取指定属性名的属性值 obj.getAttributeNode(“id”) //从当前元素中通过名称获取属性节点
-
获取文本节点
var obj=document.getElementById("mydiv"); for(var i=0;i<obj.childNodes.length;i++){ if(obj.childNodes[i].nodeType==3){ document.write(obj.childNodes[i].nodeType+"<br>"); } } //注意页面上的回车转行也算一个文本节点
-
获取其他节点
获取父、子和同胞节点对象
-
节点对象.parentNode //父节点
-
节点对象.childNodes //获取子节点
-
节点对象.children //获取元素中的子元素对象,不要文本
-
节点对象.firstChild //获取第一个子节点
-
节点对象.lastChild //获取最后一个子节点
-
节点对象.previousSibling //获取前一个兄弟元素节点
-
节点对象.previousElementSibling //获取上一个兄弟元素节点;(只包含元素节点)不包含文本节点;
-
节点对象.nextSibling //获取下一个兄弟元素
-
节点对象.nextElementSibling // 获取下一个兄弟元素节点;(只包含元素节点)不包含文本节点;
-
节点对象.elements //返回包含表单中所有元素的数组
-
操作节点对象-改变节点
获取及设置元素节点对象属性
-
获取元素对象属性: 方法1:元素对象.属性名 方法2:元素对象.getAttribute('属性名')
-
设置元素对象属性: 方法1:元素对象.属性名='属性值' 方法2:元素对象.setAttribute('属性名','属性值')
-
移除元素对象属性: removeAttribute("name")
获取及设置元素节点对象内容
-
元素对象.innerHTML(从开始标签-结束标签包括html标签)
-
元素对象.outerHTML(innerHTML的全部和标签本身)
-
元素对象.innerText(只获取元素总的文本内容)
-
表单元素对象.value
创建节点对象
方法 | 描述 |
---|---|
createElement(tagName) | 创建标记名tagName的Element节点。Element节点可以包含文本子节点和属性子节点 例如:node_h1=document.createElement(“h1”) |
createTextNode(text) | 创建包含文本text的文本节点,返回得到的节点如:node_text=document.createTextNode(“hello”) |
appendChild(node) | 向当前节点添加子节点,子节点被添加在子节点列表的尾部。例如:node_h1.appendChild(node_text) |
insertBefore(new,current) | 在current节点前插入new节点。 parentNode.insertBefore(new,current) |
删除节点对象
父节点对象.removeChild("子节点对象") 节点对象.remove() //移除当前元素
替换节点对象
父节点对象.replaceChild("新节点","旧节点")
js修改样式
document文档对象的属性
document对象拥有大量的属性,这些属性主要用于描述HTML文档中的标题、颜色、URL以及HTML文档中的图片、超链接、表单元素等。
属性名 | 说明 |
---|---|
anchors | 该属性返回一个数组,代表当前文档中的锚 //anchors.length |
forms | form表单对象的数组 |
images | image对象的数组 |
links | link对象的数组 |
lastModified | 返回当前文档的最后一次修改时间 |
title | 设置或返回当前文档的标题 |
常用元素节点对象
document.documentElement html document.head head document.title title document.body body
常用元素节点对象集合
document.all document.forms document.images document.links document.anchors
遍历节点对象集合
for(var i=0;i<节点对象集合.length;i++){ 节点对象集合[i] } for(i in 节点对象集合){ 节点对象集合[i] }
HTML DOM元素对象
属性 | 描述 |
---|---|
tagName | 元素的标记名称,与节点的nodeName属性相同。返回大写形式标记。 |
className | 元素标记class属性的值,可读可写。通过该属性可以设置标记的样式 |
id | 对应HTML元素的id属性 |
innerHTML | 包含在元素标记中的HTML文本,不包括元素本身的起始标记。 |
offsetHeight | 为元素及其所有内容的高度,含内边距和边框,不含外边距 |
offsetWidth | 为元素及其所有内容的宽度,含内边距和边框,不含外边距 |
scrollHeight | 元素完整的高度,包含滚动条中不可见部分的高度,含内边距,不含边 |
scrollWidth | 元素完整的宽度,包含滚动条中不可见部分的宽度,含内边距,不含边 |
scrollLeftscrollTop | 出现滚动条时,表示已向左滚动过去的内容的宽度,只在出现滚动条时有效,反映了内容向左滚动的距离。 |
title | 对应元素的title属性 |
style | 对应于元素的内嵌样式 |
DOM CSS动态样式
动态样式:
-
动态样式指通过脚本动态控制元素的样式,实现页面显示格式的动态变化。比如:动态滚动的文本、动态移动的图片、可折叠的树形菜单等。
使用style对象访问样式:
-
每个HTML标记均具有style属性,相应的,JavaScript脚本中的HTML元素对象都具有style属性,该属性是一个style对象。
-
Style对象的属性与CSS样式中的属性一一对应。
元素对象.className="类名":
-
因为属性名class在JS中为关键字,所在此处写做className
CSS动态样式
读取元素对象样式属性: box.style.color
注意:在读取元素样式属性时,style对象只能读取行内样式设置的属性或元素对象设置的属性,对于内嵌样式和外联样式,将返回空值。
CSS属性与style对象属性的转换
-
Style对象中的属性与CSS样式表中属性是一一对应的,但名称不一样。
-
当属性名为单个单词时,style对象的属性名与样式表中的属性名称是相同的
-
当属性名由多个单词组成时,除第一个单词外,其它单词的首字母大写
-
属性值需要用引号引起来
var box = document.getElementById("box");
box.style.backgroundColor="#ff0000";
box.style.border="1px solid #f00";
box.style.height="300px";
网站的状态码-status
1XX消息: 这一类型的状态码,代表请求已被接受,需要继续处理。 2XX成功: 200请求已成功 3XX重定向: 301被请求的资源已永久移动到新位置。 4XX请求错误: 404 Not Found。 请求失败,请求所希望得到的资源未被在服务器上发现