JavaScript基本概念——DOM（五）

来源：互联网发布：seo常用术语编辑：程序博客网时间：2024/05/17 01:56

一、定义

1、

文档对象模型（Document Object Model，DOM）是表示和操作HTML和XML文档内容的基础API。

当网页被加载时，浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点（每一个方框），再由这些节点组成一个树状结构（DOM Tree）。

节点有7种类型：

Document：整个文档树的顶层节点  DocumentType：doctype标签（比如<!DOCTYPE html>）  Element：网页的各种HTML标签（比如<body>、<a>等）  Attribute：网页元素的属性（比如class="right"）  Text：标签之间或标签包含的文本  Comment：HTML或XML的注释  DocumentFragment：文档的片段Document和Element是两个重要的DOM类。

2、节点关系

在一个节点之上的直接节点是其 父节点 ，在其下一层的直接节点是其 子节点 。在同一层上具有相同父节点的节点是 兄弟节点。在一个节点之下的所有层级的一组节点是其 后代节点 。一个节点的任何父节点、祖父节点和其上层的所有节点是 祖先节点 。

二、选取文档元素

用指定的id属性
用指定的name属性
用指定的标签名字
用指定的CSS类
匹配指定的CSS选择器

1、用指定ID选取元素

任何HTML元素都可以有一个id元素，但在文档中该值必须唯一

document.getElementById('div’);

2、用指定名字选取元素

HTML元素拥有name属性（比如<form>、<radio>、<img>、<frame>、<embed>和<object>等），非唯一

<input name=“input"/>var inputs = document.getElementsByName('input’);  //返回的是一个数组inputs[0].tagName  //input

3、用指定标签名选取元素

选取指定类型（标签名）的所有HTML或XML元素，也是返回一个NodeList对象。

传递通配符参数“*”，将获得一个代表文档中所有元素的NodeList对象。

document.getElementsByTagName('span')  // 选取所有span元素

4、用指定CSS类选取元素

（1）HTML元素的class属性值是一个以空格隔开的列表，可以为空或包含多个标识符。

在HTML文档和HTML元素上，我们可以调用getElementsByClassName()来选择指定CSS类的元素，它返回一个实时的NodeList对象，包含文档或元素所有匹配的后代节点。

（2）querySelectorAll()

它接受一个CSS选择器的字符串参数，返回一个代表文档中匹配选择器的所有元素的NodeList对象，并不是实时的。如果没有匹配的元素，则返回一个空的NodeList对象。

document.querySelectorAll('.div')  //匹配所有class名为div的元素

（3）querySelector()

返回第一个匹配的元素（以文档顺序），如果没有匹配的元素就返回null。

支持复杂的CSS选择器。不支持CSS伪元素的选择器（比如:first-line和:first-letter）和伪类的选择器（比如:link和:visited）

// 选中data-tip属性等于title的元素  document.querySelectorAll('[data-tip="title"]');// 选中div元素，那些class含ignore的除外  document.querySelectorAll('div:not(.ignore)’);

三、文档结构和遍历

1、Node属性

作为节点树的文档

Document对象、它的Element对象和文档中表示文本的Text对象都是Node对象。

（1）parentNode 该节点的父节点，或者针对类似Document对象应该是null，因为它没有父节点。

（2）childNodes 返回只读的类数组对象（NodeList对象），它是该节点的子节点的实时表。

（3）

firstChild、lastChild

该节点的子节点中的第一个和最后一个

（4）nextSibling、previousSibling 该节点的兄弟节点中的前一个和下一个。

（5）textContent 返回该节点和它的所有后代节点的文本内容。

<div id="div">我是<span>textContent</span></div>document.getElementById('div').textContent  // 我是textContent

（6）nodeType

该节点的类型。

9：Document节点

1：Element节点

3：Text节点

8：Comment节点

11：DocumentFragment节点

（7）nodeValue

Text节点或者Comment节点的文本内容。只有Text节点和Comment节点的nodeValue可以返回结果，其他类型的节点一律返回null。

（8）nodeName

元素的标签名，以大写形式表示。

nodeType和nodeName

document.childNodes[0].childNodes[1]

2、作为元素树的文档

（1）children

类似childNodes，返回一个NodeList对象，但children列表只包含Element对象。（Text和Comment节点没有children属性）

（2）firstElementChild、lastElementChild

类似firstChild和lastChild，但只代表子Element。

（3）nextElementSibling、previousElementSibling

类似nextSibling和previousSibling，但只代表兄弟Element。

（4）childElementCount

子元素的数量。返回的值和children.length值相等。

（5）offsetParent

offsetParent属性返回当前HTML元素的最靠近的、并且CSS的position属性不等于static的父元素。

3、NodeList对象和HTMLCollection对象

（1）NodeList实例对象是一个类数组对象，它的成员是节点对象。以像数组那样，使用数字索引取出每个节点，但是它本身并不是数组，不能使用pop或push之类数组特有的方法。

（2）HTMLCollection实例对象也是类数组对象。

有一些快捷属性来访问各种各样的节点。比如：images、forms和links等属性指向类数组的<img>、<form>和<a>（只包含那些有href属性的<a>标签）元素集合。这些属性都是返回HTMLCollection实例对象。

HTMLCollection与NodeList的区别：

HTMLCollection实例对象的成员只能是Element节点，NodeList实例对象的成员可以包含其他节点。
HTMLCollection实例对象都是动态集合，节点的变化会实时反映在集合中。NodeList实例对象可以是静态集合。
HTMLCollection实例对象可以用id属性或name属性引用节点元素，NodeList只能使用数字索引引用。

四、元素的内容

（1）innerHTML

读取Element的 innerHTML 属性作为字符串标记返回那个元素的内容。

<div id="div"><p>123</p></div>var d = document.getElementById('div');d.innerHTML  // "<p>123</p>”

设置

d.innerHTML = '<span>99</span>'// <div id="div"><span>99</span></div>

（2）outerHTML

outerHTML属性返回一个字符串，内容为指定元素节点的所有HTML代码，包括它自身和包含的所有子元素。

d.outerHTML// "<div id="div"><p>123</p></div>"

注意：只有Element节点有outerHTML属性，Document节点没有。

（3）insertAdjacentHTML()

将任意的HTML标记字符插入到指定的元素“相邻”的位置。

五、创建、插入和删除节点

1、创建节点

（1）createElement()

给方法传递一个元素的标签名作为参数（对HTML文档来说该标签名是不区分大小写的）

var span = document.createElement('span')

（2）createTextNode()

创建一个Text节点，参数为所要生成的文本节点的内容。

var newnode = document.createTextNode(‘content')

（3）createAttribute()

生成一个新的属性对象节点，并返回它。参数是属性的名称。

（4）cloneNode()

用来复制已存在的节点。每个节点有一个cloneNode()方法，返回该节点的一个全新副本。传递一个可选的布尔值为参数，如果参数true则同时克隆该节点的所有后代节点，否则只克隆该节点，默认为false。

2、插入节点

1）appendChild()

接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。

parentNode.appendChild(newNode)

（2）insertBefore()

用于将某个节点插入当前节点的指定位置。第一个参数是所要插入的节点，第二个参数是当前节点的一个子节点，新的节点将插在这个节点的前面。该方法返回被插入的新节点。

parenNode.insertBefore(newNode,oldNode)

注意：调用上面两个方法时，如果要插入的节点是已存在文档中的，那个节点将自动从它当前的位置移除并在新的位置重新插入。

3、删除和替换节点

（1）removeChild()

注意：该方法不是在待删除的节点上调用，而是在其父节点上调用。在父节点上调用该方法，并将需要删除的子节点作为方法参数传递给它。

n.parentNode.removeChild(n);

（2）replaceChild()

父节点上调用该方法，第一个参数是新节点，第二个参数是需要替代的节点。

var span = document.createElement('span');n.parentNode.replaceChild(span,n);

六、盒状模型

1、查询元素的几何尺寸

getBoundingClientRect()方法返回元素在视口坐标中的位置。

getBoundingClientRect方法返回的rect对象，具有以下属性（全部为只读）。

x：元素左上角相对于视口的横坐标 left：元素左上角相对于视口的横坐标，与x属性相等 right：元素右边界相对于视口的横坐标（等于x加上width）width：元素宽度（等于right减去left） y：元素顶部相对于视口的纵坐标 top：元素顶部相对于视口的纵坐标，与y属性相等 bottom：元素底部相对于视口的纵坐标 height：元素高度（等于y加上height）

2、判断元素在某点

elementFromPoint()方法，传递X和Y坐标（使用视口坐标），该方法返回在指定位置的一个元素。

3、滚动

（1）Element.scrollLeft属性表示网页元素的水平滚动条向右侧滚动的像素数量，

Element.scrollTop属性表示网页元素的垂直滚动条向下滚动的像素数量。

如果要查看整张网页的水平的和垂直的滚动距离，要从document.body元素上读取。

document.body.scrollLeft document.body.scrollTop

（2）scrollTop()

也可以调用window对象的scrollTop()方法来滚动，接受一个点的X和Y坐标（文档坐标），并作为滚动条的偏移量设置它们。

（3）scrollBy()

用于将网页移动指定距离，单位为像素。它接受两个参数：向右滚动的像素，向下滚动的像素。

（4）scrollIntoView()

该方法保证了元素在视口中可见。默认为true，它试图将元素的上边缘放在或尽量接近视口的上边缘。

4、属性

（1）clientWidth、clientHeight

clientHeight 属性返回元素节点可见部分的高度， clientWidth属性返回元素节点可见部分的宽度。

不包括滚动条、边框和Margin，只包含内容和它的内边距，单位为像素。

对于整张网页来说，当前可见高度（即视口高度）要从document.documentElement对象上获取，等同于window.innerHeight属性减去水平滚动条的高度。

对于<i>、<code>和<span>这些内联元素，clientWidth和clientHeight总是0

（2）clientLeft、clientTop

clientLeft 属性等于元素节点左边框（left border）的宽度， clientTop属性等于网页元素顶部边框的宽度

（3）scrollWidth、scrollHeight

scrollHeight属性返回某个网页元素的总高度， scrollWidth 属性返回总宽度，也就是元素的内容加上它的内边距再加上任何溢出内容的尺寸。这两个属性是只读属性。

默认情况下，它们包括Padding，但不包括Border和Margin。

（4）scrollLeft、scrollTop

scrollLeft属性表示网页元素的水平滚动条向右侧滚动的像素数量， scrollTop 属性表示网页元素的垂直滚动条向下滚动的像素数量。

整张网页的水平的和垂直的滚动距离，要从document.body元素上读取。

document.body.scrollLeft document.body.scrollTop

（5）offsetWidth、offsetHeight

offsetHeight 属性返回元素的垂直高度，offsetWidth 属性返回水平宽度。这两个属性值包括Padding和Border、以及滚动条。

（6）offsetLeft、offsetTop

offsetLeft 返回当前元素左上角相对于 offsetParent节点的垂直偏移， offsetTop 返回水平位移，单位为像素。通常，这两个值是指相对于父节点的位移。

七、Document

1、属性

（1）document.cookie

用来操作浏览器Cookie

（2）domain

返回当前文档的域名

（3）lastModified

包含文档修改时间的字符串

（4）location

与window对象的location属性引用同一个location对象

（5）referrer

document.referrer属性返回一个字符串，表示当前文档的访问来源，如果是无法获取来源或是用户直接键入网址，而不是从其他网页点击，则返回一个空字符串。

（6）title

文档的<title>和</title>标签之间的内容，可读写。

（7）URL

文档的URL。只读字符串而不是location对象。该属性值与location.href的初始值相同。

（8）doctype

包含了当前文档类型（Document Type Declaration，简写DTD）信息。对于HTML5文档，该节点就代表<!DOCTYPE html>。

（9）documentElement

document.documentElement属性返回当前文档的根节点（root）。它通常是document节点的第二个子节点

（10）defaultView

document.defaultView属性，在浏览器中返回document对象所在的window对象，否则返回null。

document.defaultView === window // true

（11）activeElement

document.activeElement属性返回当前文档中获得焦点的那个元素。

（12）characterSet

document.characterSet属性返回渲染当前文档的字符集，比如UTF-8、ISO-8859-1。

（13）readyState

document.readyState属性返回当前文档的状态，共有三种可能的值。

loading：加载HTML代码阶段（尚未完成解析）

interactive：加载外部资源阶段时

complete：加载完成时

2、方法

（1）document.write()、document.writeIn()

document.write()方法会将其字符串参数连接起来，然后将结果字符串插入到文档中调用它的脚本元素的位置。当脚本执行结束，浏览器解析生成的输出并显示它。

（2）查询选取的文本

标准的window.getSelection()方法返回一个Selection对象，后者描述了当前选取的一系列一个或多个Range对象。

（3）可编辑的内容

标签的HTML contenteditable属性或者用JavaScript设置对应元素的contenteditable属性，使得元素的内容变成可编辑。

<div contenteditable="true"></div>

有些浏览器会默认开启检查，如果你不需要时，可以这样设置：

<div contenteditable="true" spellcheck="false"></div>

（4）execCommand()方法

document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

Document对象的execCommand()方法可以让我们很方便的插入元素或者改变样式。

aCommandName：一个 DOMString ，命令的名称。

aShowDefaultUI：一个 Boolean 是否展示用户界面，一般为 false。Mozilla 没有实现。

aValueArgument：一些命令需要一些额外的参数值（如insertimage需要提供这个image的url）。默认为null。

八、DOM属性

HTML元素由一个标签和一组称为属性（attribute）的名/值对组成。

1、HTML属性作为Element的属性

var image = document.getElmentById("myimage")  var imgurl = image.src  //src属性是图片的URL  image.id === "myimage"  // 判定要查找图片的id

元素设置表单提交的属性。

var f = document.forms[0]; //文档中的第一个<form>f.action = "submit.php"; //设置提交的URLf.method = "POST";  //HTTP请求类型

2、获取和设置非标准HTML属性

getAttribute() //返回当前元素节点的指定属性。如果指定属性不存在，则返回null。
setAttribute() //用于为当前元素节点新增属性。如果属性已经存在，则相当于修改已存在的属性。
hasAttribute() //表示当前元素节点是否包含指定的属性。
removeAttribute() //用于从当前元素节点移除属性。

3、数据集（dataset）属性

在HTML5文档中，任意以“data-”为前缀的小写的属性名字都是合法的。

<div id="top" data-tip="title"></div>var t=document.getElementById('top');t.dataset.tip  //titlet.dataset.tip = 'title2'

4、作为Attr节点的属性

对于Element对象，attributes属性是只读的类数组对象，它代表元素的所有属性。可以用数字索引访问，也可以用属性名索引。

ocument.body.attributes[0]  //<body>元素的第一个属性document.body.attributes.bgcolor // <body>元素的bgcolor属性document.body.attributes['ONLOAD']  // <body>元素的onload属性。

属性节点对象有name和value属性，对应该属性的属性名和属性值，等同于nodeName属性和nodeValue属性。

<div id="top"></div>var t = document.getElemntById('top');t.attributes[0].name  // "id"t.attributes[0].nodeName // "id"t.attributes[0].value  // "top"t.attributes[0].nodeValue // “top"

九、CSS相关设置

1、

<div id="top"></div>var t = document.getElementById('top');t.style.fontSize = '15px';t.style.color = 'red';//或t.setAttribute('style','background:red;’);

定位属性都需要包含单位。

t.style.left = '300px' //正确

style对象的以下三个方法，用来读写行内CSS规则。

setProperty(propertyName,value)：设置某个CSS属性。
getPropertyValue(propertyName)：读取某个CSS属性。
removeProperty(propertyName)：删除某个CSS属性。

t.style.setProperty('background-color','red');t.style.getPropertyValue('background-color');t.style.removeProperty('background-color’);

只能读写内联样式（用style来设置）

2、获取引用的样式或者伪元素样式

window.getComputedStyle()

第一个参数是要获取其计算样式的元素，第二个参数也是必需的，通常是null或空字符串，但它也可以是命名CSS伪对象的字符串，如：“:before”，“:after”，“:first-line”或者“:first-letter”。

<style>  #top{ line-height:30px;}  #top:before{content:'before';color:red};</style><div id="top" style="background:red"></div>var t = document.getElementById('top');window.getComputedStyle(t,null).lineHeight  //30pxwindow.getComputedStyle(t,':before').content  // “before"

element.classList.add()   //添加element.classList.remove()  //删除element.classList.contains()  //是否包含element.classList.toggle()  //如果不存在类名就添加，否则删除

3、脚本化样式表

（1）

<style id="styleElement">     body{ background:red }  </style>document.querySelector('#styleElement').sheet  //等同于 document.styleSheets[0]

（2）开启和关闭样式表

document.styleSheets[0].disabled = true; //关闭第一张样式表//或var s = document.querySelectorAll('styleElement');s[0].disabled = true; //通过选择器选择样式表

注意：disabled属性只能在JavaScript中设置，不能在HTML语句中设置。

（3）查询、插入和删除样式表

查询

document.styleSheets[0].cssRules[0]

插入、删除

s.insertRule(' h1 { color:blue; }',0);  //h1元素默认是蓝色s.deleteRule(1);//IEs.addRule('h1','color:blue',s.cssRules.length);s.removeRule(1);

（4）创建新样式表

document.createElement('style');//或var l = document.createElement('link');l.setAttribute('rel', 'stylesheet');  l.setAttribute('type', 'text/css');  l.setAttribute('href', 'example.css');document.head.appendChild(l);document.head.appendChild(linkElm);//IEdocument.createStyleSheet()

4、CSS事件

animationstart事件：动画开始时触发。
animationend事件：动画结束时触发。
animationiteration事件：开始新一轮动画循环时触发。如果animation-iteration-count属性等于1，该事件不触发，即只播放一轮的CSS动画，不会触发animationiteration事件。

element.addEventListener("animationstart", listener, false);  element.addEventListener("animationend", listener, false);  element.addEventListener("animationiteration", listener, false);

注：转自 http://www.kancloud.cn/dennis/tgjavascript/241819

0 0