JavaScript DOM 编程艺术

最近把JavaScript DOM 编程艺术这本书看完了，觉得这本书很好 深入浅出地展示了渐进增强、平稳退化、结构和样式分离等编程思想，我对书中重要的知识进行了梳理总结。

一.网页

二.JavaScript

三.DOM

四.重要知识点

1.innerHTML (html属性，只有web文档支持)

(1)读取

<div id="testdiv"><p>This is <em>my</em>content</p></div>

var testdiv = document.getElementById("testdiv");

testdiv.innerHTML 为 <p>This is <em>my</em>content</p>

(2)写入

<div id="testdiv"></div>

var testdiv = document.getElementById("testdiv");

testdiv.innerHTML = "<p>This is <em>my</em>content</p>";

2.appendChild

<div id="testdiv"></div>

var testdiv = document.getElementById("testdiv");

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

para.innerHTML = "This is <em>my</em>content";

testdiv.appendChild(para);

3．createTextNode

<div id="testdiv"></div>

var testdiv = document.getElementById("testdiv");

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

testdiv.appendChild(para);

var txt= document.createTextNode("Hello world");

para.appendChild(txt);

4. insertBefore

<div id="testdiv">你好</div>

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

var txt = document.createTextNode("Hello world");

para.appendChild(txt);

var testdiv = document.getElementById("testdiv");

testdiv.parentNode.insertBefore(para, testdiv);

结果：

<p>Hello world</p>

<div id="testdiv">你好</div>

5.DOM中没有提供insertAfter函数，但是可以自己实现

<div id="testdiv">你好</div>

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

var txt = document.createTextNode("Hello world");

para.appendChild(txt);

var testdiv = document.getElementById("testdiv");

var parent = testdiv.parentNode;

if (parent.lastChild == testdiv) {

parent.appendChild(para);

} else {

parent.insertBefore(para, testdiv.nextSibling);

}

结果：

<div id="testdiv">你好</div>

<p>Hello world</p>

6.html里的样式，在DOM中用驼峰命名法

获取

<p id="example" style="color:#999999;font-family:'Arial',sans-serif"></p>

var para = document.getElementById("example");

alert(para.style.fontFamily);

设置

para.style.fontFamily=”normal”;

7.设置类名

<p id="example" style="color:#999999;font-family:'Arial',sans-serif"></p>

var para = document.getElementById("example");

para.className = "exampleClass";

获取类名

document.getElementsByClassName("exampleClass")[0].style.fontFamily;

8.定时器setTimeout

<p id="message">Whee!</p>

window.onload = function () {

var elem= document.getElementById("message");

elem.style.position = "absolute";

elem.style.left = "50px";

elem.style.top = "100px";

movement = setTimeout("moveMessage()", 5000); //5秒后执行moveMessage()

}

function moveMessage()

{

var elem = document.getElementById("message");

elem.style.position = "absolute";

elem.style.left = "200px";

elem.style.top = "100px";

}

取消定时器

ClearTimeout(movement);

9.javaScript实现动画效果

<p id="message">Whee!</p>

<p id="message2">Whoa!</p>

window.onload = function () {

var elem = document.getElementById("message");

elem.style.position = "absolute";

elem.style.left = "50px";

elem.style.top = "100px";

moveElement("message", 125, 60, 30);

var elem2 = document.getElementById("message2");

elem2.style.position = "absolute";

elem2.style.left = "50px";

elem2.style.top = "50px";

moveElement("message2", 125, 125, 30);

}

function moveElement(elementID,final_x,final_y,interval) {

var elem = document.getElementById(elementID);

var xpos = parseInt(elem.style.left);

var ypos = parseInt(elem.style.top);

if (xpos == final_x && ypos == final_y) {

return true;

}

if (xpos < final_x) {

xpos++;

}

if (xpos > final_x) {

xpos--;

}

if (ypos < final_y) {

ypos++;

}

if (ypos > final_y) {

ypos--;

}

elem.style.left = xpos + "px";

elem.style.top = ypos + "px";

var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";

movement = setTimeout(repeat, interval);

}

10.juery

(1)

var items = document.getElementsByTagName("li");

for (var i = 0; i < items.length; i++) {

alert(typeof items[i]);

}

等价于

$('li').each(function (i) {

alert(typeof this);

});

(2)

<input id="name"/>

赋值

$("#name").attr("value", "张三");

取值

$("#name").attr("value")  ;

(3)把div追加到body里

$('<div id="example">hello</div>').appendTo(document.body);

(4)初始化函数

$(function ()

{

});

(5)a标签单击事件

<a href="#">hello</a>

$('a').click(function (event) {

window.open("HtmlPage1.html");

});

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。