JavaScript脚本化文档下

发表于 | 分类于

JavaScript脚本化文档下

属性

HTML 元素由一个标签和一组称为属性（attribute）的键值对组成。例如 a 标签的 href 属性，img 标签 src 属性

HTML 属性作为 Element 的属性

表示 HTML 文档元素的 HTML Element 对象定义了读\写属性，它们映射了元素的 HTML 属性。

HTMLElement 定义了通用的 HTTP 属性（如 id、标题 lang 和 dir）等属性，以及事件处理程序属性（如 onclick）。并且特定的类型元素定义了特定的属性。例如：

1
2
3
4
5
6
7
8
var image = documment.getElementById("myiamge")
var imgurl = images.src	//src属性是图片的URL
image.id === "myimage"  //判定是否是要查找的图片id

/* 类似的，也可以设定表单提交的URL */
var f = document.forms[0]

f.action = "http://XXX"

表示 HTML 属性的值通常是字符串，如 input 输出文本的值。 需要注意的是，这个属性是通过 API 来获取和设置的，并不能删除该属性。设想一下，没有有输入值的输出框。

非标准的HTML属性

Element 类型定义了 getAttribute()和setAttribute() 方法来查询和设置非标准的 HTML 属性。

1
2
3
4
5
 var image = document.images[0]
 
 var witth = parseInt(image.getAttribute('WIDTH'))

image.和setAttribute('class', 'thumbnail')

通常情况下getAttribute() 返回字符串，并不会返回数值、布尔值、对象。对于 HTML 元素来说，属性名字不会区分大小写

1
2
3
4
test1111.getAttribute('class')
"xxx"
test1111.getAttribute('CLASS')
"xxx"

Element 类型 定了其他两个相关方法，hasAttribute() 和 remove Attribute() ，用来检查命名属性是否存在和完全删除。

元素的内容

inerHTML 与 outerHTML ⚠️

  • inerHTML
    在元素上设置该属性，用新字符串内容替换元素当前内容

  • outerHTML

    • 查询 outerHTML 时，返回的字符串包含被查询元素的开头和结尾标签
    • 在设置 outerHTML 时，元素本身将会被新内容替换

作为纯文本

在文档中插入纯文本，标准的方法是用 Node 的 textContent 属性来实现。

⚠️ IE的兼容性 >= IE9，在 IE 中，可以用 innerText 属性替代

1
2
3
4
5
var para = document.getElementByTagName("p")[0

var text = para.textContent

para.textContent = "Hello World!"

作为Text节点的元素内容

❓ 作用不是很明确，详见犀牛书p381

创建、插入和删除节点

1
2
3
4
5
6
7
8
9
10
// 从指定的URL，异步加载和执行脚本
function loadsync(url) {
	var head = document.getElementByTagName("head")[0]
	
	var s = document.createElement("script")
	
	s.src = url
	
	head.appendChild(s)
}

创建节节点

  • createElement()

    • 创建新的 Element 节点可以使用 Document 对象的 createElement() 方法。
    • 给方法传递元素的标签名：对 HTML 文档来说该名字不区分大小写，对 XML 文档来说则需要区分大小写。

  • 创建 Text 节点

    • var newnode = document.createTextNode("text node content")

插入节点

一旦有了一个新节点，可以用 appendChild() 或 insertBefore()。

appendChild() 是在需要插入的 Element 节点删调用

insertBefore() 类似于前者，它需要接受两个参数，第一个参数就是待插入的节点，第二个参数是已经存在的节点

1
2
3
4
5
6
7
8
9
10
// 将child节点插入到parent中，使其成为第n个子节点
function insertAt(parent, child, n) {
	if( n < 0 || n > parent.childNodes.length) 
		throw new Error("invalid index")
	
	else if( n == parent.childNodes.length)
		parent.appendChild(child)
		
	else parent.insertBefore(child, paretn.childNodes[n])
}

删除和替换节点

removeChild() 方法是从文档中删除一个节点

1
n.parentNode.removeChild(n)

replaceChild() 方法删除一个子节点并用一个新节点取而代之。

1
n.parentNode.replaceChild(document.createTextNode("[ REDACTED ]"), n)

生成目录表

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 查询窗口滚动条的位置
function getScrollOffsets(w){
	// 使用指定窗口，如果不带参数则使用当前窗口
	w = w || window
	
	// 除了IE8 及更早的版本，其他浏览器都能用
	if (w.pageXOffset != null) 
		return {x: w.pageXOffset, y: w.pageYOffset}
		
	// 对标准模式下的IE
	var d  = w.document
	if (document.compatMode == "css1Compat")
		return {x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop}
		
	// 对怪异模式下的浏览器
	return {x: d.body.scrollleft, y: d.body.scrollTop}
}
1
2
// 获得在视口坐标中的位置，返回left、right、top、bottom属性的对象
var box = e.getBoundingClientRect()

判断元素在某点

getBoundingClientRect() 方法能确定元素在视口中的位置

elementFromPoint() 方法判定视口指定位置有什么元素

滚动

1
2
3
4
5
6
7
// 获得文档和视口的高度，offsetHeight会在下面解释
var documentHeight = document.documentElement.offsetHeight

var viewportHeight = window.innerHeight

// 然后滚动让最后一页在视口中可见
window.scrollTo(0, documentheight - viewprotHeight)