【JavaScript】关于DOM的详解

1.DOM概述：
所谓的dom (document object model)，指的就是文本对象模型，DOM和标签之间的关系密不可分，document对象指的是html中所有对象，html标签通过浏览器解析成DOM节点。一个页面有很多的html标签，那么就对应有很多DOM节点。
2.dom元素的获取：

• document.getElementsByClassName("") ；
  得到的是一个集合 ，使用规则是 数组方式

• document.getElementsByName("") ；
  得到nodes 类型的元素节点集合 使用规则 数组方式

• document.getElementById("")；
  通过元素的id来寻找，得到单个对象，直接使用

• document.getElementsByTagName("") ；
  通过元素的名称获取 得到的也是一个集合

var but=document.getElementsByClassName("but");     //获取到了网页里面的按
//获取到单个元素之后操作元素
    console.log(but);
//innerHTML  元素的HTML内容
   but.innerHTML="按钮";  
//不能这样写，因为js里面不能进行隐式迭代（即不能操作一堆元素）
   but[0].innerHTML="按钮";
   but[1].innerHTML="按钮";
//也可以按如下方式来写
   for(var i=0;i<but.length;i++){
        but[i].innerHTML="按钮";
    }

动态创建dom元素：（两种方式）
document.createElement() ；
//创建的是一个object对象，通过appendchild()添加
var str="";
//innerHTML();

3.DOM元素的属性：
可以进行获取或设置某个节点的属性值。

• innerHTML 节点（元素）的文本值，获取/设置节点内容
• parentNode 设置节点元素的父节点相关属性
• childNodes节点元素的子元素
• setAttribute设置自定义属性
• getAttribute使用自定义的属性

    //找元素的父级元素
    var liData=document.getElementById("lilist");
    console.log(liData.parentNode);
    console.log(liData.parent);           // 无效
    console.log(liData.parentElement);
    /*找元素的同胞兄弟*/
    console.log(liData.nextSibling);
    console.log(liData.nextElementSibling); 
        //这两条找的是liData的下一个兄弟元素
    console.log(liData.previousElementSibling);
    console.log(liData.previousSibling);      
    //这两条找的是liData的前一个兄弟元素

注：找父元素里面的子节点 ，有两个属性 childNodes和children
二者的区别： childNodes返回的是所有的节点， children返回的是元素节点。