<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM对象简介</title>
</head>
<body>
<div id="test">
test
</div>
<script type="text/javascript">
var test = document.getElementById('test');
console.log(test);
console.log(test.__proto__);
console.log(test.nodeName);//通过节点方式获得节点名,输出结果div
console.log(test.tagName);//通过节点方式获得标签名,输出结果div
console.log(document.nodeName);
</script>
</body>
</html>
<!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>element对象方法</title>
</head>
<body>
<ul id="ul">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<ol id="num">
<li class="numlist">1</li>
<li class="numlist">2</li>
<li class="numlist">3</li>
<li class="numlist">4</li>
<li class="numlist">5</li>
</ol>
<script type="text/javascript">
var ul = document.getElementById('ul');
var list = ul.getElementsByTagName('li');
console.log(list.length);
var num = document.getElementById('num');
var numlist = num.getElementsByClassName('numlist');
console.log(numlist.length);
var lis1 = ul.children;//获取指定元素的子元素
console.log(lis1);
var lis2 = num.children;
console.log(lis2);
//返回集合中某个元素,可以通过下标
console.log(lis2[1]);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5中新增的document方法</title>
</head>
<body>
<!--
1.document.querySelector():返回稳定中匹配到的指定元素
//通过选择器查找
//获取匹配到第一个元素
2.document.querySelectAll():
-->
<p id="p1" class="class1">段落1</p>
<p class="class1">段落2</p>
<p>段落3</p>
<script type="text/javascript">
var p1 = document.querySelector('#p1');
console.log(p1);
var p2 = document.querySelector('.class1');
console.log(p2);
var p3 = document.querySelector('p');
console.log(p3);
var p4 = document.querySelectorAll('.class1');
console.log(p4);
console.log(p4.length);
var p5 = document.querySelectorAll('p');
console.log(p5);
console.log(p5.length);
console.log(p5[2]);
console.log(p5[2].innerHTML);
</script>
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 50px;
height: 50px;
background-color: #CCC;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="box" class="box" title="div" align="center">
</div>
<script type="text/javascript">
var box = document.getElementById("box");
var i =0;//保存用户单击盒子的次数
//为box添加单击事件
box.onclick = function(){
i++;
//单击次数为奇数，则变大
if(i%2)
{
this.style.width = '200px';
this.style.height = '200px';
this.innerHTML = '大';
}
else
{
this.style.width = '50px';
this.style.height = '50px';
this.style.color = 'red';
this.innerHTML = '小';
}
};
</script>
</body>
</html>
