JavaScript DOM 编程艺术(第2版)

前言

  • DOM:Document Object Model

第二章

数组

可以使用

var x = Array();
var x = [ 1, 2, 3 ]

来定义数组,第一行括号中可以不填,可以填入数组大小,或者直接填入数组内容(不必是相同内容)。也可以直接用中括号填入内容。

除此之外,可以使用 x[“abc”] 来使用关联数组。

对象

var x = Object();
x.a = 1;
x.b = 2;

诸如此类,或者

var x = {propertyName: value, propertyName: value};

运算符

支持字符串拼接。

=== 表示全等运算符,会比较变量类型和值。

第三章

对象

包含用户定义对象,内建对象,宿主对象。

获取对象

getElementById 返回单个对象

getElementsByTagNamegetElementsByClassName 返回数组。

使用方法为

document.getElementById("example_id")
document.getElementsByClassName("example_class")
document.getElementsByTagName("example_tag")

获取设置属性

object.getAttribute("property_name")
object.setAttribute("property_name", "value")

第四章

点击例子

<a href="https://sakunight.xyz" onclick="return false;">12321</a>

onclick 中可加入 js 语句,返回 false 表示不执行默认行为(打开链接)。

childNodesnodeType

注意 childNodes 会把所有类型的子节点计入,不止包含元素节点。

可以使用 nodeType 判断节点的类型,例如元素节点的值为 1,属性节点的值为 2,文本节点的值为 3。

注意若在文档中 div 紧接着下一个标签,之间也会插入一个 #textchildNode

获得 p 标签中的内容

<p id = "description">abcdefg</p>

可以用

document.getElementById("description").childNodes[0].nodeValue

若内容中有其他的标签则会停下。

注意对于 nodeValue,元素节点值是 undefinednull,文本节点值是文本自身,属性节点值是属性的值。

其余属性及方法

node.firstChildnode.lastChild

第五章

Javascript 平稳退化

即使浏览器不支持 Javascript,用户也能使用基本功能。

弹出窗口

window.open(url, name, features);

分别表示链接,新窗口名字和各种属性。

伪协议

<a href="javascript:popUp('http://baidu.com');">test</a>
<script>
    function popUp(winUrl) {
        window.open(winUrl, "popUp", "width=480, height=360");
    }
</script>

和上文内嵌 onclick 一样不建议,因为不能平稳退化。

另外,内嵌函数可以设置 href 属性的值实现平稳退化。

整体添加行为

/* 称为分离 JavaScript */
var links = document.getElementsByTagName("a");
for (var i=0; i<links.length; i++) {
    if (links[i].getAttribute("class") == "popup") {
        links[i].onclick = function() {
            popUp(this.getAttribute("href"));//在前文定义
            return false;
        }
    }
}

若有多个文档则不能保证 document 指代了所有的文档,于是可以修改为

window.onload = prepareLinks;// 全部加载完
function prepareLinks() {
    var links = document.getElementsByTagName("a");
    for (var i=0; i<links.length; i++) {
        if (links[i].getAttribute("class") == "popup") {
            links[i].onclick = function() {
                popUp(this.getAttribute("href"));
                return false;
            }
        }
    }
}

对象检测

检测浏览器是否支持某些语法,例如

if (document.getElementById) {  }

注意不加小括号。

性能优化

DOM 效率较低,不宜乱用。

第六章

匿名函数

例如

object.onclick = function() {}

onclickthis

this 用于指代当前出发条件 onclick 的对象。

另外 onclick 也可以用键盘触发。

addLoadEvent

用于添加 window.onload 执行的函数。

也可以手动向 window.onload 添加。

注意这个函数需要自行定义。

nodeName

返回标签名称,注意是大写,例如 “IMG”

onkeypress

按下任意键盘键时触发。

HTML-DOMDOM Core

//e.g.
//DOM Core
element.getAttribute("src");
//HTML-DOM
element.src

第七章

document.write

不建议使用,该方法可以在文档中插入内容,但是会替换掉原来的,因此违背了“行为应该与表现分离”的原则。

innerHTML

文档内容。

createElement

例如 var para = document.createElement("p");

随后使用 appendChild 插入为指定节点的子节点。

文本节点使用 createTextNode(text)

insertBefore

parentElement.insertBefore(newELement, targetElement)

可以实现在某一个元素的前面插入内容。

nextSibling

下一个兄弟元素。

Ajax

定义

异步加载页面内容

XMLHttpRequest 对象

作为脚本与服务器通信的通道。

//IE 中(不同版本格式不同)
ActiveXObject("Msxml2.XMLHTTP.6.0");
ActiveXObject("Msxml2.XMLHTTP.3.0");
ActiveXObject("Msxml2.XMLHTTP");
//其他
XMLHttpRequest();

兼容所有浏览器的写法

function getHTTPObject() {
    if (typeof XMLHttpRequest == "undefined")
        XMLHttpRequest == function () {
            try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
                catch (e) {}
            try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
                catch (e) {}
            try { return new ActiveXObject("Msxml2.xmlhttp"); }
                catch (e) {}
            return false;
        }
    return new XMLHttpRequest();
}

注意必须使用 new 来创建。

open 方法

三个参数,第一个指定请求类型(GET POST SEND),第二个指定服务器上的文件,第三个指定是否以异步方式发送和处理(true false

onreadystatechange 函数

是一个事件处理函数,属于 XMLHttpRequest ,类似于 onclick,在 readyState 改变时触发。

readyState 属性

0 表示未初始化,1 表示正在加载,2 表示加载完毕,3 表示正在交互,4 表示完成

可以在 onreadystatechange 函数中加入 if 判定 readyState4 时访问服务器返回数据。

responseText 属性

以文本字符串形式保存的服务器返回的数据

responseXML 属性

一个 DocumentFragment 对象,可以用 DOM 方法(比如 appendChild )处理。

注意

XMLHttpRequest 发送的请求只能访问与其所在 HTML 处于同一个域中的数据。

有些浏览器会限制 Ajax 请求使用的协议。

在发送请求后,浏览器不会停止执行脚本,而是会继续。

渐进增强与 Ajax(Hijax)

使用 Hijax 拦截普通的请求,然后使用 XMLHttpRequest 来替代。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇