<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>节点获取</title>
</head>
<!--
节点的类型:
元素节点：1
属性节点:2
文本节点:3
注释节点：8
document:9
-->
<!--获取节点
firstChild：返回当前节点的首个子节点
lastChild:返回当前节点最后一个子节点
nodeName:返回当前节点名称
nodeType:返回节点类型值
nodeValue:返回当前节点的值
nextSibling：返回同一树层级中指定节点之后紧跟的节点
previousSibling:返回同一树层级中指定节点前一个节点
parentNode:返回当前节点的父节点
childNodes：返回当前元素节点的所有子节点的集合
-->
<body>
<ul id="ul"><li>HTML5</li><li>CSS3</li><li>JS</li><li>jQuery</li></ul>
<ul id="num">
<li id="one">1</li><!--id的值是one-->
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script type="text/javascript">
console.log(document.firstChild);//<!DOCTYPE html>
var ul = document.getElementById('ul');
console.log(ul.firstChild);//<li>HTML5</li>
console.log(ul.firstChild.nodeName);//li
console.log(ul.lastChild);//<li>jQuery</li>
var num = document.getElementById('num');
console.log(num.firstChild);//#text
console.log(num.lastChild);//#text
//注意：文本也属于节点
console.log(num.lastChild.nodeName);//#text
console.log(ul.nodeName);//UL
console.log(ul.nodeType);//1
console.log(num.lastChild.nodeType);//3
console.log(ul.nodeValue);//null
console.log(ul.firstChild.nodeValue);//null
console.log(ul.firstChild.nextSibling);//<li>CSS3</li>
console.log(num.firstChild.nextSibling);//<li>1</li>
console.log(num.firstChild.nextSibling.nextSibling);//#text
console.log(ul.lastChild.previousSibling);//<li>JS</li>
console.log(ul.lastChild.previousSibling.previousSibling);//<li>CSS3</li>
console.log(num.lastChild.previousSibling);//<li>4</li>
console.log(num.lastChild.parentNode);//<ul id="num"></ul>
console.log(num.lastChild.previousSibling.parentNode);//<ul id="num"></ul>
var one = document.getElementById('one');
console.log(one.nextSibling);//<!--id的值是one-->
console.log(one.nextSibling.nodeType);//8
console.log(document.nodeType);//9
console.log(document.nodeName);//#document
console.log(ul.childNodes);//NodeList(4) [li, li, li, li]
console.log(num.childNodes);//NodeList(10) [text, li#one, comment, text, li, text, li, text, li, text]
console.log(document.firstChild);//<!DOCTYPE html>
console.log(document.firstChild.nextSibling);//<html>...</html>
console.log(document.firstChild.nextSibling.childNodes);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>节点追加</title>
</head>
<!--节点追加的方法
document.createElement():创建元素节点
document.createTextNode():创建文本节点
document.createAttribute():创建属性节点
.value:为属性节点赋值
appendChild():在指定元素的子元素列表末尾添加一个节点
setAttributeNode():设置或者更改指定名称的属性节点
getAttributeNode():返回指定名称的属性节点
insertBefore():为当前节点增加一个子节点（追加到指定子节点之前）
insertBefore(新节点,追加元素的位置节点)
-->
<body>
<ul id="ul">
<li>1</li>
<li>2</li>
<!--任务:追加一个列表元素-->
</ul>
<script>
var h2 = document.createElement('h2');
console.log(h2);//<h2></h2>
var p = document.createElement('p');
console.log(p);//<p></p>
var text = document.createTextNode('hello JS');
console.log(text);//"hello JS"
var attr = document.createAttribute('align');//创建属性节点
attr.value="center"; //为属性节点赋值
h2.setAttributeNode(attr) ;//为h2元素添加属性节点
h2.appendChild(text);//h2元素添加文本节点
document.body.appendChild(h2);
var ul = document.getElementById('ul');
var li = document.createElement('li');
var three = document.createTextNode('3');
li.appendChild(three);
ul.appendChild(li);
//ul.insertBefore(li,null);
//ul.insertBefore(li);
//在子节点最后插入新节点
//ul.insertBefore(li,ul.firstChild);
//在第一个子节点签名加入一个新节点
console.log(ul.getAttributeNode('id'));
console.log(h2.getAttributeNode('align'));
//输出属性节点类型值
console.log(attr.nodeType);//属性节点类型值：2
console.log(attr.nodeValue);//属性节点名字：center
console.log(attr.nodeName);//属性名：align
//任务：输出ul节点id属性的相关内容
//获取ul的id属性节点
var ulattr = ul.getAttributeNode('id');
console.log(ulattr.nodeName);//id
console.log(ulattr.nodeType);//2
console.log(ulattr.nodeValue);//ul
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>节点删除</title>
<style type="text/css">
.strong{ font-weight: bolder; color: red;}
</style>
</head>
<body>
<ul><li>PHP</li><li>HTML</li><li class="strong">CSS</li><li>JS</li></ul>
</body>
<script type="text/javascript">
//1.获取第三个li节点
var child = document.getElementsByTagName('li')[2];
console.log(child);
//2.获取元素的class属性值
var attr =child.getAttributeNode('class');
console.log(attr);
//3.删除元素的class属性值 .removeAttributeNode()
console.log(child.removeAttributeNode(attr));
//4.删除元素
console.log(child.parentNode.removeChild(child));
//任务删除ul中的第一个元素
var ul = document.getElementsByTagName('ul')[0];
var first = ul.firstChild;
ul.removeChild(first);
//任务删除ul中的最后一个元素
var last = ul.lastChild;
ul.removeChild(last);
//任务：自己设计一个购物车页面，完成购物车页面中商品数量的加减，商品价格的统计
</script>
</html>
