原生js操作dom备忘

发布时间:2017-2-23 22:02:43 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"原生js操作dom备忘 ",主要涉及到原生js操作dom备忘 方面的内容,对于原生js操作dom备忘 感兴趣的同学可以参考一下。

    <!DOCTYPE html>    <html lang="zh-CN">    <head>        <meta charset="utf-8">        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>        <title></title>    </head>    <body lang="en-us">    <p><span class="className">1</span><i>2</i></p>    <div></div>    </body>    <script>    /*-----------------------------------属性-----------------------------------*/    //childNodes -当前节点的全部子级节点(有的浏览器里会把元素里的空白节点转换成文本节点 nodeType==3)    var nodes=document.getElementsByTagName('p')[0].childNodes;    for(var i=0;i<nodes.length;i++){        /*        * <span>1</span>        * <i>2</i>        * */        console.info(nodes[i]);    }    var childNodes=document.getElementsByTagName('p')[0];    //firstChild -childNodes里的第一个节点 相当于childNodes[0]  *所有主流浏览器都支持 firstChild 属性。    //lastChild -childNodes里的最后一个节点 相当于childNodes[childNodes.length-1]    /*    * <span>1</span>    * <i>2</i>    * */    console.info(childNodes.firstChild);    console.info(childNodes.lastChild);    //parentNode -父节点 如果指定节点没有父节点,则返回 null。    /*    *<p></p>    * */    console.info(childNodes.lastChild.parentNode);    //nextSibling previousSibling -兄弟节点 如果没有 nextSibling previousSibling节点,则返回值为 null    /*    *<span>1</span>    *<i>2</i>    * */    console.info(childNodes.lastChild.previousSibling);    console.info(childNodes.firstChild.nextSibling);    //nodeValue -返回元素节点里的值 注意:文本始终位于文本节点中    /*    *1    * */    console.info(childNodes.firstChild.childNodes[0].nodeValue);    //nodeName -返回元素节点名称时,并不包含html里的<>符号    /*    * #text    * SPAN    * */    console.info(childNodes.firstChild.childNodes[0].nodeName);    console.info(childNodes.firstChild.nodeName);    //tagName -返回元素的标签名    /*     *undefined     * SPAN     * */    console.info(childNodes.firstChild.childNodes[0].tagName);    console.info(childNodes.firstChild.tagName);    //className -属性设置或返回元素的 class 属性    /*    *className    * */    console.info(childNodes.firstChild.className);    // id -设置或返回元素的 id    childNodes.firstChild.id='hello';    console.info(childNodes.firstChild.id);    //innerHTML -设置或返回元素的 inner HTML    //lang -设置或返回元素的语言代码    console.info(document.getElementsByTagName('body')[0].lang);    //title -设置或返回元素的标题    //textContent -返回所有子及后代节点的文本    console.info(document.getElementsByTagName('body')[0].textContent);    //ownerDocument -以 Document 对象的形式返回节点的 owner document    console.info(document.getElementsByTagName('body')[0].ownerDocument);    /*-----------------------------------方法-----------------------------------*/    //appendChild() -向节点添加最后一个子节点  也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素    var p=document.getElementsByTagName('p')[0];    var textNode=document.createTextNode('world!');    var newElementNode=document.createElement('b');    newElementNode.appendChild(textNode);//添加元素    p.appendChild(newElementNode);//添加元素    var div=document.getElementsByTagName('div')[0];    div.appendChild(p);//移动元素    //cloneNode -克隆元素 创建节点的拷贝,并返回该副本    var cloneNode=div.cloneNode(true);//克隆所有后代,参数设置为true    document.getElementsByTagName('body')[0].appendChild(cloneNode);    //insertBefore -在指定的已有子节点之前插入新的子节点    var listNode=document.createElement('ul');    var liNode=document.createElement('li');    listNode.appendChild(liNode);    var body=document.getElementsByTagName('body')[0];    body.appendChild(listNode);    var textNode=document.createTextNode('haha!');    body.insertBefore(textNode,listNode);    //removeChild -从元素中移除子节点 返回值是对删除节点的引用    /*    * "haha"    * */    var delNode=textNode.parentNode.removeChild(textNode);    console.info(delNode);    //replaceChild -用新节点替换某个子节点    var newNode=document.createTextNode('hehe!');    var oldNode=document.getElementsByTagName('p')[0].childNodes[0];    oldNode.parentNode.replaceChild(newNode,oldNode);    //setAttribute getAttribute -设置和返回指定属性名的属性值    var div2=document.getElementsByTagName('div')[0];    div2.setAttribute('data-id','71121');    console.info(div2.getAttribute('data-id'));//71121    //normalize -移除空的文本节点,并连接相邻的文本节点    function addTextNode(){        var text=document.createTextNode('文本节点内容');        div2.appendChild(text);    }    addTextNode();    addTextNode();    console.info(div2.childNodes.length);    div2.normalize();    console.info(div2.childNodes.length);

上一篇:unitty导出工程嵌入iOS原生工程中出现黑屏,但是模型还是可以扫。
下一篇:C#设计模式-策略者模式

相关文章

相关评论