DOM元素相关

dom元素基础

1. 获取元素

1. document.getElementById()。通过id获取某个元素。

  var id=document.getElementById('one');

2.getElementsByTagName();根据标签名获得带有指定标签名的所有对象的集合,以伪数组形式存储（无论元素个数为几个，都如此）。
document.getElementsByTagName()，获取文档中的指定标签元素:

    var divs=document.getElementsByTagName('div');

element.getElementsByTagName()，获取某个元素（父元素）中的指定标签元素:

   var ol=document.getElementsByTagName('ol');
   var lis=ol[0].getElementsByTagName('li');

3.document.getElementsByClassName('类名')；根据类名获取元素对象集合。

  var f=document.getElementsByClassName('f');

4.document.querySelector('选择器')；根据指定选择器返回第一个元素对象。

   var firstBox=document.querySelector('.box')；
   var firstDiv=document.querySelector('#one')；
   var firstLi=document.querySelector('li')；

5.document.querySelectorAll('选择器')；根据指定选择器返回所有元素对象集合。代码类似上面的4.
6.document.body。获取body元素。

var bodyE=document.body;

7.document.documentElement；获取html元素。

var htmlE=document.documentElement;

8.element.getAttribute();获取自定义属性值。
9.element.parentNode;获取当前元素的父节点。

var li=document.querySelector('li')；
var ul=li.parentNode;

10.parent.children;获取当前元素的所有子元素节点。

var ul=document.querySelector('ul')；
var lis=ul.children;
var liOne=ul.children[0];
var liLast=ul.children[ul.children.length-1]

2.元素创建

1. innerHTML。在当前元素内创建新元素。(采用数组拼接方式效率比下面的2高，但结构会稍微复杂一些)

var id=document.getElementById('one');
id.innerHTML='<li>123</li>';

2.document.createElement()，创建节点(必须添加到元素中才可以从界面看到)。（效率比前者低一些，但结构更清晰）

var div=document.getElementById('one');
var p=document.createElement('p');
div.appendChild(p);

3.元素添加

1.element.appendChild()。追加元素，类似于数组里的push.

var div=document.getElementById('one');
var p=document.createElement('p');
div.appendChild(p);

2.element.insertBefore。在指定元素的前面添加元素。

var div=document.getElementById('one');
var p=document.createElement('p');
div.insertBefore(p,div.children[0]);

4.元素修改

1. document.innerHTML；修改元素内容。

var id=document.getElementById('one');
id.innerHTML='第一个元素';

2. 修改元素的src、title、href、id、alt等。

var  img=document.getElementById('one');
img.src='修改值'；

3. 修改表单的属性type,value,disabled(是否被禁用)，checked(是否选中)等。

var btn=document.querySelector('button')；
btn.disabled=true;

4. 修改样式属性，产生的是行内样式。例backround,width,height,display等。
   1. element.style;

   var div=document.getElementById('one');
   div.style.backgroundColor='blue';
   

   2.element.className;提前写好一个.class的css样式，然后给指定元素添加类名。

   .change{
   color：#fff;
   font-size:14px;
   }
   var div=document.querySelector('div')；
   div.className='one change';
   (one为原类名)
   

   3.element.setAttribute();修改或设置自定义属性值（h5规定自定义属性以data-开头）。

   var div=document.querySelector('div')；
   div.setAttribute('data-index',2);
   

5.元素删除

1.node.removeChild(child);

 var div=document.querySelector('div')；
 div.removeChild(div.children[0]);

2.element.removeAttribute()，移除属性。

var div=document.querySelector('div')；
div.removeAttribute('data-index');

6.结点拷贝

node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容

 var ul = document.querySelector('ul');
 var lili = ul.children[0].cloneNode(true);
 ul.appendChild(lili);