2017.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;
};

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++;
      }
   }


};

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.className
Element.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/lastElementChild
Element.nextElementSibling/previousElementSibling

4.查找相关属性

Element.querySelector()
该方法接收 CSS 选择器作为参数，返回父元素第一个匹配的子元素。
<ul id="_asia">
<li id="_china" class="t2">China&nbsp;<input type="button" id="btn" value="X" onclick="removeCountry1('_china');"/></li>
<li id="_korea" class="t1">Korea&nbsp;<input type="button" id="btn" value="X" onclick="removeCountry1('_korea');"/></li>
<li id="_japan" class="t1 t2">Japan&nbsp;<input type="button" id="btn" value="X" onclick="removeCountry1('_japan');"/></li>
 </ul>
var _ali = document.getElementById("_asia").querySelector(".t1");
console.log(_ali); // _korea
Element.querySelectorAll()
方法接收 CSS 选择器作为参数，返回一个 NodeList 对象，包含所有匹配的子元素。
Element.getElementsByTagName()
注意是标签的参数大小写不敏感
Element.getElementsByClassName()
方法接收类名，返回当前节点所有匹配类名的元素
Element.closest()
方法接收 CSS 选择器作为参数，返回当前元素节点最接近的父元素
<div id="_d" class="ddd">
  Here is _d
 <div id="_d1"  class="ddd">
  Here is _d1
  <div id="_d2">
   Here is _d2
   <div id="_d3">
    Here is _d3
   </div>
  </div>
 </div>
</div>


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

5.其他方法

Element.remove()
将当前节点从 DOM 树上删除。

创建新的 HTML 元素

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
 实例
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>


<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);


var element=document.getElementById("div1");
element.appendChild(para);
</script>

删除已有的 HTML 元素

以下代码演示了如何删除元素：
实例
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);

</script>

 元素节点对象的属性

HTML元素节点的标准属性，会自动成为元素节点对象的属性。
1
2
3
4
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-htmlFor

3.属性操作的标准方法

getAttribute()
setAttribute()
上述两个方法对所有的属性都适用（包含用户自定义的方法）
_
1
2
3
4
5
6
7
8
9
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的键名的时候，连词线后面如果跟着一个小写字母，那么连词线会被移除，该小写字母转为大写字母，其他字符不变。
1
2
3
4
5
6
7
8
9
10
11
12
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>