11月13日笔记

节点对象的方法Node.appendChild()接收一个对象节点作为参数，将其作为最后一个节点，插入当前节点。

var addCountry = function() {   var cinput = document.getElementById("country");   var cvalue = cinput.value;   var cli = "<li id='" + cvalue + "'>" + cvalue + "</li>";   var culInnerHtml = document.getElementById("_asia").innerHTML;    culInnerHtml = culInnerHtml + cli;    document.getElementById("_asia").innerHTML = culInnerHtml;};var addCountry2 = function() {    var cinput = document.getElementById("country");    var cvalue = cinput.value;    var cli = document.createElement("li");    cli.innerHTML = cvalue;    document.getElementById("_asia").appendChild(cli);};

Node.hasChildNodes()返回一个布尔值，判断当前节点是否有子节点。

var _asiaUl = document.getElementById("_asia");if (_asiaUl.hasChildNodes()) {    _asiaUl.innerHTML = "";}

Node.insertBefore()方法用于将某个节点插入当前节点的指定位置。接收两个参数，第一个参数是所要插入的节点，第二个参数是当前节点的一个子节点。新的节点将插在这个节点的前面。该方法返回被插入的新节点。

var getIndexLi = function(index) {    var _asiaChilds = document.getElementById("_asia").childNodes;    var k = 1;   for (var i = 0; i < _asiaChilds.length; i++) {      var cnode = _asiaChilds[i];      if (cnode.nodeName === 'LI') {            if (index === k) {               return cnode;         }            k++;      }   }}var addCountry3 = function() {    var cinput = document.getElementById("country");    var cvalue = cinput.value;    var cli = document.createElement("li");    cli.innerHTML = cvalue;    var _asiaEle = document.getElementById("_asia");    var cindex = document.getElementById("cindex").value;    var cele = getIndexLi(parseInt(cindex));    _asiaEle.insertBefore(cli, cele);};

Node.removeChild()方法接收一个子节点作为参数，用于从当前节点移除该子节点。返回被移除的子节点。

var removeCountry1 = function(id) {    var _asiaEle = document.getElementById("_asia");    _asiaEle.removeChild(document.getElementById(id));}

Node.replaceChild()方法用于将一个新的节点替换当前节点的某一个子节点。接收两个参数，第一个参数是用来替换的新节点，第二个参数是将要被替换的节点。

var repalceCountry = function() {   var newEle = document.createElement("LI");   newEle.innerHTML = "Tailand";    var _asiaEle = document.getElementById("_asia");    _asiaEle.replaceChild(newEle, document.getElementById("_japan"));}`Element对象1. 特征相关的属性Element.id，Element.tagName，Element.innerHTML，Element.outerHTML（包含标签定义本身）Element.classNameElement.classList:add/remove/contains/toggle/item/toString

var toggleCred = function() { var cl = document.getElementById(“_div”).classList; // cl.toggle(“cred”); if (cl.contains(“cred”)) { cl.remove(“cred”); } else { cl.add(“cred”); }}

2.盒子模型相关属性Element.clientHeight/clientWidth返回元素可见部分的高度和宽度：注意包含了 padding 的值Element.clientLeft/Top获取元素左边框、顶部边框的宽度3.相关节点的属性Element.children返回当前元素节点的所有子元素。Element.childElementCount返回当前元素节点所有子元素的个数。

var _asia = document.getElementById(“_asia”);console.log(_asia.children);console.log(_asia.childElementCount);console.log(_asia.children.length);

Element.firstElementChild/lastElementChildElement.nextElementSibling/previousElementSibling4.查找相关属性Element.querySelector()该方法接收 CSS 选择器作为参数，返回父元素第一个匹配的子元素。

• China 
• Korea 
• Japan 

var _ali = document.getElementById(“_asia”).querySelector(“.t1”);console.log(_ali); // _korea

Element.querySelectorAll()方法接收 CSS 选择器作为参数，返回一个 NodeList 对象，包含所有匹配的子元素。Element.getElementByTagName()注意是标签的参数大小写不敏感Element.getElementsByClassName()方法接收类名，返回当前节点所有匹配类名的元素Element.closest()方法接收 CSS 选择器作为参数，返回当前元素节点最接近的父元素

Here is _d

Here is _d1

Here is _d2

Here is _d3

var _d1 = document.getElementById(“_d3”).closest(“.ddd”);
console.log(_d1.textContent); // _d1

5.其他方法Element.remove()将当前节点从 DOM 树上删除。``Attribute 对象HTML 元素中包含标签名和若干个键值对，这个键值对我们称为“属性”（Attribute）在 DOM 中，我们很少直接对属性进行操作，一般都是元素节点对象（Element对象）来操作属性。1.Element.attributes属性返回一个类似数组的动态对象示例：遍历元素节点的所有属性

var d1Ele = document.getElementById(“_d3”).nextElementSibling;
if (d1Ele.hasAttributes()) {
var d1Att = d1Ele.attributes;
for (var i = 0; i < d1Att.length; i++) {
console.log(d1Att[i].name + “:” + d1Att[i].value);
}
} else {
console.log(“No attributes To show!”);
}

2. 元素节点对象的属性HTML元素节点的标准属性，会自动成为元素节点对象的属性。

var _abaidu = document.getElementById(“_abaidu”);
console.log(_abaidu.href); // http://www.baidu.com
console.log(_abaidu.target); // _blank
console.log(_abaidu.test); // undefined

虽然在Html中大小写是不敏感的，但是在 Javascript 中，属性大小写敏感，而且属性一般都是采用小写。有些HTML属性名是 Javascript 的保留字，转为 Javascript 属性时，需要改名字，主要由class-className,for-htmlFor3.属性操作的标准方法getAttribute()setAttribute()上述两个方法对所有的属性都适用（包含用户自定义的方法）_

abaidu.setAttribute(“href”,”http://www.sina.com“);
console.log(_abaidu.getAttribute(“href”));

_abaidu.setAttribute(“test”,”xxx”);
console.log(_abaidu.getAttribute(“test”));

hasAttribute()removeAttribute()4.dataset 属性有时需要在 Html 上附加数据，供 Javascript 脚本使用。一种解决方法是自定义属性。虽然自己随意定义的属性名可以通过相关的方法进行定义和赋值，但是会使得HTML元素的属性不符合规范，导致网页的HTML代码通不过校验。更好的解决方法是，使用标准提供的data-*属性。再使用元素对象的 dataset 属性对自定义的属性进行操作。注意：data-后面的属性有限制，只能包含字母、数字、连词线（-）、点（.）、冒号（:）和下划线(_)。而且属性名不应该使用大写字母。比如data-helloWorld，我们不这么写，而写成data-hello-world。在转成dataset的键名的时候，连词线后面如果跟着一个小写字母，那么连词线会被移除，该小写字母转为大写字母，其他字符不变。

console.log(_abaidu.getAttribute(“data-hello-world”));
console.log(_abaidu.dataset.helloWorld); // 驼峰命名

冒泡排序法（从大到小）<script type="text/javascript">        function lg(a){        console.log(a)        }        var mm=new Array(12,124,354,32,43);        for (i=1;i<mm.length;i++){            for(j=0;j<mm.length-i;j++){                if(mm[j]<mm[j+1]){                var nn=mm[j];                mm[j]=mm[j+1];                mm[j+1]=nn;                }            }        }        lg(mm);        </script>coding coffee网页增加

    <title>CODING COFFEE</title>    <style type="text/css">        h1{            color: blue;            font-size: 60px;            /*visibility: hidden;*/            transition:font-size 5s;            transition:transform 5s;            }        /*h1:hover{            font-size: 500px;            transform: rotate(360deg);        }   */        hr{            width: 60%;            border: 2px dashed #eee;        }        div{            text-align: center;        }        p{            text-align: left;            text-indent: 2em;            word-spacing: 5px;            line-height: 50px;        }        .upper{            text-transform: uppercase;        }        #ppp{            vertical-align: middle;        }        .content-wrapper{            width: 1000px;            /*border: 2px solid red;*/            /*border-width: 2px;            border-style: dotted;            border-color: red;*/            margin:50px auto;            padding:10px 20px 30px 40px;            /*border: none;*/            /*border-top: 2px solid red;*/            box-shadow: 10px 10px 100px 10px #eee;        }        .img{            float: left;            width: 50%;        }        .para{            float: right;            width:50%;        }        /*span{            padding-top: 50px;            border: 2px solid red;            background-color: green;            display: block;        }*/    </style></head><body>    咖啡名：        <p>            <input id="name" type="text" value="">        </p>        描述：        <p>            <textarea id="description" type="text" cols="20" rows="10"></textarea>         </p>        图片地址：        <p>            <input id="img_url" type="text" value="">        </p>        <button onclick="addCoffee()">新增咖啡</button>    <div id="wrap"><h1 id="main">CODING COFFEE MENU</h1>        <hr>        <div class="content-wrapper">            <div class="img">                <img src="./c2.jpg">            </div>            <div class="para">                <h2>蓝山咖啡</h2>                <p>                    源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装，让你用自己喜爱的方式体验这<span>别具风味</span>的一杯。                </p>            </div>            <div style="clear: both;"></div>        </div>        <hr>        <div class="content-wrapper">            <div class="img">                <img src="./c2.jpg">            </div>            <div class="para">                <h2>蓝山咖啡</h2>                <p>                    源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的<span>馥郁醇厚</span>。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。                </p>            </div>            <div style="clear: both;"></div>        </div>        <hr>        <div class="content-wrapper">            <div class="img">                <img src="./c2.jpg">            </div>            <div class="para">                <h2>蓝山咖啡</h2>                <p>                    源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的<span>馥郁醇厚</span>。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。                </p>            </div>            <div style="clear: both;"></div>        </div>        <hr>        <div class="content-wrapper">            <div class="img">                <img src="./c2.jpg">            </div>            <div class="para">                <h2>蓝山咖啡</h2>                <p>                    源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的<span>馥郁醇厚</span>。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。                </p>            </div>            <div style="clear: both;"></div>        </div>        <hr>        <div class="content-wrapper">            <div class="img">                <img src="./c2.jpg">            </div>            <div class="para">                <h2>蓝山咖啡</h2>                <p>                    源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的<span>馥郁醇厚</span>。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。                </p>            </div>            <div style="clear: both;"></div>        </div>        <hr>        <div class="content-wrapper">            <div class="img">                <img src="./c2.jpg">            </div>            <div class="para">                <h2>蓝山咖啡</h2>                <p>                    源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的<span>馥郁醇厚</span>。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。                </p>            </div>            <div style="clear: both;"></div>        </div>        <hr>        <div class="content-wrapper">            <div class="img">                <img src="./c2.jpg">            </div>            <div class="para">                <h2>蓝山咖啡</h2>                <p>                    源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的<span>馥郁醇厚</span>。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。                </p>            </div>            <div style="clear: both;"></div>        </div>        <hr>    </div>    <script type="text/javascript">        function lg(a){        console.log(a);    }        function addCoffee(){            var name = document.getElementById('name').value;            var desc = document.getElementById('description').value;            var img_url = document.getElementById('img_url').value;            var html1 = '<div class="content-wrapper"><div class="img"><img src="'+img_url+'"></div>';            var html2 = '<div class="para"><h2>'+name+'</h2>';            var html3 ='<p>'+desc+'</p></div>';            var html4 = '<div style="clear: both;"></div></div><hr>';            var add = html1+html2+html3+html4;            var newhtml = document.getElementById('wrap').innerHTML+add;            document.getElementById('wrap').innerHTML = newhtml;        }     </script></body>

网页删除

    <title>CODING COFFEE</title>    <style type="text/css">        h1{            color: blue;            font-size: 60px;            /*visibility: hidden;*/            transition:font-size 5s;            transition:transform 5s;            }        /*h1:hover{            font-size: 500px;            transform: rotate(360deg);        }   */        hr{            width: 60%;            border: 2px dashed #eee;        }        div{            text-align: center;        }        p{            text-align: left;            text-indent: 2em;            word-spacing: 5px;            line-height: 50px;        }        .upper{            text-transform: uppercase;        }        #ppp{            vertical-align: middle;        }        .content-wrapper{            width: 1000px;            /*border: 2px solid red;*/            /*border-width: 2px;            border-style: dotted;            border-color: red;*/            margin:50px auto;            padding:10px 20px 30px 40px;            /*border: none;*/            /*border-top: 2px solid red;*/            box-shadow: 10px 10px 100px 10px #eee;        }        .img{            float: left;            width: 50%;        }        .para{            float: right;            width:50%;        }        /*span{            padding-top: 50px;            border: 2px solid red;            background-color: green;            display: block;        }*/    </style></head><body>    咖啡名：        <p>            <input id="name" type="text" value="">        </p>        <button onclick="delCoffee()">删除咖啡</button>    <div id="wrap"><h1 id="main">CODING COFFEE MENU</h1>        <hr>        <div class="content-wrapper" id="蓝山咖啡">            <div class="img">                <img src="./c2.jpg">            </div>            <div class="para">                <h2>蓝山咖啡</h2>                <p>                    源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装，让你用自己喜爱的方式体验这<span>别具风味</span>的一杯。                </p>            </div>            <div style="clear: both;"></div>        </div>        <hr>        <div class="content-wrapper" id="拿铁咖啡">            <div class="img">                <img src="./c2.jpg">            </div>            <div class="para">                <h2>拿铁咖啡</h2>                <p>                    源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的<span>馥郁醇厚</span>。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。                </p>            </div>            <div style="clear: both;"></div>        </div>        <hr>        <div class="content-wrapper" id="卡布奇诺">            <div class="img">                <img src="./c2.jpg">            </div>            <div class="para" >                <h2>卡布奇诺</h2>                <p>                    源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的<span>馥郁醇厚</span>。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。                </p>            </div>            <div style="clear: both;"></div>        </div>        <hr>    </div>    <script type="text/javascript">        function lg(a){        console.log(a);    }        function delCoffee(){            var name = document.getElementById('name').value;            var delcontent=document.getElementById(name);            document.getElementById('wrap').removeChild(delcontent);        }     </script></body>

网页修改

    <title>CODING COFFEE</title>    <style type="text/css">        h1{            color: blue;            font-size: 60px;            /*visibility: hidden;*/            transition:font-size 5s;            transition:transform 5s;            }        /*h1:hover{            font-size: 500px;            transform: rotate(360deg);        }   */        hr{            width: 60%;            border: 2px dashed #eee;        }        div{            text-align: center;        }        p{            text-align: left;            text-indent: 2em;            word-spacing: 5px;            line-height: 50px;        }        .upper{            text-transform: uppercase;        }        #ppp{            vertical-align: middle;        }        .content-wrapper{            width: 1000px;            /*border: 2px solid red;*/            /*border-width: 2px;            border-style: dotted;            border-color: red;*/            margin:50px auto;            padding:10px 20px 30px 40px;            /*border: none;*/            /*border-top: 2px solid red;*/            box-shadow: 10px 10px 100px 10px #eee;        }        .img{            float: left;            width: 50%;        }        .para{            float: right;            width:50%;        }        /*span{            padding-top: 50px;            border: 2px solid red;            background-color: green;            display: block;        }*/    </style></head><body>    修改哪个咖啡:    <p>    <input id='typename' type="text" value="">    </p>    咖啡名：        <p>            <input id="name" type="text" value="">        </p>        描述：        <p>            <textarea id="description" type="text" cols="20" rows="10"></textarea>         </p>        图片地址：        <p>            <input id="img_url" type="text" value="">        </p>        <button onclick="editCoffee()">修改咖啡</button>    <div id="wrap"><h1 id="main">CODING COFFEE MENU</h1>        <hr>        <div class="content-wrapper" id="蓝山咖啡">            <div class="img">                <img src="./c2.jpg">            </div>            <div class="para">                <h2>蓝山咖啡</h2>                <p>                    源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装，让你用自己喜爱的方式体验这<span>别具风味</span>的一杯。                </p>            </div>            <div style="clear: both;"></div>        </div>        <hr>        <div class="content-wrapper" id="拿铁咖啡">            <div class="img">                <img src="./c2.jpg">            </div>            <div class="para">                <h2>拿铁咖啡</h2>                <p>                    源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的<span>馥郁醇厚</span>。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。                </p>            </div>            <div style="clear: both;"></div>        </div>        <hr>        <div class="content-wrapper" id="卡布奇诺">            <div class="img">                <img src="./c2.jpg">            </div>            <div class="para">                <h2>卡布奇诺</h2>                <p>                    源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的<span>馥郁醇厚</span>。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。                </p>            </div>            <div style="clear: both;"></div>        </div>    </div>    <script type="text/javascript">        function lg(a){        console.log(a);    }        function editCoffee(){            var typename=document.getElementById('typename').value;            var parelement=document.getElementById(typename);            var name = document.getElementById('name').value;            var desc = document.getElementById('description').value;            var img_url = document.getElementById('img_url').value;            var newname =document.createElement('h2')            newname.innerHTML=name;            var newdes =document.createElement('p')            newdes.innerHTML=desc            var newimg =document.createElement('img')            newimg.setAttribute('src',img_url)            parelement.children[0].replaceChild(newimg,parelement.children[0].children[0])            parelement.children[1].replaceChild(newname,parelement.children[1].children[0])            parelement.children[1].replaceChild(newdes,parelement.children[1].children[1])        }     </script></body>

“`