您的位置：首页 > Web前端 > JavaScript

《JavaScript DOM 编程艺术》小结（一）

2017-05-08 18:33 519 查看
《JavaScript DOM 编程艺术》（第2版）【 0501—0510 】

节点

节点树

    


节点关系

    


方法

方法描述
getElementById()返回带有指定 ID 的元素。
getElementsByTagName()返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()返回包含带有指定类名的所有元素的节点列表。
appendChild()把新的子节点添加到指定节点。
removeChild()删除子节点。
replaceChild()替换子节点。
insertBefore()在指定的子节点前面插入新的子节点。
createAttribute()创建属性节点。
createElement()创建元素节点。
createTextNode()创建文本节点。
getAttribute()返回指定的属性值。
setAttribute()把指定属性设置或修改为指定的值。

访问

  访问 HTML 元素等同于访问节点

通过使用 getElementById() 方法

通过使用 getElementsByTagName() 方法

通过使用 getElementsByClassName() 方法

function  getElementsByClassName(node, classname){
if(node.getElementsByClassName){
// 适应现有方法
return node.getElementsByClassName(classname);
}else{
var results = new Array();
var elems = node.getElementsByTagName("*");
for(var i=0; i<elems.length; i++){
if(elems[i].className.indexOf(classname) != -1){
results[results.length] = elems[i];
}
}
return results;
}
}


经典实例：JavaScript图片库

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Gallery</title>
<link rel="stylesheet" href="css/main.css" media="screen">
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="images/car.jpg" title="this is car">
<img src="images/car.jpg" alt="car" />
</a>
</li>
<li>
<a href="images/girl.jpg" title="this is girl">
<img src="images/girl.jpg" alt="girl" />
</a>
</li>
<li>
<a href="images/tky.jpg" title="this is tky">
<img src="images/tky.jpg" alt="tky" />
</a>
</li>
<li>
<a href="images/cartop.jpg" title="this is cartop">
<img src="images/cartop.jpg" alt="cartop" />
</a>
</li>
</ul>
<img id="placeholder" src="images/car.jpg" alt="my image gallery">
<p id="description">Choose an image.</p>
<style>
body{
font-family: "Helvetica","Arial",serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1{
color: #333;
background-color: transparent;
}
a{
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
img{
display: block;
clear: both;
}
#placeholder{
display: block;
clear: both;
width: 500px;
height: 300px;
border: 2px solid #fff;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.4);
}
#imagegallery{
list-style: none;
padding: 0;
}
#imagegallery li{
float: left;
padding: 1em;
display: inline-block;
}
#imagegallery li a img{
border: 0;
width: 100px;
border: 1px solid #ffffff;
}
</style>
<script>
// 展示图片
function showPic(whichpic){
if(!document.getElementById("placeholder")) return false;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
// nodeName 属性总是返回一个大写字母的值，即使元素在HTML文档中是小写字母
if(placeholder.nodeName != "IMG") return false;
placeholder.setAttribute("src", source);
if(document.getElementById("description")){
// 三元操作符，优化函数
var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
var description = document.getElementById("description");
if(description.firstChild.nodeType == 3){
description.firstChild.nodeValue = text;
}
}
return true;
}

function prepareGallery(){
// 检查点
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for(var i=0; i<links.length; i++){
links[i].onclick = function(){
// 如果图片切换成功，返回true; 如果图片切换不成功，返回false
return showPic(this) ? false : true;;
}
}
}

// addLoadEvent函数
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent(prepareGallery);
</script>
</body>
</html>




addLoadEvent函数

/*
* 把现有的window.onload事件处理函数的值存入变量oldonload
* 如果在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它
* 如果在这个处理函数上已经绑定了一些函数，就把新函数添加到现有指令的末尾
*/
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航