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

JS对象

和C，C++非常相似

何为DOM

1. “D”即Document，文档。
2. “O”即Object，user-defined object（用户自定义）、native object（内建对象，如Array、Math）、host object（浏览器提供）。
3. “M”即Model
   

获取元素

1. 获取id方法
   document.getElementById(id)；
2. 获取name方法，查询元素的 name 属性，如 HTML 表单中的单选按钮的 name 属性。返回元素的数组。
   document.getElementsByName(name)；
3. 获取标签方法，返回元素的数组。
   document.getElementsByTagName(tag)；
4. 获取classname，方法返回元素的数组。
5. document.getElementsByClassName(class)；
6. 获取方法的结合

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

获取&设置属性

1. element.getAttribute(attributename),element被审查的元素,attributename需要获得属性值的属性名称。
2. 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);
    }

小笔记

1. onclick=”return false;”//使点击无效
2. ul中，li间存在间隙，可通过重置ul，li的margin、padding为0，和ul的font-size=0来处理小问题，如果li中需要显示文字，则可通过单独设定font-size。也可通过删除产生这些间隙的文本节点来达到目的，详情看nodetype笔记
3. 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);