彩世界开奖app官网-彩世界平台官方网址(彩票平台)
做最好的网站
来自 彩世界平台官方网址 2019-12-06 23:53 的文章
当前位置: 彩世界开奖app官网 > 彩世界平台官方网址 > 正文

JavaScript节点及列表操作实例小结_javascript技巧_脚

1 var ul = document.getElementById("myList");    //获得ul
2 var li = document.createElement("li");         //创建li
3 li.innerHTML = "项目四";                    //向li内添加文本
4 ul.appendChild(li);                //把li 添加到ul子节点的末尾
var ul = document.getElementById; //获得ulvar fromFirstChild = ul.removeChild; //移除ul第一个子节点var ul = document.getElementById; //获得ulvar lis = ul.getElementsByTagName //获取ul中所有li的集合ul.removeChild; //移除第一个li,与上面不同,要考虑浏览器之间的差异

添加后:

这段JavaScript代码显示和建立列表项目,复制子节点、复制节点树,是相当有用的一个例子,在建立树形菜单的时候尤其有用处。

2.添加元素节点
appendChild() 方法 用于向childNodes列表的末尾添加一个节点,返回要添加的元素节点

removeChild() 方法 ,用于移除节点,接受一个参数,即要移除的节点,返回被移除的节点,注意被移除的节点仍然在文档中,不过文档中已没有其位置了

添加后:

  • 项目1
  • 项目2
    1. 次项目1
    2. 次项目2
  • 项目3

(1)创建新节点

  • 项目一
  • 项目四
  • 项目二
  • 项目三

      removeChild()

下面再给大家一个JavaScript建立列表项目,复制子节点的完整实例:

添加后:

createDocumentFragment() //创建一个DOM片段createElement() //创建一个具体的元素createTextNode() //创建一个文本节点

      getElementsByName()    //通过元素的Name属性的值

希望本文所述对大家的javascript程序设计有所帮助。

1 var ul = document.getElementById("myList");            //获得ul
2 var fromFirstChild = ul.removeChild(ul.firstChild);    //移除ul第一个子节点

1 var ul = document.getElementById("myList");    //获得ul
2 var lis = ul.getElementsByTagName("li")        //获取ul中所有li的集合
3 ul.removeChild(lis[0]);                  //移除第一个li,与上面不同,要考虑浏览器之间的差异
  • 项目一
  • 项目二
  • 项目三
  • 项目四
1 <ul id="myList">
2     <li>项目二</li>
3     <li>项目三</li>
4     <li>项目一</li>
5 </ul>

cloneNode() 方法,用于复制节点, 接受一个布尔值参数, true 表示深复制, false 表示浅复制

      replaceChild()

appendChild() 方法还可以添加已经存在的元素,会将元素从原来的位置移到新的位置

1 <ul id="myList">
2     <li>项目四</li>
3     <li>项目一</li>
4     <li>项目二</li>
5     <li>项目三</li>
6 </ul>

1 var ul = document.getElementById("myList");    //获得ul
2 var li = document.createElement("li");         //创建li
3 li.innerHTML= "项目四";               //向li内添加文本
4 ul.insertBefore(li,ul.lastChild);        //把li添加到ul的子节点末尾
var ul = document.getElementById; //获得ulvar fromFirstChild = ul.replaceChild; //替换ul第一个子节点var ul = document.getElementById; //获得ul;var li = document.createElement; //创建lili.innerHTML= "项目四"; //向li内添加文本var lis = ul.getElementsByTagName //获取ul中所有li的集合var returnNode = ul.replaceChild; //用创建的li替换原来的第二个li

      getElementById()    //通过元素Id,唯一性

  • 项目一
  • 项目二
  • 项目三

创建元素后还要把元素添加到文档树中

var ul = document.getElementById; //获得ulvar li = document.createElement; //创建lili.innerHTML= "项目四"; //向li内添加文本var lis = ul.getElementsByTagName //获取ul中所有li的集合ul.insertBefore; //把li添加到ul中的第二个li节点前

添加后:

insertBefore() 方法 ,如果不是在末尾插入节点,而是想放在特定的位置上,用这个方法,该方法接受2个参数,第一个是要插入的节点,第二个是参照节点,返回要添加的元素节点

3.移除元素节点
removeChild() 方法 ,用于移除节点,接受一个参数,即要移除的节点,返回被移除的节点,注意被移除的节点仍然在文档中,不过文档中已没有其位置了

var ul = document.getElementById; //获得ulvar li = document.createElement; //创建lili.innerHTML= "项目四"; //向li内添加文本ul.insertBefore; //把li添加到ul的子节点末尾
1 <ul id="myList">
2     <li>项目一</li>
3     <li>项目四</li>
4     <li>项目二</li>
5     <li>项目三</li>
6 </ul>
  • 项目二
  • 项目三
  • 项目一

(3)查找

appendChildreplaceChild

getElementsByTagName() //通过标签名称getElementsByName() //通过元素的Name属性的值getElementById() //通过元素Id,唯一性

      createElement()   //创建一个具体的元素

document.createElement() 方法 用于创建元素,接受一个参数,即要创建元素的标签名,返回创建的元素节点

运行后(IE):

var ul = document.getElementById; //获得ulvar deepList = ul.cloneNode; //深复制var shallowList = ul.cloneNode; //浅复制

appendChild() 方法还可以添加已经存在的元素,会将元素从原来的位置移到新的位置

var ul = document.getElementById; //获得ulvar li = document.createElement; //创建lili.innerHTML = "项目四"; //向li内添加文本ul.appendChild; //把li 添加到ul子节点的末尾

1.创建元素节点
document.createElement() 方法 用于创建元素,接受一个参数,即要创建元素的标签名,返回创建的元素节点

replaceChild() 方法 ,用于替换节点,接受两个参数,第一参数是要插入的节点,第二个是要替换的节点,返回被替换的节点

1 <ul id="myList">
2     <li>项目一</li>
3     <li>项目二</li>
4     <li>项目三</li>
5 </ul>

本节要用到的html例子

4.替换元素节点
replaceChild() 方法 ,用于替换节点,接受两个参数,第一参数是要插入的节点,第二个是要替换的节点,返回被替换的节点

1 var ul = document.getElementById("myList");    //获得ul
2 var deepList = ul.cloneNode(true);            //深复制
3 var shallowList = ul.cloneNode(false);        //浅复制

本文实例总结了JavaScript节点及列表操作的方法。分享给大家供大家参考。具体如下:

insertBefore() 方法 ,如果不是在末尾插入节点,而是想放在特定的位置上,用这个方法,该方法接受2个参数,第一个是要插入的节点,第二个是参照节点,返回要添加的元素节点

var ul = document.getElementById; //获得ulvar li = document.createElement; //创建lili.innerHTML= "项目四"; //向li内添加文本ul.insertBefore; //把li添加到ul的第一个子节点前
1 var ul = document.getElementById("myList");    //获得ul
2 ul.appendChild(ul.firstChild);            //把ul的第一个元素节点移到ul子节点的末尾

添加、移除、替换、插入

      createTextNode()   //创建一个文本节点

  • 项目一
  • 项目二
  • 项目三
  • 项目四
1 var ul = document.getElementById("myList");            //获得ul
2 var fromFirstChild = ul.replaceChild(ul.firstChild);    //替换ul第一个子节点

1 var ul = document.getElementById("myList");    //获得ul;
2 var li = document.createElement("li");         //创建li
3 li.innerHTML= "项目四";                    //向li内添加文本
4 var lis = ul.getElementsByTagName("li")        //获取ul中所有li的集合
5 var returnNode = ul.replaceChild(li,lis[1]);   //用创建的li替换原来的第二个li
  • 项目四
  • 项目一
  • 项目二
  • 项目三

      getElementsByTagName()    //通过标签名称

appendChild() 方法 用于向childNodes列表的末尾添加一个节点,返回要添加的元素节点

      createDocumentFragment()    //创建一个DOM片段

var div = document.createElement; //创建一个div元素div.id = "myDiv"; //设置div的iddiv.className = "box"; //设置div的class
1 <ul id="myList">
2     <li>项目一</li>
3     <li>项目二</li>
4     <li>项目三</li>
5     <li>项目四</li>
6 </ul>
建立列表项目function printChilds { var strMsg = "&#33410;&#28857;&#21517;&#31216; ="   objNode.nodeName   "n"; if (objNode.hasChildNodes{ var nodeCount = objNode.childNodes.length; strMsg  = "&#23376;&#33410;&#28857;&#25968; = "   objNode.childNodes.length   "n"; for(var i = 0; i &lt; nodeCount; i  ) strMsg  = "&#26631;&#35760;&#21517;&#31216; = "   objNode.childNodes[i].nodeName   "n"; alert; }}function copyNode(objNode, objDupNode, deep){ var tempNode = objDupNode.cloneNode; objNode.appendChild;}建立列表项目
1 <ul id="myList">
2     <li>项目一</li>
3     <li>项目二</li>
4     <li>项目三</li>
5     <li>项目四</li>
6 </ul>

1 var ul = document.getElementById("myList");    //获得ul
2 var li = document.createElement("li");         //创建li
3 li.innerHTML= "项目四";                    //向li内添加文本
4 var lis = ul.getElementsByTagName("li")   //获取ul中所有li的集合
5 ul.insertBefore(li,lis[1]);            //把li添加到ul中的第二个li节点前
var ul = document.getElementById; //获得ulul.appendChild; //把ul的第一个元素节点移到ul子节点的末尾
1 var ul = document.getElementById("myList");    //获得ul
2 var li = document.createElement("li");         //创建li
3 li.innerHTML= "项目四";                    //向li内添加文本
4 ul.insertBefore(li,ul.firstChild);        //把li添加到ul的第一个子节点前

创建元素后还要把元素添加到文档树中

DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

1 var div = document.createElement("div");  //创建一个div元素
2 div.id = "myDiv";        //设置div的id
3 div.className = "box";    //设置div的class

      appendChild()

5.复制节点
cloneNode() 方法,用于复制节点, 接受一个布尔值参数, true 表示深复制(复制节点及其所有子节点), false 表示浅复制(复制节点本身,不复制子节点)

      insertBefore()

(2)添加、移除、替换、插入

 

本节要用到的html例子

 

本文由彩世界开奖app官网发布于彩世界平台官方网址,转载请注明出处:JavaScript节点及列表操作实例小结_javascript技巧_脚

关键词: 脚本 小结 之家 节点 js proto