js操作节点

来源：互联网发布：高性能mysql怎么样编辑：程序博客网时间：2024/06/05 03:43

DOM节点的三个属性（节点类型、节点值、节点名称）

    1. 节点类型（nodeType）        1： 元素节点        2： 属性节点        3： 文本节点    2. 节点的值(nodeValue)        元素节点返回null，属性节点返回属性值，文本节点返回文本。        nodeValue可读可写，但是对元素节点不能写，一般用于设置文本节点的值。    3. 节点名称(nodeName)        举例：            <div id="father">                <span id="son">孩子元素</span>            </div>        document.getElementById("father").id;   // 返回属性名： father        document.getElementById("father").firstChild； // #text 文本节点        document.getElementById("father").firstChild.nodeType； // 3(文本节点）    例子：    <div id="box"></div>    <script>        var box = document.getElementById("box");        console.log(box.nodeType);   //1        console.log(box.nodeValue);  //null        console.log(box.nodeName);   //DIV    </script>

获取页面元素

js中获取页面元素

var dv = document.getElementById("boxId");   //根据Iid获取var dv = document.getElementsByTagName("div") //根据标签名获取(是伪数组）var dv = document.getElementsByClassName("claName") //根据类名获取// html5中的方法，类似于jQuery选择器var dv = documen.querySelector("") //""里面可以是.box #id div var dv = documen.querySelectorAll();  //返回伪数组

创建节点

createElement("tagName")例如：var p = document.createElement("p"); //创建了一个<p></p>标签// 创建的节点要添加到文档中才会显示

创建文本节点

createTextNode("text")例如：var txt = document.createTextNode("哈哈哈");// 创建的节点要添加到文档中才会显示

添加子节点

appendChild(dom)  //dom 为节点对象例如：document.body.appendChild(dom) //在body的末尾追加

js插入节点

insertBefore(newChild,targChild):在当前元素的targChild元素前面插入newChild节点，newChild会从文档原来的位置上被剪切insertAfter(newChild,targChild): 在targChild后面插入节点newChild，newChild会从文档原来的位置上被剪切例子：<div id="box">    <span>第一个元素</span></div><span id="out">外面的span</span><script>    var dv = document.getElementById("box");    var out = document.getElementById("out");    dv.insertBefore(out,dv.firstChild);</script>执行插入之后：<div id="box">    <span id="out">外面的span</span>    <span>第一个元素</span></div>

js删除节点

removeChild：删除元素的子节点举例说明：<div>    <span id="son">孩子元素</span></div>  <script>    var son = document.getElementById("son");    son.parentNode.removeChild(son);</script>结果：页面中就只有<div></div>了，span元素被删除

替换节点

replaceChild(new,target)：将target节点替换成new节点举例说明：<div id="box">    <span id = sp></span></div><script>    var box = document.getElementById("box");    var sp = document.getElementById("sp");    var p = document.createElement("p");    box.replaceChild(p,sp);    //前面是要替换的成的，后面是被替换的//被替换的span标签还存在，只是不再页面中显示，我们可以给它放到一个指定的位置</script>

克隆节点

dom.cloneNode(false)   //默认，克隆dom节点，不克隆事件dom.cloneNode(true)    //连同dom的事件也一起克隆

属性节点

setAttribute("key","value") 设置属性getAttribute("key"）获取属性例如：    <div id="box"></div>    document.getElementById("box").getAttribute("id")  //结果：box    document.getElementById("box").setAttribute("id","hhhh");    document.getElementById("box").getAttribute("id")  //结果：hhhh

兄弟节点

firstChild          访问第一个子节点（包括换行）firstElementChild   访问第一个子元素节点（IE低版本不支持）lastChild           访问最后一个子节点（包括换行）lastElementChild    访问最后一个子元素节点（IE低版本不支持）childNodes          获取所有子节点（包括换行）children            获取所有子元素节点（不存在兼容问题）兄弟节点nextSibling         获取下一个兄弟节点（包含换行）nextElementSibling  获取下一个兄弟元素节点（IE低版本不支持）previouseSibling    获取上一个兄弟节点（包含换行）previouseElementSibling  获取上一个兄弟元素节点（IIE低版本不支持）父节点（虽无兼容性，但也是节点的一个操作）parentNode 返回节点的父节点。document.parentNode返回null，其他的情况下都将返回一个元素节点，因为只有元素节点拥有子节点，除了document外任何节点都拥有父节点。parentNode只读

0 0