DOM:document object module 文档对象模型
DOM就是描述整个html页面中节点关系的图谱，如下图。
1，通过ID，获取页面中元素的方法；（上下文必须是document）
document.getElementById('元素的ID');
2，通过name属性获取一组元素；（上下文必须是document）
<body>
<input name = 'cniao' type='radio' value='菜'>
<input name = 'cniao' type='radio' value='菜菜'>
<script>
var x = document.getElementByName('cniao');
console.log(x);
</script>
</body>
3，在整个文档中，通过元素的标签名获取一组元素；（上下文可以是document，也可以是一个元素）
document.getElementsByTagName('元素标签名')
<body>
<div>
<p> 这是第一个P标签</p>
<p> 这是第二个P标签</p>
<p> 这是第三个P标签</p>
</div>
<script>
document.getElementByTagName('p')[].innerHTML = '你好，P标签'；
//当中括号里面的1改为[*]时，获取的是文档中的所有元素。
</script>
</body>
4，通过类名获取元素，用法与getElementsByTagName类似；（上下文可以是document，也可以是一个元素）
getElementsByClassName;
5，以一个元素对象返回一个文档的文档元素；（只能是html这个标签）
document.documentElement;
6，获取body标签的方法；（是能是body标签）
document.body
7，匹配指定选择器的第一个元素；（上下文可以是document，也可以是一个元素）
querySelector()
8，通过选择器获取一组元素；(上下文可以是document，也可以是一个元素)
querySelectorAll
For循环
for （1开始执行的代码块，2定义循环条件，3循环被执行之后执行）{
被执行的代码块
};
for (var i = ; i<; i++){
console.log( i );
};
循环里的关键字
break 跳出循环； continue 跳过本次循环；
function cniao(){
var x = '', i = ;
for (=;i<;i++){
if (i==){
break; //循环到3时，就会结束；后面的数字不会循环出来；
};
x = x + '该数字' + i + '<br>'
};
};
function cniao(){
var x = '', i = ;
for (=;i<;i++){
if (i==){
continue; //跳过 i = 3这次循环，后面的数字会继续循环出来；
};
x = x + '该数字' + i + '<br>'
};
};
While循环
while循环会在指定条件为真时循环执行代码块；
while (条件){
需要执行的代码
};
while ( i< ){
x = x + "The number is " + i + "<br>";
i ++;
}
do/while 循环
循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真，就会重复这个循环；
do{
需要执行的代码；
}
while (条件)
do{
x = x + "This number is " + i + "<br>";
i ++;
}
while ( i< );
getAttribute()方法，获取链接的target属性值；
<body>
<a href = '' target = 'black'>对象属性</a>
<p id = "demo">点击显示目标属性</p>
<button onclick="cniao">点我</button>
<script>
function cniao(){
var a = document.getElementsByTagName('a')[];
document.getElementById("demo").innerHTML = a.getAttribute('taget')；
}
</script>
</body>
setAttribute()方法设置元素的属性类型；
<body>
<input value = "ok">
<button onclick = 'cniao'>点我</buttom>
<script>
function cniao(){
document.getElementsByTagName('input')[].setAttribute('type','button');
};
</script>
</body>
removeAttribute()方法删除指定的属性；
<body>
<h1 style = 'color:red'>Hello World</h1>
<button onclick = 'cniao'>点我</button>
<script>
function cniao(){
document.getElementsByTagName('h1')[].removeAttribute('style');
};
</script>
</body>