8.DOM对象

neverSettle姜
96 阅读9分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

DOM概述

官方定义：

  1. DOM是W3C制定的一个规范(标准)，(Document Object Model，文档对象模型)，是提供了访问和操作网页中各元素的方法，让程序可以动态的修改或改变网页元素的内容、样式、结构。
  2. DOM是W3C制定的一个规范(标准)，而这个规范在浏览器中，以对象的形式得以实现。
  3. 在 1998 年，W3C 发布了第一级的 DOM 规范，所有的浏览器都执行了这个标准，因此，DOM 的兼容性问题也几乎难觅踪影了
  4. 提供了访问HTML文档的方法, 允许开发者通过JS对HTML文档进行增, 删, 改, 查

DOM结构（倒树形结构）

HTML DOM 将 HTML 文档视作树结构。结构图中的每一项称为节点(Node)，树状结构叫节点树，结构树反映了各HTML元素之间的层次关系；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("标签名称");
  1. 获取属性 属性节点包括：clsaa，id，style，name等 obj.attributes[0|'id']; //获取对象的所有的属性的集合 obj.getAttribute(“id”); //获取指定属性名的属性值 obj.getAttributeNode(“id”)  //从当前元素中通过名称获取属性节点
  2. 获取文本节点
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>");
  }
}
//注意页面上的回车转行也算一个文本节点

  1. 获取其他节点 获取父、子和同胞节点对象

    • 节点对象.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
formsform表单对象的数组
imagesimage对象的数组
linkslink对象的数组
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元素完整的宽度，包含滚动条中不可见部分的宽度，含内边距，不含边
scrollLeft scrollTop出现滚动条时，表示已向左滚动过去的内容的宽度，只在出现滚动条时有效，反映了内容向左滚动的距离。
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。 请求失败，请求所希望得到的资源未被在服务器上发现

avatar
文章
阅读
粉丝