11.13第九节课

一、节点对象的方法

1、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);
};

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

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

3、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);

};

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

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

5、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 选择器作为参数，返回父元素第一个匹配的子元素。

• China 

三、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-htmlFor
3.属性操作的标准方法
getAttribute()
setAttribute()
上述两个方法对所有的属性都适用（包含用户自定义的方法）

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

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

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); // 驼峰命

四、课后作业

1、CODING COFFEE菜单页的增删改功能
（1）新增节点
代码：

 咖啡名<p>
<input  id="name" type="text" value=""></p>

咖啡描述<p>
<textarea id="describe" type="text" value="" cols="20" rows="10"></textarea></p>

图片地址<p>
<input id="imgid" type="text" value=""></p>

<button onclick="addCoffee()">新增咖啡</button>

var addCoffee=function(){
    var name1=document.getElementById('name').value;
    var des=document.getElementById('describe').value;
    var img=document.getElementById('imgid').value;
    var add1='<div class="a"><div class="img"><img src="'+img+'"></div>';
    var add2='<div class="coffee1"><h2>'+name1+'</h2>';
    var add3='<p>'+des+'</p></div><div style="clear:both;"></div></div>';
    var add=add1+add2+add3;
    var newadd=document.getElementById('main').innerHTML+add;
    document.getElementById('main').innerHTML=newadd;

} 

结果显示：

（2）删除节点
代码：

<button onclick="removeCoffee()">删除咖啡</button>
var removeCoffee=function(){
   var name2=document.getElementById('name').value;
   var main1=document.getElementById('main');
   main1.removeChild(document.getElementById(name2));
}

结果显示：
（3）修改节点
代码：

<p><input id="replace" type="text" value="">
<button onclick="replaceCoffee()">修改咖啡</button></p>
var replaceCoffee=function(){
    var newimg=document.getElementById('imgid').value;
    var newname=document.getElementById('name').value;
    var newdes=document.getElementById('describe').value;
    var newele=document.createElement('a');
    newele.setAttribute('id','newname');
    newele.innerHTML='<div class="a"><div class="img"><img src="'+newimg+'"></div><div class="coffee1"><h2>'+newname+'</h2><p>'+newdes+'</p></div><div style="clear:both;"></div></div>';
    var id=document.getElementById('replace').value;
    var all=document.getElementById('main');
    all.replaceChild(newele,document.getElementById(id));

}

结果显示