js-元素节点

来源：互联网发布：java中容器的概念编辑：程序博客网时间：2024/06/04 18:32

查看节点

属性说明 childNodes 获取当前元素节点的所有子节点 firstChild 获取当前元素节点的第一个子节点 lastChild 获取当前元素节点的最后一个子节点 ownerDocument 获取该节点的文档根节点，相当于document parentNode 获取当前节点的父节点 previousSibling 获取当前节点的前一个同级节点 nextSibling 获取当前节点的后一个同级节点 attributes 获取当前元素节点的所有属性集合

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><ul id="ul">    <li>青岛理工大学</li>    <li id="li2">鲁东大学</li>    <li>山东工商学院</li>    <li>烟台大学</li>    <li>山东科技大学</li>    <li>中国石油大学</li></ul></body><script>    /*parentNode:通过子元素获取父元素*/    /*var li2 = document.getElementById("li2");     var ul = li2.parentNode;     console.log(ul);*/    /*childNodes:通过父元素去查找所有子元素  ->代码不能换行，js会把换行当作一个text，jQuery没有这个bug*/    /*var ul = document.getElementById("ul");     var lis = ul.childNodes;     console.log(lis);*/    /*firstChild:通过父元素去查找第一个子元素    *   有bug，元素和元素之间不允许换行    * firstElementChild:通过父元素查找第一个子元素    *   允许元素换行   */    var ul = document.getElementById("ul");    //var li1 = ul.firstChild;    var li1 = ul.firstElementChild;    console.log(li1);    /*lastChild和lastElementChild同理*/    //var li6 = ul.lastChild;    var li6 = ul.lastElementChild;    console.log(li6);    /*previousSibling,获取前一个同级元素bug同上*/    var li2 = document.getElementById("li2");    //var li1 = li2.previousSibling;    var li1 = li2.previousElementSibling;    console.log(li1);    /*nextSibling,获取后一个同级元素*/    //var li3 = li2.nextSibling;    var li3 = li2.nextElementSibling;    console.log(li3);    /*attributes,获取当前元素的所有属性*/    var att = li2.attributes;    console.log(att);</script></html>

创建和增加节点的方法

createElement( ) :创建节点
cloneNode( ) :克隆节点
appendChild( ) :末尾追加方式插入节点
insertBefore( ) :在指定节点前插入新节点

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><button onclick="create()">添加新图片</button> <button onclick="clone()">复制图片</button><br><img src="../../img/qq.png" id="img1" height="200"></body><script>    var oldNode = document.getElementById("img1");    function create() {        var img = document.createElement("img");        img.src = "../../img/mail.png";        document.body.insertBefore(img,oldNode);    }    var i = 2;    function clone() {        var copyImg = oldNode.cloneNode();        copyImg.id = "img"+ i++;        document.body.appendChild(copyImg);    }</script></html>

删除和替换节点的方法

removeChild( ) :删除节点
replaceChild( ) :替换节点

阅读全文

0 0