dom操作查询一览表

 dom操作查询一览表

获取id和属性

1、getElementById  //获取id   返回一个给id属性值的元素节点对应对象
2、getElementsByTagName //获取比标签  返回一个对象数组，每个对象分别对应着文档有着给定标签的一个元素
3、getElementsByClassName  //获取类名  h5新增会有兼容问题
4、getAttribute    //获取属性
5、setAttribute  //设置属性

getElementsByClassName 兼容方法

//node指的是搜索的位置
function getElementsByClassName(node, className){
    if(node.getElementsByClassName){
        return node.getElementsByClassName(className)
    } else{
    let result = []
    let itemTag= document.getElementsByTagName("li")
    for(let i=0; i< itemTag.length; i++){
        if(itemTag[i].className.indexOf(className) !=-1){
            result[result.length] = itemTag[i]
        }
    }
    console.log('--result--', result)
    return result
    }
    
}
let per = document.getElementById('purchase')
let sale = per.getElementsByClassName('tao1')
console.log('--sale---', sale)

获取文本节点

5、childNodes //属性可以获取任何一个元素所有子元素，包含全部子元素的数组 包括换行符和空格
6、nodeType  //元素节点的nodeType属性值 1  属性节点的nodeType属性值 2   文本的节点nodeType属性值 3
7、nodeValue   // 改变文本的节点
8、firstChild  // 获取第一个节点
9、lastChild  //获取最后一个节点

获取文本节点示例

element.childNodes
//每份文档我唯一一个也只有一个
var body_elements = document.getElementsByTagName("body")[0];
body_elements.childNodes 获取body全部子元素
body_elements.childNodes.length 子元素的个数

body_elements.nodeType


let desc = document.getElementById("desc")//P标签的
desc.nodeValue 返回null的值，P元素本书即使null值我们需要的文本的值
desc.childNodes[0].nodeValue

firstChild:
等价于desc.childNodes[0]
desc.firstChild


lastChild：
等价于desc.childNodes[length-1]
desc.lastChild

 

共享onload的事件

如果有三个函数在网页加载完成之后立刻执行,下面的三个函数只有最后一个才会实际执行

 window.onload = aaFunction
 window.onload = bbFunction   
 window.onload = ccFunction 

创建一个匿名函数来容纳这三个函数，然后把匿名函数绑定到onload事件上如

 window.onload = function(){
    aaFunction();
    bbFunction();
    ccFunction();
  }

优化

1、把现有window.onload事件处理函数的值存入变量oldonload。

2、如果处理函数还没有绑定任何函数，就把新函数添加给它。

3、如果处理函数已经绑定一些函数，就把新函数追加到现指令的末尾

   function addLoadEvent(func){
    let oldonload = window.onload;
    if(typeof window.onload != 'function'){
        window.onload = func;
    } else {
        window.onload = function(){
            oldonload();
            func()
        }
    }
  }

动态创建标记

传统技术
document.write  // 方便快捷地把字符串插入到文档里
innerHTML // 属性  可以用来读、写给定元素里的HTML内容
深入剖析DOM方法：
createElement  // 创建元素节点
createTextNode  // 创建文本的节点
appendChild方法  // 把新创建的节点插入某个节点的最简单的办法是，让他成为这个文档某个现有】节点的一个字节点
insertBefore  // 已有元素前插一个新的元素

动态创建标记示例

//  document.write
  function insertParagraph(text) {
     let str = "<p>";
     str += text;
     str +="</p>"
     document.write(str) 
  }
  insertParagraph(" I am new inserted**");

// DOM  createElement 创建元素节点

window.onload = function(){
 let para =  document.createElement("p") 
 let info = "nodeName:"
 info+= para.nodeName;
 info+= " nodeType: ";
 info+= para.nodeType;
 console.log("***info***", info)
}
// appendChild方法  parent.appendChild(child)

let testdiv2 = document.getElementById("testdiv");
let para2 = document.createElement("p")
testdiv2.appendChild(para2)

//  createTextNode 创建文本的节点 document.createTextNode(text)

let txt = document.createTextNode("--Hello world--")
para2.appendChild(txt)

// 元素追加到body元素节点上

let placeholder = document.createElement("img")
// document.getElementsByTagName("body")[0].appendChild(placeholder)
// 或者是HTML-DOM提供的属性body
document.body.appendChild(placeholder)

let gallery = document.getElementById("imagegallery")

//gallery的父元素的是body元素，(placeholder元素将插入为body元素的新子元素。插到他的兄弟元素gallery的前面

gallery.parentNode.insertBefore(placeholder, gallery)

 

//  insertAfter 现有元素后插一个新的元素“？，DOM本身没有提供insertAfetr方法，利用已有的DOM方法和属性编写insertAfetr函数
function insertAfter(newElement, targetElement){  //插入新元素和目标元素
    let parent = targetElement.parentNode; // parentNod的属性值保存到parent变量里
    if(parent.lastChild == targetElement){  //targetElemen是否最后一个元素
        parent.appendChild(newElement);
    } else{
        parent.insertBefore((newElement, targetElement.nextSibling);
    }
}

 Ajax 

Ajax 异步加载页面内容技术，无需刷新和加载整个页面, XMLHttpRequest 对象（Ajax技术的核心对象）

// IE创建新的对象
let request = new ActiveXObject("Msxml2.XMLHTTP.3.0")
// 其他的浏览器基于XMLHttpRequest来创建新对象
let request = new XMLHttpRequest();

example.txt内容如下:

 this was loaded asynchronously!

//兼容所有浏览器
function getHTTPObject(){
    if(typeof XMLHTTPRequest == "undefined") 
        XMLHTTPRequest = function (){
            try {return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
                catch(e) {}
            try {return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
                catch(e) {}
            try {return new ActiveXObject("Msxml2.XMLHTTP");}
                catch(e) {}
            return false;
        } 
    return   new XMLHttpRequest() ;
    
}

function getNewContent(){
    let request = getHTTPObject();
    if(request){
        request.open("GET", "example.txt", true);
        request.onreadystatechange = function(){
            if (request.readyState == 4) {
                let para = document.createElement("p")
                let txt = document.createTExtNode(request.responseText)
                para.appendChild(txt);
                document.getElementById('new').appendChild(para);
            }
        }
        request.send(null)
    } else {
        console.log('Sorry, your brower doesn\'t support XMLHttpRequest')
    }
}
addLoadEvent(getNewContent)
// readyState 0表示未初始化
// 1表示正在加载、 2表示加载完毕 3表示正在交互 4表示正在完成(访问服务器发送回来的数据了)