DOM

作者: _敏讷 | 来源:发表于2017-06-03 16:12 被阅读0次

    发现复习DOM最好的方法是学习youmightnotneedjquery.com
    可以对原生JS的DOM操作有一个全面的把握

    1.元素(element)节点举例:html,head,meta,title,body,div,ul,li,script
    2.属性(attr)节点举例:lang,charset,id,class
    3.文本(text)节点
    4.注释(comment)节点
    ...

    图片.png

    创建元素节点
    createElement(tagName)
    添加子元素
    document.body.appendChild(h1)
    查找元素
    document.getElementById(id)
    element.childNodes[i]
    element.getEkementByTagName(tagName)
    element.getElementByClassName(className)
    element.querySelector(query)
    element.querySelectorAll(query)
    添加/修改文本内容
    h1.textContent = "something"
    设置类属性
    h1.setAttribute("class", "title")
    h1.className = "title"
    h1.classList.add("title")
    h1.classList.remove("title")

    DOM事件

    鼠标事件
    onclick():点击
    oncontextmenu():右键打开上下文菜单
    ondblclick():双击
    onmousedown():按下
    onmouseenter():移动到元素上时
    onmouseleave():移出元素时
    onmousemove():移动
    onmouseover():移到元素上
    onmouseout():从元素上移开
    onmouseup():按键松开

    相关文章

      网友评论

        本文标题:DOM

        本文链接:https://www.haomeiwen.com/subject/kpqmfxtx.html