原生JavaScript和jQuery操作DOM元素总结

        DOM(Document Object Model)即文档对象模型。通常,浏览器将HTML或XML文档转化成一个对象模型的集合(即DOM树),JavaScript便可以对DOM节点进行操作以达到预期效果,以下总结了原生JS与Jq操作DOM节点的方法。

①原生JS对DOM节点

  • Node类型(基类)

nodeType:节点类型,若为元素则值为1;

nodeName,nodeValue:对于元素节点,nodeName为标签名,nodeValue为null;

firstChild,lastChild:选取元素节点的第一个子节点或最后一个子节点;

appendChild(a),insertBefore(a):在元素节点最后或起始插入子节点a;

removeChild(a):移除子节点a;

replaceChild(a,b):将元素节点下的子节点b替换为新节点a;

  • document类型(document_node)

document.documentElement属性指向html标签元素

document.body属性指向body标签元素

getElementById( ):通过id获取元素;

getElementsByTagName( ):通过标签名获取元素;

getElementsByName( ):通过name获取元素;

getElementsByClassName( ):通过class名称获取元素;

  • element类型(element_node)

tagName:元素标签名;

id:ID名;

className:class名;

getAttribute(a):获得a属性的值;

setAttribute(a):设置a属性的值;

removeAttribute(a):清除a属性的值;

createElement(tag):创建标签名为tag的元素;

  • text类型(text_node)

createTextNode(text):创建内容为text的文本节点;

  • documentfragment类型(document_fragment_node)

createDocumentFragment():创建虚拟节点,该虚拟节点中构建一个离散DOM块,最后添加到需要位置;

示例:点击按钮生成一个div,并显示第n个段落,n跟随个数变化

            html

                <div id='btntake'>
<button onclick="divAdd()">点击添加</button>

</div>

           js

             var 1;

              var btn document.getElementById('btntake');

              function divAdd(){

                  var oFragment document.createDocumentFragment();

                     var odiv document.createElement('div');

                     var otext document.createTextNode(''+'个段落');

                     odiv.className 'blue background';

                     odiv.appendChild(otext);

                     oFragment.appendChild(odiv);

                  btn.appendChild(oFragment);

                  p++;

              };

②Jq对DOM节点

  • 在元素内部插入节点

append():元素内部追加内容,如$(‘#B’).append(‘< p >A< /p >’); //idB的元素中追加一个段落;

prepend():元素内部前置内容,如$(‘#B’).prepend(‘< p>A< /p>’);idB的元素内容前添加一个段落;

  • 在元素外部插入节点

after():在元素后边插入内容,如$(‘#B’).after(‘< p >A< /p >’); //idB的元素后面添加一个段落;

before():在元素之前插入内容,如$(‘#B’).before(‘< p >A< /p >’); //idB的元素前面添加一个段落;

  • 删除、复制和替换节点

empty():删除元素中的子节点,并不删除该元素;

remove():删除整个元素;

clone(true/false):克隆匹配元素,true时复制所有元素及其事件处理,false时仅复制匹配元素不复制事件;

replaceWith():替换元素


猜你喜欢

转载自blog.csdn.net/didudidudu/article/details/80017755
今日推荐