美文网首页
5-javascript:操作DOM

5-javascript:操作DOM

作者: 少年啊兵 | 来源:发表于2018-10-24 15:31 被阅读0次

    HTML-DOM对象

    DOM Element:

        1、ele.className || ele.id || ele.title || ele.style || ele.attributes  返回元素: 【class || id || title属性 || style属性 || 属性NamedNodeMap 】。

        2、ele.getAttribute() || ele.setAttribute() || ele.removeAttribute()  【获取 || 设置 || 删除 】元素属性

        3、ele.hasAttribute()  || hasAttributes()  是否含有【指定 || 任何】 属性

        4、ele.nodeType  返回节点类型

        5、childEle.parentNode(parentElement) 

            ele.previousSibling || ele.nextSibling 

             parentEle.childNodes(children) ||  parentEle.firstChild(firstElementChild) || parentEle.lastChild(lastElementChild)  || parentEle.childElementCount

        6、ele.innerHTML || ele.textContent || ele.nodeValue  设置或返回【 内容 || 文本内容 || 元素值 】

        7、ele.appendChild() append() || ele.insertBefore (newEle,referenceEle) prepend() || ele.removeChild(child) remove() || ele.replaceChild(newChild,oldChild) replaceWith 【插入新 || 移除 || 替换】 子节点

    DOM document

    getElementById() || getElementsByClassName || getElementsByName || getElementsByTagName

    DOM Event 

    事件:

    onclick || ondblclick || onchange || onfocus

    属性:


    插入值:

        1、innerHTML DOM节点为空时:element.innerHTML="<span>innerHTML</span>";

        2、appendChild() 向元素添加新的子节点,作为最后一个子节点。

        // 从零创建一个新的节点,然后插入到指定位置   

        var haskell = document.createElement('p');

        haskell.id ='haskell';

        haskell.innerText ='Haskell';

        haskell.setAttribute("name","names");

        document.body.appendChild(haskell);

        3、insertBefore (newEle,referenceEle)

    删除DOM:

    parent.removeChild(child)

    更新DOM:

    ele .innerHTML="";

    ele .innerText="";/ ele .textContent=""


    相关文章

      网友评论

          本文标题:5-javascript:操作DOM

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