DOM笔记

• DOM笔记
  • 获取元素
    • 获取指定元素
    • 获取子元素&兄弟元素&父元素
    • 获取第一&最后一个子元素
  • 节点操作
    • 克隆节点 - cloneNode()
    • 添加节点 - appendChild()
    • 插入节点 - insertBefore()
    • 移除节点 - removeChild()
  • 创建结构
    • document.write()
    • element.innerHtml
    • document.createElement()
  • 标签的自定义属性操作
    • setAttribute()
    • getAttribute()
    • removeAttribute()
  • 兼容方法
    • innerText兼容写法
      • 获取文本
      • 设置文本
    • 获取上一个&下一个兄弟元素的兼容写法
      • 获取下一个兄弟元素兼容写法
      • 获取上一个兄弟元素兼容写法
    • 获取第一个子元素&最后一个子元素的兼容写法
      • 获取第一个子元素兼容写法
      • 获取最后一个子元素兼容写法
    • 通过类名获取元素对象的兼容方法
  • 事件

获取元素

获取指定元素

document.getElementById: 通过id寻找一个元素（找到的是一个元素对象） 该方法只能被document对象调用（同一个文档中id不能重复）

    

    var box = document.getElementById(“box”);

document.getElementsByTagName: 通过标签名寻找一类元素（找到的是由元素对象组成的伪数组,既可以被document调用，又可以被元素对象调用，被元素对象调时表示在该元素对象内部执行查找

    

        

        

    
    

    


    var divs = document.getElementsByTagName("div");// 获取页面上所有的div,divs是一个伪数组
    var cl = document.getElementById("cl");// 获取id为cl的元素
    var cl2s = cl.getElementsByTagName("div");// 获取cl元素下面所有的div标签,cl2s是一个伪数组

document.getElementsByClassName通过类名寻找包含这个类名的元素

var cls = document.getElementsByClassName("cl");//获取到的是一个伪数组,里面装的是div p span a这四个元素对象(只要标签中的class中有传入的类名就能获取到)

获取子元素&兄弟元素&父元素

element.childNodes: 获取指定元素的子节点,包括文本节点、元素节点等
element.children: 获取指定元素的子元素,只会获取元素节点。
element.nextSibling: 获取指定元素的下一个兄弟节点
element.nextElementSibling: 获取指定元素的下一个兄弟元素
element.previousSibling: 获取指定元素的上一个兄弟节点
element.previousElementSibling: 获取指定元素的上一个兄弟元素
element.parentNode: 获取元素的父节点,父节点肯定是一个元素

        
首页
        
播客
        
博客
        
相册
        
关于
        
帮助



// 通过id获取元素对象
var ul = document.getElementById("list");
// 通过标签名获取元素数组
var lis = ul.getElementsByTagName("li");
// 不关心层级 只找指定标签
// 缺点:如果内部还有li 也会找到

var nodes = ul.childNodes;
//子节点 只找子级
//缺点:除了我们想要的元素节点 还会获取到其他节点

var children = ul.children;//只获取ul下的子元素

var link = document.getElementById("firstlink");
var nextNodeSibling = link.nextSibling; // 获取到的是换行(文本节点)
var nextElementSibling = link.nextElementSibling;//获取到的是下一个li标签

var parentNode = link.parentNode;// 获取到的是ul

获取第一&最后一个子元素

element.firstChild: 获取指定元素下面的第一个子节点
element.firstElementChild: 获取指定元素下面的第一个子元素
element.lastChild: 获取指定元素下面的最后一个子节点
element.lastElementChild: 获取指定元素下面的最后一个子元素

var firstNode = ul.firstChild;// 获取到的是换行(文本节点)
var firstElement = ul.firstElementChild;// 获取到的是firstlink
var lastNode = ul.lastChild;// 获取到的是换行(文本节点)
var lastElement = ul.lastElementChild;// 获取到的是lastlink

节点操作

克隆节点 - cloneNode()

• element.cloneNode(): 复制element节点

• 参数:布尔值,

  • true代表深层克隆,把当前节点和内部所有节点都复制一份

  • false代表浅层克隆,只复制当前节点

    
        
    
    
    
    var father = document.getElementById("father");
    var son = document.getElementById("son");
    var clone = son.cloneNode(true);// 把son这个div复制一份 复制出来的clone和son没有任何关系了
    
    

添加节点 - appendChild()

• father.appendChild(son):将son节点追加到father内部的最后位置

  
      
  
  
  
  
  var father = document.getElementById("father");
  var demo = document.getElementById("demo");
  var clone = demo.cloneNode(true);// 将demo克隆一份 
  father.appendChild(clone);// 将克隆出来的clone追加到father中
  
  // 此时页面结构应该为
  
      
  
      
  
  
  
  
  #追加克隆节点对原节点不会产生影响
  
  //如果代码如下 则会将demo节点直接移动到father节点下
  father.appendChild(demo);// demo是页面上存在的节点
  
  // 此时页面结构应该为
  
      
  
      
  
  
  
  

插入节点 - insertBefore()

• father.inserBefore(son1,son2): 将son1插入到father节点下的son2前面

  
      
  
  
  
  
  var father = document.getElementById("father");
  var son = document.getElementById("son");
  var demo = document.getElementById("demo");
  
  father.inserBefore(son,demo);//会直接将demo节点移动到father下的son前面       
  
  #插入克隆出来的节点也不会对原节点产生影响
  
  

移除节点 - removeChild()

• father.removeChild(son): 将father下的son节点移除

  
      
  
  
  
  var father = document.getElementById("father");
  var son = document.getElementById("son");
  
  father.removeChild(son);// 直接将son节点删除
  
  

创建结构

document.write()

document.write("内容") 特点:只能被document调用,而且会覆盖页面上原有内容

    document.write("百度")

    // 可以在页面上创建一个a标签,而且会覆盖页面上原有的所有内容

element.innerHtml

element.innerHtml特点:往页面添加html标签,可以限定范围

    


    var box = document.getElementById("box");
    box.innerHtml = "百度";

    // 追加后的结构为
    

        百度
    

document.createElement()

document.createElement("内容") 特点:动态创建标签,添加到页面需要配合appendChild使用

    


    var box = document.getElementById("box");
    var input = document.createElement("input");
    input.type = "text";
    box.appendChild(input);

标签的自定义属性操作

setAttribute()

设置标签属性: setAttribute()

    

    var box = document.getElementById("box");
    box.setAttribute("id","aaa");// 有规定的属性可以设置
    box.setAttribute("bbb","ccc");// 没有规定的属性也可以设置

getAttribute()

获取标签属性:getAttribute()

    

    var box = document.getElementById("box");
    box.getAttribute("id");// 有规定的可以获取
    box.getAttribute("aaa"); // 没有规定的也可以获取

removeAttribute()

移除标签属性:removeAttribute()

    

    var box = document.getElementById("box");
    box.removeAttribute("id"); // 有规定的可以删除
    box.removeAttribute("aaa"); // 没有规定的也可以删除

兼容方法

innerText兼容写法

获取文本

function getInnerText(element) {
        // 能力检测 判断是否有这一属性
    if (typeof element.innerText === "string") {
        return element.innerText;
    } else {
        return element.textContent;
    }
}

设置文本

function setInnerText(element, content) {
        // 能力检测 判断是否有这一属性
    if (typeof element.innerText === "string") {
        element.innerText = content;
    } else {
        element.textContent = content;
    }
}

获取上一个&下一个兄弟元素的兼容写法

获取下一个兄弟元素兼容写法

// 获取下一个兄弟元素
function getNextElement(element){
    if(element.nextElementSibling){
        //能找到nextElementSibling这个属性 就可以直接使用
        return element.nextElementSibling;
    }else{
        var next = element.nextSibling;// 获取下一个兄弟节点
        // 如果next就是想要的下一个兄弟元素 就直接返回 如果不是 就一直找
        while(next&&next.nodeType !==1){//next找到了而且不是想要的元素节点就继续找
            next = next.nextSibling;
        }
        return next;
    }
}

获取上一个兄弟元素兼容写法

// 获取上一个兄弟元素
function getPreviousElement(element){
    if(element.previousElementSibling){
        return element.previousElementSibling;
    }else{
        var previous = element.previousSibling;
        while(previous&&previous.nodeType !== 1){
            previous = element.previousSibling;
        }
        return previous;
    }
}

获取第一个子元素&最后一个子元素的兼容写法

获取第一个子元素兼容写法

// 获取element的第一个子元素
function getFirstElement(element){
    // 判断是否支持这一写法
    if(element.firstElementChild){
        return element.firstElementChild;
    }else{
        // 先找到第一个节点
        var first = element.firstChild;
        // 如果这个节点存在而且这个节点不是元素节点
        while(first&&first.nodeType !== 1){
            // 从这个节点向后继续找下一个兄弟节点
            first = first.nextSibling;
        }
        return first;
    }
}

获取最后一个子元素兼容写法

// 获取element的最后一个子元素
function getLastElement(element){
    // 判断是否支持这一写法
    if(element.lastElementChild){
        return element.lastElementChild;
    }else{
        // 先找到最后一个个节点
        var last = element.lastChild;
        // 如果这个节点存在而且这个节点不是元素节点
        while(last&&last.nodeType !== 1){
            // 从这个节点向前继续找上一个兄弟节点
            last = last.previousSibling;
        }
        return last;
    }
}

通过类名获取元素对象的兼容方法

// 通过类名获取元素对象的兼容方法
function getElementByClassName(element,className){
    if(element.getElementByClassName){// 可以使用这个属性
        return element.getElementByClassName("className");
    }else{
        // 先找到element里面所有的标签 然后判断是否有需要的类名
        // 如果有 就把这些标签放到一个集合中 最后返回这个集合
        var elements = element.getElementByTagName("*"); // 通配符找到所有标签
        var filterArr = [];
        for(var i = 0;i

事件

var box = document.getElementById("box");

box.onclick = function(){
    // 鼠标单击事件
}

box.dblclick = function(){
    // 鼠标双击事件
}

box.onmouseover = function(){
    // 鼠标移入事件
}

box.onmouseout = function(){
    // 鼠标移出事件
}

box.onfocus = function(){
    // 聚焦事件
}

box.onblur = function(){
    // 失去焦点事件
}

box.onkeyup = function(){
    // 按键弹起事件
}

box.onkeydown = function(){
    // 按键按下事件
}

14785485614694.jpg