JavaScript权威指南读书笔记——第十五章脚本化文档

来源：互联网发布：淘宝流量来源怎么获取? 编辑：程序博客网时间：2024/06/07 03:40

选取文档元素

d啊多数客户端JavaScript程序运行时总是在操作一个或多个文档元素。可以使用全局变量document来引用Document对象。

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

通过ID选取元素

通过使用Document对象的getElementById()方法选取元素。

//  返回根据这个Id查找的Element对象var elt = document.getElementById("id");

通过名字获取元素

通过使用Document对象的getElementsByName()方法选取元素。但是由于Name不是唯一的，所有返回的是一个类数组对象（NodeList），可以向操作数组一样操作该对象。

var etls = document.getElementsByName("");

通过标签名选取元素

通过使用Document对象的getElementsByTagName()方法选取元素。也是返回一个NodeList

var elts = document.getElementsByTagName("");

通过CSS类选取元素

通过使用Document对象的getElementsByClassName()方法选取元素。

var elts = document.getElementsByClassName("");

通过CSS类选择器选择元素

这里写图片描述

Document对象有两个方法可以根据CSS类选择器选取元素，只要将CSS类选择器的字符串形式传入到参数中就可以选取元素。

querySelectorAll()

//  获取所有div属性为a的元素，放回的NodeList对象和上面的不同，这次返回的不是实时的。document.querySelectoryAll("div[name=a]");

querySelector()

//  只返回第一个匹配到的元素document.querySelectoryAll("div[name=a]");

文档结构

作为节点树的文档

Document对象、它的Element对象和文档中表示文本的Text对象都是Node对象。Node定义了一下重要属性：

parentNode
childNodes
firstChild、lastChild
nextSibling、previoursSibling
nodeType
nodeValue
nodeName

作为元素的文档

Element对象的children属性。和childNodes类似，不同之处在于它只包含Element对象。

注意：Text和Commont节点没有children属性。

firstElementChild,lastElementChild
nextElementSibling,previoursElementSibling
childElementCound

属性

HTML属性作为Element的属性

HTML标签的属性在JavaScript转换成Element对象后可以直接使用点操作符来操作。

//  获取img元素var image = document.getElementById("myImage");//  src属性是图片的URLvar imgurl = image.src;

获取和设置非标准HTML

getAttribute()、setAttribute()、hasAttribtue()和removeAttribute()

数据集属性

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

HTML5还在Element对象上定义了dataset属性。dataset.x一个个保存data-x属性的值。

<div id="mydiv" data-my-a="abcd"></div>

var elt = document.getElementById("mydiv");//  a的值就是abcdvar a = elt.dataset.myA;

作为Attr节点的属性

Node类型定义了attributes属性。对于非Element对象的任何节点，该属性为null。对于Element对象，attributes属性是只读的类数组对象，它代表元素的所有属性

//  下面两行代码是相同的意思//  <body>元素的bgcolor属性document.body.attributes["bgcolor"];document.body.attributes.bgcolor;

元素的内容

作为HTML的元素的内容

innerHTML

标签内的文本，不包含该Element的标签

outerHTML

标签内的文本，包含该Element的标签

insertAdjacentHTML()

第一个参数

beforebegin
- 插入到该元素头标签之前
afterbegin
- 插入到该元素头标签之后
beforeend
- 插入到该元素尾标签之前
afterend
- 插入到该元素尾标签之后

第二个参数是要插入的文本

作为纯文本的内容元素

Element对象的textContext属性可以获取标签内的纯文本，不包含子标签，但包含子标签的纯文本。

IE4中引入了innerText属性，和textContext功能相同，如果textContext不能使用就是用innerText属性。

作为Text节点的元素内容

nodeValue属性，它保存Text节点的内容。该属性可读/写。

CharacterData定义了data属性，它和nodeValue的文本相同。

创建、插入和删除节点

创建节点

document对象有几个方法可以创建节点：

createTextNode(“Text节点的内容”);

createElement(“创建节点的标签名”);

createDocumentFragment()创建一个DocumentFragment作为容临时容器

插入节点

Element对象的insertBefore()和appendChild()都可以添加节点成为自己的子节点。

appendChild()只有一个参数就是要添加的节点元素，该方法会将元素添加到尾部。

insertBefore()有两个参数，第一个参数是待插入的节点，第二个是已存在的节点，会将新节点插入到该节点前面。

如果调用appendChild()或insertBefore()将已存在文档中的一个节点再次插入，那个节点将自动从它当前的位置删除并在新的位置重新插入。

删除节点

在待删除节点的父节点上调用removeChild()方法可以，再将待删除节点作为参数传入就可删除节点。

n.parentNode.removeChild(n);

替换节点

replace()方法删除一个子节点并用一个新节点取而代之。在父节点上调用该方法，第一个参数为新节点，第二个参是需要代替的节点。

n.parentNode.replaceChild(document.createTextNode("aaaa"),n);

使用DocumentFragement

和Document节点一样，DocumentFragment是独立的，而不是任何其他文档的一部分。它的parentNode总是null。它可以有任意多的子节点。

DocumentFragment的特殊之处在于它使得一组节点被当做一个节点看待。如果给appendChild()、replaceChild()传递一个DocumentFragment，其实是将该文档片段的所有字节点插入到文档中，而非本身。

文档和元素的几何形状和滚动

文档坐标和视口坐标

文档坐标是针对整个文档而言

视口坐标是针对浏览器的视口而言

Window对象的pageXOffset和pageYOffset属性是普安段浏览器窗口滚动条的位置。

查看元素的几何尺寸

调用元素的getBoundingClientRect()方法可以获取一个代表元素几何尺寸的对象。获得的坐标是在视口中的位置

对象的返回值的属性

left
top
right
button

getClientRects()方法和getBoundingClientRect()方法类似，不过返回的是一个只读的类数组对象，每个对象和上面所返回的对象一样。如果一些标签被分成多块，那该返回会吧每一小块的对象都加入数组中。

滚动

Window对象的scrollTo()方法接收一个点的X和Y坐标，并作为滚动条的偏移量设置。坐标针对文档坐标。scroll()方法和该方法同义。

Window对象的scrollBy()和scrollT()方法一样，不过是针对视口坐标。

关于元素尺寸、位置和溢出的更多信息

offsetWidth
offsetHeight
offsetLeft
offsetTop
offsetParent

clientWidth
clientHeight
clientLeft
clientTop

scrollWidth
scrollHeight
scrollLeft
scrollTop

查询选取的文本

window.getSelection()方法返回一个Selection对象。toString()方法是Selection对象中最重要的也广泛实现了的特性，它返回选取的纯文本。

阅读全文

0 0

JavaScript权威指南读书笔记——第十五章 脚本化文档