《JS DOM编程艺术》读书笔记

JS对象

和C，C++非常相似

何为DOM

“D”即Document，文档。

“O”即Object，user-defined object（用户自定义）、native object（内建对象，如Array、Math）、host object（浏览器提供）。

“M”即Model

获取元素

获取id方法

document.getElementById(id)；

获取name方法，查询元素的 name 属性，如 HTML 表单中的单选按钮的 name 属性。返回元素的数组。

document.getElementsByName(name)；

获取标签方法，返回元素的数组。

document.getElementsByTagName(tag)；

获取classname，方法返回元素的数组。

document.getElementsByClassName(class)；

获取方法的结合

var shopping = document.getElementsByClassName("purchases")；
var items = shopping.document.getElementsByClassName("item")；
var items = document.getElementsByClassName(shopping，"item")；

获取&设置属性

element.getAttribute(attributename),element被审查的元素,attributename需要获得属性值的属性名称。

element.setAttribute(attributename,attributevalue),element被设置的元素,attributename需要被设置属性值的属性名称,attributevalue设置的属性值。

图片库练习

HTML

<ul>
<li>
<a href="images/1.png" title="A 1" onclick="ImgClick(1);return false;"><img src="images/1.png" alt="" width="100px"></a>
</li>
<li>
<a href="images/2.png" title="A 2" onclick="ImgClick(2);return false;"><img src="images/2.png" alt="" width="100px"></a>
</li>
<li>
<a href="images/3.png" title="A 3" onclick="ImgClick(3);return false;"><img src="images/3.png" alt="" width="100px"></a>
</li>
<li>
<a href="images/4.png" title="A 4" onclick="ImgClick(4);return false;"><img src="images/4.png" alt="" width="100px"></a>
</li>
<li>
<a href="images/5.png" title="A 5" onclick="ImgClick(5);return false;"><img src="images/5.png" alt="" width="100px"></a>
</li>
<li>
<a href="images/6.png" title="A 6" onclick="ImgClick(6);return false;"><img src="images/6.png" alt="" width="100px"></a>
</li>
</ul>
<div style="text-align:center"><img id="placeholder" src="images/1.png" alt="my image gallery"></div>

CSS

ul{
text-align: center;
}
ul li{
display: inline-block;
}

JS

var images = document.getElementsByTagName('a');
var placeholder = document.getElementById('placeholder');
var items;
function ImgClick(e) {
item=images[e-1].getAttribute("href");
placeholder.setAttribute("src",item);
}

小笔记

onclick=”return false;”//使点击无效

ul中，li间存在间隙，可通过重置ul，li的margin、padding为0，和ul的font-size=0来处理小问题，如果li中需要显示文字，则可通过单独设定font-size。也可通过删除产生这些间隙的文本节点来达到目的，详情看nodetype笔记

childNodes和childElementCount返回内容是不一样的，常用childElementCount。

nodeType

文档、元素、属性以及 HTML 或 XML 文档的其他方面拥有不同的节点类型。

存在 12 种不同的节点类型，其中具有实用意义的有3个：

1 Element，代表元素 Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference

2 Attr，代表属性 Text, EntityReference

3 Text，代表元素或属性中的文本内容。None

var children = document.getElementsByClassName('imgList')[0].childNodes; //获取了imgList中所有节点
purifyElement(children);

function purifyElement(children) {//只保留元素节点的方法
for (var i = 0; i < children.length; i++) {
if (children[i].nodetype != 1) {
children[i].remove();
}
}
}

firstChild&lastChild

firstChild===node.childNodes[0]

lastChild===node.childNodes[node.childNodes.length-1]

对一组元素有条件的绑定点击事件

var children = document.getElementsByClassName('imgList')；
for (var i = 0; i < children.length; i++) {
if (children[i].getAttribute("class")=="sss") {
children[i].onclick=function () {//function其实就是提供了一个作用域
///do·············
console.log(this);
return false;
};
}
}
//绑定点击事件1
for (var i = 0; i < images.length; i++) {
images[i].onclick=function ImgClick() {//js中并没有click事件，但是有，element.click(),模拟点击
item = this.getAttribute("src");
placeholder.setAttribute("src", item);
return false;
};
}

//绑定点击事件2
for (var i = 0; i < images.length; i++) {
images[i].onclick = function() {
ImgClick(this);
return false;
}
}
function ImgClick(obj) {
item = obj.getAttribute("src");
placeholder.setAttribute("src", item);
return false;
};

图片库升级

HTML

<div id="container">
<ul class="imgList">
<li>
<img src="images/1.png" alt="" class="img" width="100px">
</li>
<li>
<img src="images/2.png" alt="" class="img" width="100px">
</li>
<li>
<img src="images/3.png" alt="" class="img" width="100px">
</li>
<li>
<img src="images/4.png" alt="" class="img" width="100px">
</li>
<li>
<img src="images/5.png" alt="" class="img" width="100px">
</li>
<li>
<img src="images/6.png" alt="" class="img" width="100px">
</li>
</ul>
<div style="text-align:center;margin-top: 10%;">
<img id="placeholder" src="images/1.png" alt="my image gallery">
</div>
</div>
<div id="warp" style="display:none">
<div id="mask">
<img src="images/4.png" width="80%" />
</div>
</div>

CSS

html,
body {
width: 100%;
height: 100%;
}

body,
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}

#container {
width: 632px;
margin: 0 auto;
}

ul {
text-align: center;
border-bottom: 4px solid #000000;
border-top: 4px solid #000000;
border-left: 4px dashed #000000;
border-right: 4px dashed #000000;
font-size: 0;
}

ul li {
display: inline-block;
border: 2px solid #000000;
}

img {
cursor: pointer;
}

#warp {
position: absolute;
width: 100%;
height: 100%;
top: 0;
background: rgba(0, 0, 0, .7);
}

#mask {
position: relative;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

#mask img {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}

JS

var images = document.getElementsByClassName('img');
var placeholder = document.getElementById('placeholder');
var warp = document.getElementById('warp');
var mask = document.getElementById('mask');
var maskImg = mask.getElementsByTagName('img')[0];

//图片库绑定点击事件
for (var i = 0; i < images.length; i++) {
images[i].onclick=function ImgClick() {
item = this.getAttribute("src");
placeholder.setAttribute("src", item);
return false;
};
}

//中图绑定事件
placeholder.onclick = function ImgShow() {
var display = warp.style.display;
console.log(display);
if (display = "none") {
warp.style.display = "block";
OnClickImg = placeholder.getAttribute("src");
maskImg.setAttribute("src", OnClickImg);
}
}
//大图绑定事件
maskImg.onclick = function ImgHidden() {
var display = warp.style.display;
console.log(display);
if (display = "block") {
warp.style.display = "none";
}
}

JS创建元素节点

var p = document.createElement("p");
var testDiv = document.getElementById("testDiv");
testDiv.appendChild(p);
var txt = document.createTextNode("abc.");
p.appendChild(txt);