js笔记4（DOM树结构的获取和修改）

DOM数结构：Document Object Model

        DOM树将HTML文档类似于一个倒挂着的树，只有一个根，就是document；在HTML文档中所有的元素、属性、文本、包括注释都为一个dom节点/dom对象/dom元素

        获取元素/节点：

                注意严格区分大小写

                注意找到了输出出来是一个HTML标签的样子才是dom节点/元素，才能执行操作，否则是一个类数组

        通过HTML特性获取:

                1、id获取：var  自定义名=document.getElementById("id值")

                它会在dom树中根据元素的id获取dom的节点，id获取到的元素可以直接操作，因为它是唯一不重复的。

                找到了，变量保存的就是对应的元素，没找到，保存的为null

                2、标签名获取：var 自定义名=document.getElemnentsByTagName("标签名")；

//保存的是当前dom树中所有的tr标签，就成了一个类数组        
    var trr= document.getElementsByTagName("tr");
//保存的是已经获取到的tr变量中的所有td，他也是一个集合（trr是上面那条已经拿到的td父亲，就可以把document换成tr的变量名
    var tdd=trr.getElementsByTagName("td")
//[0]表示保存的是页面所有button的第一个
    var btn= document.getElementsByTagName("button")[0];

                   只要保存的不是单个元素，它就是一个集合/类数组，不能去操作，只能循环这个类数组获取到每一个元素，才能操作

                3、class名获取：var 自定义名=document.getElementsByClassName("class名")

//保存的是当前dom树中所有的tr标签，就成了一个类数组  
var leiming=document.getElementsByClassName("a1");
//保存的是已经获取到的a1变量中的所有a2（a1的子元素）（因为class名可以重复，这返回的也是一个集合
var leiming=a1.getElementsByClassName("a2");
//[0]表示保存的是页面所有class=a1的第二个
var leiming=document.getElementsByClassName("a1")[1];

        通过找到的元素关系获取：

                父元素：xx.parentNode; //单个元素    
                子元素：xx.Chlidren; //集合
                第一个儿子：xx.firsElementChild; //单个元素
                最后一个儿子：xx.lastElementChild; //单个元素
                前一个兄弟：xx.previousElementSibling; //单个元素
                后一个兄弟：xx.nextElementSibling; //单个元素

                                他们之前可以连续操作

//[0]表示保存的是页面所有button的第一个，已经找到某个人了
var btn= document.getElementsByTagName("button")[0];
//找到btn的父元素，是单个元素，可以操作
var parent=btn.parentNode
//找到btn的子元素，是集合，需要加下标或者遍历数组拿到一个才能操作
var parent=btn.children
//找到btn的最后一个子元素，是单个元素，可以操作
var parent=btn.firstElementChild
//找到btn的最后一个子元素，是单个元素，可以操作
var parent=btn.lastElementChild
var parent=btn.firstElementChild
//找到btn的前一个兄弟，是单个元素，可以操作
var parent=btn.previousElementSibling
//找到btn的后一个兄弟，是单个元素，可以操作
var parent=btn.nextElementSibling

        操作找到的元素：

                操作HTML元素的内容，标签之中的东西：找到的元素名.innerHTML

                   它能识别HTML标签                       找到的元素名.innerHTML="修改的内容"；

               纯文本修改：找到的元素名.innerText="修改的内容"；它不识别标签，会把标签当做内容输出

                value属性：专为单标签input准备的：input.value；修改：input.value="值";

        通过HTML标签属性：

                获取HTML属性值：找到的元素名.getAttribute("属性名")---简化版：找到的元素名.属性名

                修改HTML属性值：找到的元素名.setAttribute("属性名",属性值)---简化版：找到的元素名.属性名="属性值"；

                简化版两个缺陷：找class得：找到的元素名.className；自定义的属性不能操作                

        通过元素的样式：获取：找到的元素名.style.width；修改：找到的元素名.style.width="300px"；

                有些CSS样式有-的得改成驼峰命名：border-top--borderTop

在js中绑定标签： 找到的元素名.οnclick=function(){操作代码}

                        找到的类数组需要再找到单个的元素才能绑定事件：

for(var i=0;i<parent.length;i++){   
    btn[i].onclick=function(){}
}

        比如上方有很多元素绑定了点击事件，想要使用当前绑定事件的元素可以用this：

btn[i].onclick=function(){
//this代表当前次点击事件的元素，                             
   var dj = this.parentNode.previousElementSibling.innerHTML;
}