DOM编程艺术整理

第三章:
    获取元素的方法
       document.getElementById(id)
       document.getElementByTagName(string)返回一个数组
       document.getElementByClassName(string)返回一个数组
       document.querySelector("#xxxx")
    获取元素属性
        obj.getAttribute("width")获取某个元素的宽度
        obj.setAttribute("width","100px")直接对元素的属性进行设置
第四章:
    事件处理函数
        return false可以阻止默认的事件发生
    childNodes
        obj.childNodes返回所有的子节点,*包含 元素节点 文本节点 属性节点*
        可以通过nodeType来判断是什么类型的节点
        元素节点:1
        属性节点:2
        文本节点:3
    改变文本节点的值
        对于文本节点,拥有nodeValue的属性,textNode.nodeValue可以获取文本节点的值,并且可以改变nodeValue
第七章:
    innerHTML属性
        可以获取到dom中的所有内容,但是无法获取到细节
        应用:对于某个标签内所有进行批量替换 div.innerHTML = `<div>aaaaaa</div>`
    createElement
        document.createElement("div")可以创建一个div
    appendChild
        div.appendChild(tempDiv)
    createTextNode
        创建一个文本节点
    insertBefore
        给已有元素后插入一个元素
        childEle.parentElement.insertBefore(newEle,childEle)
    并没有insertAfter
        1.如果给最后一个插入,直接appendChild
        2.如果不是,则插入到parent.insertBefore(n+1,childEle)
第九章:
    nextSibling
        获取下一个节点(不是元素节点),可以根据他的nodetype来判断
    模拟hover伪类
        div.onmouseover = function(){div.style.backgroundColor="#111"}
        div.onmouseout = function(){div.style.backgroundColor="#FFF"}
    className
        className为class,值为一个字符串,className = "head red",则它拥有了两个class

转载于:https://my.oschina.net/vqishiyu/blog/1624540