js之DOM基础

目录

• 获取DOM元素
• 动态操作DOM元素
• DOM的节点以及属性

获取DOM元素

• document.getElementById 一个元素

1. 通过ID名称获取元素，元素是个对象;元素都是对象数据类型的；
2. 如果获取不到，获取结果是null
3. 如果名字相同，只获取第一个
4. getElementById的上下文只能是document；

• [context].getElementsByTagName 元素集合

通过标签名来获取元素；得到是一个元素集合；
getElementsByTagName 方法支持元素作为该方法的上下文；

• [context].getElementsByClassName 元素集合

通过class名称获取DOM元素集合；
结果也是一个复数，如果需要获取具体的某个元素，需要加上索引；

• document.getElementsByName 节点集合

通过name属性来获取元素集合；一般用于表单元素；

• document.documentElement 获取整个HTML对象
• document.body 获取整个BODY对像
• document.head 获取整个HEAD对像
• [context].querySelector 一个元素对象
• [context].querySelectorAll 获取元素集合
• ......

动态操作DOM元素

1. document.createElement: 创建一个元素
   document.createElement(标签名)
2. appendChild 向容器的末尾添加子节点
   容器.appendChild(元素)
   box.appendChild(newDiv)
   3.insertBefore : 向容器中的某个元素前面插入新元素
   容器.insertBefore(newChild,oldChild)
   box.insertBefore(newDiv,first)
3. removeChild : 删除子节点
   容器.removeChild(oldChild)
4. replaceChild: 用新的子节点替换老的子节点
   容器.replaceChild(newChild,oldChild)
5. cloneNode : 克隆一份同样的元素
   cloneNode的参数一个是true，代表深度克隆，将子孙节点也克隆出来
   false：如果不传就是false；浅克隆；
   var divs = box.cloneNode(true);
6. getAttribute : 获取行间属性所对应的属性值；没有获取到是null;
   setAttribute : 设置行间属性所对应的属性值
   setAttribute(属性名，属性值)
removeAttribute(属性名): 移除行间属性
7. classList; add remove replace 类名的增删改

box.className="a"
box.classList.add("a")
box.classList.remove("a")
box.classList.replace("a","b")// 第一个参数是旧的，后面是新的class

DOM的节点以及属性

node：节点，浏览器认为在一个HTML页面内的所有内容都是节点（包括标签、注释、文本文字等）

• 元素节点：HTML标签
• 文本节点：文字内容（高版本浏览器会把空格和换行也当做文本节点）
• 注释节点：注释内容
• document文档节点
• ...

元素节点
nodeType：1
nodeName：大写标签名（在部分浏览器的怪异模式下，我们写的标签名是小写，它获取的就是小写...）
tagName：获取当前元素的标签名（获取的标签名一般都是大写），常用这个方法
nodeValue：null

文本节点
nodeType：3
nodeName：#text
nodeValue：文本内容

注释节点
nodeType：8
nodeName：#comment
nodeValue：注释内容

文档节点
nodeType：9
nodeName：#document
nodeValue：null

1. childNodes : 当前元素所有的子节点
2. children : 当前元素的所有的子元素节点；
3. parentNode : 获取当前元素的父亲节点 document 是根节点，他的父亲节点是null;
4. previousSibling : 上一个哥哥节点
   previousElementSibling : 上一个哥哥元素节点 （IE8以下是不兼容的）
5. nextSibling : 下一个弟弟节点
   nextElementSibling : 下一个弟弟元素节点；（IE8以下是不兼容的）
6. firstChild : 第一个子节点
   firstElementChild : 第一个子元素节点 （IE8以下是不兼容的）
7. lastChild : 最后一个子节点
   lastElementChild : 最后一个子元素节点 （IE8以下是不兼容的）

    // 获取上一个哥哥元素节点，兼容所有浏览器；
    function getBrother(curEle) {
        var pre = curEle.previousSibling;
        while(pre){ //如果pre存在
            if(pre.nodeType===1){
                return pre;
            }
            pre = pre.previousSibling;// pre等于哥哥节点的哥哥节点；
        }
    }
    var last= document.getElementById("last");
    console.log(getBrother(last));

//或使用函数递归
 function getBrother(curEle) {
        var pre = curEle.previousSibling;
        if(pre){
              if(pre.nodeType===1){
                  return pre;
               }else{
                    return getBrother(pre); 
                  } 
         }
   }