5-javascript:操作DOM

2018-10-24  本文已影响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=""


上一篇下一篇

猜你喜欢

热点阅读