一、利用循环思想为多个标签创建事件（样例）
将多个标签创建为一个伪数组，通过for循环对每个标签创建事件.
通过变换事件可以达到不同的效果。
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<script>
var btns = document.getElementsByTagName('button')
for( var i = 0; i < btns.length; i++){
btns[i].onclick = function(){
for( var i = 0; i < btns.length; i++){
btns[i].style.backgroundColor = '';
}
this.style.backgroundColor = 'red';
}
}
</script>
</body>
btns[3].onclick时的效果
二、获取、设置、移除自定义属性值
1.获取元素的属性值
? ? ? ? 1> element.属性
? ? ? ? 2>element.getAttribute('属性')
<body>
<div id="iIDd" index="1"></div>
<script>
var div = document.querySelector('div');
//1> element.属性 一般获取的是元素自带的属性（class id等）
console.log(div.id);
// 2>element.getAttribute('属性') 获取的可以是自己添加的属性
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
</script>
</body>2.设置元素的属性值
? ? ? ?1>element.id="test"
? ? ? ?2>element.setAttribute('index',2) ?可以修改自带的属性和自定义的属性
<body>
<div id="iIDd" index="1"></div>
<script>
var div = document.querySelector('div');
// 1>element.id="test";
div.id="test";
// 2>element.setAttribute('index',2) 可以修改自带的属性和自定义的属性
div.setAttribute('index',2);
div.setAttribute('class','classn');//这里的className直接写成class
</script>
</body>
3.元素属性的移除
? ? ? ? element.removeAttribute('属性');
三、H5自定义属性
目的：为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库当中
H5规定自定义属性data-开头作为属性名并且赋值? eg.<div data-index = "1"> </div>
获取自定义属性还是使用 element.getAttribute('data-属性名')
四、节点操作
通过节点层级关系来获取元素
一般来说 节点至少拥有nodeTyp(节点类型)、nodeName(节点名称)、nodeValue(节点值)这三个基本属性? ?
元素节点 nodeType为1? 属性节点 nodeType为2? 文本节点 nodeType 为3（文本节点包括文字 空格 换行等）节点操作主要操作是元素节点
1.父节点
使用son.parentNode可以直接获取到son元素的父元素也就是样例中的box，得到的是离元素最近的父级节点? ? ? ? ? ? ?
<body>
<div class="box">
<span class="son">x</span>
</div>
<script>
// 父节点 parentNode
var son = document.querySelector('.son');
console.log(son.parentNode);
</script>
</body>2.子节点
①获取全部节点
parentNode.childNodes(标准用法)
<body>
<!-- 子节点 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<script>
var ul = document.querySelector('ul');
console.log(ul.childNodes);
</script>
子节点包括元素节点 文本节点等。样例中的文本节点为换行符，而需要专门获取里面的元素节点需要使用? 循环? 和? nodeType来判断是否为元素节点，所以一般不使用childNode来获取子节点
②只获取元素节点
????????而使用parentNode.childern(非标准的使用方法)他只返回所有的元素节点，其他节点（文本节点）不会被返回? ? ?
获取到四个节点全为元素节点
<body>
<!-- 子节点 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<script>
var ul = document.querySelector('ul');
console.log(ul.children);
</script>③获取第一个子元素和最后一个子元素
<body>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<script>
var ol = document.querySelector('ol');
console.log(ol.firstChild);
console.log(ol.lastChild);
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
// 实际使用中的常用方法
console.log(ol.children[0]);
console.log(ol.children[ol.children.length-1]);//表示最后一个
</script>
</body>
通过伪数组children来获取想要的第n个子元素
3.兄弟节点
node.nextSibling
node.PreviousSibling
<body>
<div>divv</div>
<span>spann</span>
<script>
var div = document.querySelector('div');
console.log(div.nextSibling);
console.log(div.previousSibling);
</script>
</body>node.nextElementSibling
node.previousElementSibling
<body>
<div>divv</div>
<span>spann</span>
<script>
var div = document.querySelector('div');
console.log(div.nextElementSibling);
console.log(div.previousElementSibling);
</script>
</body>?4.创建和添加节点
例如发布评论，发布后需要创建一个标签来放置评论,也称为动态创建元素节点
document.createElement('tagName')；创建
node.appendChild(child);是添加在指定父节点的子节点末端
<body>
<ul></ul>
<script>
var li = document.createElement('li');
var ul = document.querySelector('ul');
ul.appendChild(li);
</script>
</body>?若使用node.insertBefore(child,指定元素)就可以插到指定元素前面????????
<body>
<ul>
<li>111</li>
</ul>
<script>
var li = document.createElement('li');//第三行的li
var ul = document.querySelector('ul');
ul.appendChild(li);
var lli = document.createElement('li');//第一行的li
ul.insertBefore(lli,ul.children[0]);
</script>
</body>?
5.删除节点
node.removeChild(child);
<body>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
<button>删除</button>
<script>
var ul = document.querySelector('ul');
var btn = document.querySelector('button');
btn.onclick = function(){
if(ul.children.length == 0){
this.disabled = true;
}
else{
ul.removeChild(ul.children[0]);
}
}
</script>
</body>
点击删除会删掉第一个li?
6.复制节点
node.cloneNode()//括号内为true为深拷贝 为空或者false为浅拷贝 只拷贝标签不拷贝内容
<body>
<ul>
<li>1</li>
<li>11</li>
<li>111</li>
</ul>
<script>
var ul = document.querySelector('ul');
var lii = ul.children[1].cloneNode(true);//()为空为浅拷贝只复制标签不复制内容
ul.appendChild(lii);
</script>
</body>
最后一行是拷贝第一行所形成的
五、 创建元素方法
1.document.write()?
ps.文档流执行完毕会导致页面重绘
document.write('<div>111</div>');2.innerHTML
var inner = document.querySelector('.inner');
inner.innerHTML = '<a href = "#">111</a>'3.document.createElement
var create = document.querySelector('.create');
var a = document.createElement('a');
create.appendChild(a);使用innerHTML创建元素（采用数组形式拼接）效率会高一点
六、留言板（创建 添加 删除节点样例）
在文本框输入内容，发布后，先将文本框中的内容赋值给li标签，再在ul标签内添加li标签
<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul>
</ul>
<script>
//1.获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
//创建事件
btn.onclick = function(){
if(text.value == ''){
alert('请输入内容');
return false;
}
else{
//创建元素
var li = document.createElement('li');
console.log(text.value);
li.innerHTML = text.value;//赋值
//添加元素
ul.appendChild(li);
text.value = '';
}
}
</script>
</body>七、事件操作
1.注册事件（像onclick之类的）
????????1.传统注册事件
????????之前使用的onclick具有唯一性，同一元素同一事件只能处理一个函数，多的会被覆盖
????????2.方法监听注册（addEventListener）
addEventListener(事件类型，处理函数，可选参数)????????同一元素同一事件可以注册多个事件，多个事件一次执行
<body>
<button>点击</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
alert('弹出111');
})
btn.addEventListener('click',function(){
alert('弹出222');
})
</script>
</body>????????在弹出111后点击确认222也会弹出
2.删除事件（解绑事件）
1.传统删除事件
div标签只能被点击一次
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var divs = document.querySelectorAll('div');
divs[0].onclick = function(){
alert(11);
divs[0].onclick = null;
}
</script>
</body>2.方法监听注册方式
removeEventListener(事件类型，处理函数，可选参数)<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
function fn() {
alert(222);
divs[1].removeEventListener('click',fn);
}
divs[1].addEventListener('click',fn);
</script>
</body>这样也可以实现div2只被点击一次
八、DOM结构重新梳理
DOM是文档对象模型，是W3C组织推荐的处理可拓展标记语言（HTML或者XML）的标准编程接口，可以用来改变网页的内容、结构和样式。
DOM使HTML形成一颗DOM树，包括文档（整个页面）、元素（页面中的标签）和节点（页面中的所有内容，包括文档，元素，属性都是节点）
DOM中学习了创建（innerHTML、document.createElement、document.write
增添（appendChild、insertBefore）
删除（removeChild）
修改元素属性（src、href……）修改元素内容（innerHTML、innerText）修改表单元素（value、type、disable）修改元素样式（style、className）
获取元素（getElementById、ByTagName、querySelector、querySelectorAll）
利用节点获取元素（parentNode、children）
获取属性值（getAttribute）设置属性值（setAttribute） 移除属性（removeAttribute）