Javascript DOM 编程艺术（第2版）

最新推荐文章于 2023-11-20 00:10:19 发布

余余余鱼

最新推荐文章于 2023-11-20 00:10:19 发布

阅读量225

点赞数

分类专栏： javascript笔记

本文链接：https://blog.csdn.net/weixin_38092043/article/details/85028419

版权

javascript笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

数组

var beatles = Array(4);

Beatles [0] = ‘John’;

var beatles = [‘John’,’Paul’,’Gorge’];

对象

var lenmon = Object();

lemon.classname = ‘John’;

var lemon = {name:”John”,year:1940,living:false}

比较操作符

===

不仅比较值而且比较变量的类型

DOM

D：文档

O：对象

用户定义对象

内建对象 内建在javascript里的对象如Array Math 和Data

宿主对象 由浏览器提供的对象

Window对象对应浏览器窗口本身，这个对象的属性和方法统称为BOM浏览器对象模型

M：模型

DOM把文档看为一棵树

看文档里有多少元素节点

Document.getElementsByTagName("*");

图片库实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="new_file.css"/>
		<script src="new_file.js"></script>
		<script >
			window.onload=function(){
				if(!document.getElementById) return false;
				if(!document.getElementsByClassName) return false;
				if(! document.getElementById("placeholder"));
				
				var gallery = document.getElementById("imagegallery");
				var image = document.createElement("img");
				image.setAttribute("id","placeholder");
				image.setAttribute("src","image/u=1976971154,3672095769&fm=27&gp=0.jpg");
				image.setAttribute("alt","my image gallery");
				
				var description = document.createElement("p");
				description.id = "description";
				var txt = document.createTextNode("趴着");
				description.appendChild(txt);
				
				insertAfter(image,gallery);
				insertAfter(description,image);
				
				var oImg = document.getElementById("placeholder");
				var oShow = document.getElementsByClassName("show");
			for(var i=0;i<oShow.length;i++){
				oShow[i].onclick=function(){
				var source = this.getAttribute("href");
					if(oImg.getAttribute("src"))																																																		
					oImg.setAttribute("src",source);
					var oP = document.getElementById("description");
					var desciption = this.getAttribute("title");
					oP.childNodes[0].nodeValue = desciption;
					return false;
				}
				}
				function insertAfter(newElement,targetElement) {
		  var parent = targetElement.parentNode;
		  if (parent.lastChild == targetElement) {
		    parent.appendChild(newElement);
		  } else {
		    parent.insertBefore(newElement,targetElement.nextSibling);
		  }
		}
				
};
			
			
		</script>
	</head>
	<body>
		<h1>抱抱表情包</h1>
		<div>
			<ul id="imagegallery">
			<li>
				<a class="show" href="image/微信图片_20181211205206.jpg" title="趴着"><img src="image/微信图片_20181211205206.jpg" /></a>
				
			</li>
			<li>
				<a class="show" href="image/微信图片_20181211205218.jpg" title="写字"><img src="image/微信图片_20181211205218.jpg" /></a>
				
			</li>
			<li>
				<a class="show" href="image/微信图片_20181211205222.jpg" title="戳脸"><img src="image/微信图片_20181211205222.jpg"/></a>
				
			</li>
			<li>
				<a class="show" href="image/微信图片_20181211205226.jpg" title="爱心"><img src="image/微信图片_20181211205226.jpg" /></a>
				
			</li>
		</ul></div>
		
		
		
	</body>
</html>

childNodes获取所有节点数，children获得所有元素节点
nodeValue获得节点的值
获得p里的文本: p对象.fristchild.nodeValue
在给元素添加了事件处理函数后，一旦事件发生，相应的代码就会执行，执行后的代码会返回一个true或false给函数，如果返回值为false，onclick函数就认为"这个链接没有被点击 ”,它的默认行为就不会被调用
function insertAfter(newElement,targetElement){
   var parent = targetElement.parentNode;
   if(parent.lastElemetChild == targetElement){
       parent.appendChild(newElement);
   }else{
       parent.insertBefore(newElement,targetElement.nextElementSibling);
   }
}

平稳退化与渐进增强

“平稳退化”是在浏览器没有JavaScript功能，或没有开启JavaScript功能情况下，我们解决这种问题的方式；

（虽然某些功能无法应用，但基本操作可以完成）

“渐进增强”是在浏览器开启JavaScript功能后，如果浏览器版本不支持某些JavaScript能力，我们解决这种问题的方式。

性能考虑

尽量少访问DOM，用变量存放DOM的搜索结果（查询DOM在中的元素，浏览器都会遍历整个DOM树）
合并放置脚本
压缩脚本文件（在精简副本上加min字样，保留原副本）

将abbr里的内容和title的值通过数组由定义列表来实现

<script>
function displayAbbreviations(){
	var abbreviations = document.getElementsByTagName("abbr");
	
	if(abbreviations.length<1)return false;
	//判断文档是否亦缩略语
	
	
	var defs = new Array();
	for(var i=0;i<abbreviations.length;i++){
		var definition = abbreviations[i].getAttribute("title");
		var key = abbreviations[i].innerText;
		defs[key] = definition;
	}
	//创建数组defs 下标存放key也就是title，值为definition也就是缩略语
	
	var dlist = document.createElement("dl");
	for(key in defs){
		var definition = defs[key];
		
		var dtitle = document.createElement("dt");
		var dtitle_text = document.createTextNode(key);
		dtitle.appendChild(dtitle_text);
		//dtitle key
		var ddscription = document.createElement("dd");
		var ddscription_test = document.createTextNode(definition);
		ddscription.appendChild(ddscription_test);
		//ddscription definition
		dlist.appendChild(dtitle);
		dtitle.appendChild(ddscription);
		document.body.appendChild(dlist);
		
	}
}

addLoadEvent(displayAbbreviations);
</script>

更改tr颜色

css3伪类选择器

tr：nth-child（odd）{} 单数行

tr：nth-child（even）{} 双数行

function stripeTables(){
    if(document.getElementsByTagName) return false;
    var tables = document.getElementsByTagName("table");
    var odd,rows;
    for(var i = 0;i<table.length;i++)
    {
        odd = false;
        rows = table[i.getElementByTagName("tr");
        for(var j=0;j<rows.length;j++)
        {
            if(odd==true){
                row[j].style.backgroundColor = "#fc";
                odd = false;}
            else{
                odd = true;}
        }
    }
}

window.onload会在页面加载完之后立即执行

addClass函数

function addClass(element,value) {
  if (!element.className) {
    element.className = value;
  } else {
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;
    element.className = newClassName;
  }
}

余余余鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript DOM 编程艺术（第2版）

数组var beatles = Array(4);Beatles [0] = ‘John’;var beatles = [‘John’,’Paul’,’Gorge’];对象var lenmon = Object();lemon.classname = ‘John’;var lemon = {name:”John”,year:1940,living:false}...
复制链接

扫一扫

专栏目录