ch11 -- DOM 对象，控制 HTML 对象

最新推荐文章于 2024-07-13 15:54:45 发布

peabits

最新推荐文章于 2024-07-13 15:54:45 发布

阅读量172

点赞数 1

分类专栏： Web 前端

本文链接：https://blog.csdn.net/Pranuts_/article/details/89855605

版权

Web 前端专栏收录该内容

26 篇文章 1 订阅

订阅专栏

DOM 对象，控制 HTML 对象

文档对象模型 DOM（Document Object Model）定义访问和处理 HTML 文档的标准方法。

认识 DOM

DOM 将 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。把 HTML 文档看做是由节点构成的集合，DOM 节点有:

元素节点：如 <html> 、<body> 、<p> 等都是元素节点，即标签。
文本节点：向用户展示的内容，如 <li>...</li> 中的文本。
属性节点：元素属性，如 <a> 标签的链接属性 href 。

节点属性

属性	说明
nodeName	返回一个字符串，其内容是给定节点的名字
nodeType	返回一个整数，其数值代表给定节点的类型
nodeValue	返回给定节点的当前值

遍历结点树

方法	说明
childNodes	返回一个数组，这个数组由给定元素节点的子节点构成
firstChild	返回第一个子节点
lastChild	返回最后一个子节点
parentNode	返回一个给定节点的父节点
nextSibling	返回给定节点的下一个子节点
previousSibling	返回给定节点的上一个子节点

DOM 操作

方法	说明
createElement(element)	创建一个新的元素节点
createTextNode()	创建一个包含给定文本的新文本节点
appendChild()	指定节点的最后一个子节点列表之后添加一个新的子节点
insertBefore()	将一个给定节点插入到一个给定元素节点的给定子节点的前面
removeChild()	从一个给定元素中删除一个子节点
replaceChild()	把一个给定父元素里的一个子节点替换为另外一个节点

getElementByName() 方法

该方法返回带有指定名称的节点对象的集合。

语法：

document.getElementsByName(name)

与 getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。

注意:

因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
和数组类似也有 length 属性，可以和访问数组一样的方法来访问，下标从 0 开始。

getElementsByTagName() 方法

该方法返回带有指定标签名的节点对象的集合，返回元素的顺序是它们在文档中的顺序。

语法:

document.getElementsByTagName(Tagname)

说明:

Tagname 是标签的名称，如 p 、a 、img 等标签名。
和数组类似也有 length 属性，可以和访问数组一样的方法来访问，下标从 0 开始。

区别 getElementByID ，getElementsByName ，getElementsByTagName

ID 是一个标签唯一的号码，所以通过 getElementById 获取的是指定的一个标签。
Name 是标签的名字，可以重复，所以通过 getElementsByName 获取名字相同的标签集合。
TagName 可看似某类标签，getElementsByTagName 获取相同类的标签集合。

方法总结

方法	说明	返回数目
getElementByID	通过指定 id 获得元素	一个
getElementsByName	通过元素名称 name 属性获得元素	一组
getElementsByTagName	通过标签名获得元素	一组

注意：方法区分大小写

getAttribute() 方法

该方法通过元素节点的属性名称获取属性的值。

语法：

elementNode.getAttribute(name)

说明:

elementNode ：使用 getElementById() 、getElementsByTagName() 等方法，获取到的元素节点。
name ：要想查询的元素节点的属性名字

setAttribute() 方法

此方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

语法：

elementNode.setAttribute(name, value)

说明：

name : 要设置的属性名。
value : 要设置的属性值。

注意：

把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
类似于 getAttribute() 方法，setAttribute() 方法只能通过元素节点对象调用的函数。

节点属性

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性：

nodeName : 节点的名称
nodeValue ：节点的值
nodeType ：节点的类型

nodeName 属性是节点的名称，是只读的。

元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

nodeValue 属性是节点的值

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本自身
属性节点的 nodeValue 是属性的值

nodeType 属性是节点的类型，是只读的。以下常用的几种结点类型:

元素类型	节点类型
元素	1
属性	2
文本	3
注释	8
文档	9

访问节点

访问子节点

childNodes 属性访问选定元素节点下的所有子节点的列表，返回的值是一个数组。

语法：

elementNode.childNodes

注意：如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList 。

访问子节点的第一项和最后一项

firstChild 属性返回 childNodes 数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL 。

语法：

node.firstChild

说明：与 elementNode.childNodes[0] 是同样的效果。

lastChild 属性返回 childNodes 数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL 。

语法：

node.lastChild

说明：与 elementNode.childNodes[elementNode.childNodes.length-1] 是同样的效果。

访问父节点

parentNode 获取指定节点的父节点。

语法：

elementNode.parentNode

注意:父节点只能有一个。

访问祖节点:

elementNode.parentNode.parentNode

访问兄弟节点

nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。

语法：

nodeObject.nextSibling

说明：如果无此节点，则该属性返回 null 。

previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。

语法：

nodeObject.previousSibling

说明：如果无此节点，则该属性返回 null 。

注意: 两个属性获取的是节点。

插入节点

appendChild() 方法

此方法在指定节点的最后一个子节点列表之后添加一个新的子节点。

语法:

appendChild(newnode)

说明：参数 newnode 指定追加的节点。

insertBefore() 方法

此方法可在已有的子节点前插入一个新的子节点。

语法:

insertBefore(newnode,node);

说明：

参数 newnode 指要插入的新节点。
参数 node 指定此节点前插入节点。

删除节点

removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

语法:

nodeObject.removeChild(node)

说明：参数 node 指定需要删除的节点。

替换节点

replaceChild 实现子节点(对象)的替换，返回被替换对象的引用。

语法：

node.replaceChild (newnode, oldnode)

说明：

参数 newnode 用于替换 oldnode 的对象。
参数 oldnode 指被 newnode 替换的对象。

注意:

当 oldnode 被替换时，所有与之相关的属性内容都将被移除。
newnode 必须先被建立。

创建节点

创建元素节点

createElement() 方法可创建新的元素节点，返回新创建的 Element 对象。

语法：

document.createElement(tagName)

说明：参数 tagName 是一个字符串，用来指明创建元素的类型。

注意：要与 appendChild() 或 insertBefore() 方法联合使用，将元素显示在页面中。

创建文本节点

createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。

语法：

document.createTextNode(data)

说明：参数 data 是一个字符串，规定此节点的文本。

浏览器窗口可视区域大小

获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于 IE9+ 、Chrome 、Firefox 、Opera 以及 Safari

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5

document.documentElement.clientHeight 表示 HTML 文档所在窗口的当前高度。
document.documentElement.clientWidth 表示 HTML 文档所在窗口的当前宽度。

Document 对象的 body 属性对应 HTML 文档的 <body> 标签。

document.body.clientHeight
document.body.clientWidth

在不同浏览器都实用的 JavaScript 方案

var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;

网页尺寸

scrollHeight 和 scrollWidth

scrollHeight 和 scrollWidth ，获取网页内容高度和宽度。

针对 IE 、Opera

scrollHeight 是网页内容实际高度，可以小于 clientHeight 。

针对 NS 、FF

scrollHeight 是网页内容高度，不过最小值是 clientHeight 。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。

浏览器兼容性

var w = document.documentElement.scrollWidth || document.body.scrollWidth;
var h = document.documentElement.scrollHeight || document.body.scrollHeight;

注意：scrollHeight 和 scrollWidth 还可获取 Dom 元素中内容实际占用的高度和宽度。

offsetHeight 和 offsetWidth

offsetHeight 和 offsetWidth ，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。

offsetHeight = clientHeight + 滚动条 + 边框。

浏览器兼容性

var w = document.documentElement.offsetWidth || document.body.offsetWidth;
var h = document.documentElement.offsetHeight || document.body.offsetHeight;