首页 > 网站 > WEB开发 > 正文

DOM模型和事件处理---节点操作

2024-04-27 14:15:32
字体:
来源:转载
供稿:网友

DOM模型和事件处理---节点操作

parentNode属性element.firstChild 返回当前对像的父结点,即上级容器,

var element = document.getElementsByTagName('ul');var oElement = element[0].parentNode;for(var i = 0;i<oElement.length;i++){    console.log(typeof oElement[i]);}

childNodes 属性element.childNodes 返回一个数组,这个数组包含给定元素节点的全体子元素

var element = document.getElementsByTagName('ul');var oElement = element[0].childNodes;for(var i = 0;i<oElement.length;i++){    console.log(typeof oElement[i]);}

nodeType 属性node.nodeType 返回一个数值nodeType 属性总共有12种可取值,但其中仅有3种具有使用价值:元素节点、属性节点、文本节点的 nodeType 的属性值分别是 1、2、3。元素节点的 nodeType 属性值是 1。属性节点的 nodeType 属性值是 2。文本节点的 nodeType 属性值是 3。

var element = document.getElementsByTagName('ul');var oElement = element[0].childNodes;for(var i=0;i<oElement.length;i++){    console.log(oElement[i].nodeType);}

nodeValue 属性node.nodeValue 检索或设置节点的值

var text = document.getElementsByTagName('p');console.log(text[0].childNode[0].nodeValue);text[0].childNodes[0].nodeValue = 'value';console.log(text[0].childNode[0].nodeValue);

nodeName 属性node.nodeName 返回一个大写字符串(节点名)

var name = document.getElementsByTagName("p");console.log(name[0].nodeName);

firstChild 属性node.firstChild 直接访问childNodes[]数组的第一个元素

var parent = document.getElementsByTagName('p');var child = parent[0].firstchild;console.log(child.nodeValue);

lastChild 属性 node.firstChild 直接访问childNodes[]数组的最后一个元素

var parent = document.getElementsByTagName('p');var child = parent[0].lastchild;console.log(child.nodeValue);

createElement 属性作用:建立并返回一个TAGS(标签)对像

var li = document.createElement("li");
将会得到一个LI,和常用的LI对象一样,可以给ID,INNERHTML之类的属性。

insertBefore 属性作用:把oNewNode 结点加进object容器作为firstChild,并返回新结点对像oChildNode是指在哪个旧结点之前,在IE里,oChildNode可以省略,在其它浏览就不可省略了

var ul = $('list');//容器   var li = document.createElement("li");   if(!PReObj){//第一次点击    if($('vv0')){//列表没有内容     newli = $('vv0');    }else{//如果有,li0为最顶     preObj = $('li0');     var newli = ul.insertBefore(li,preObj);    }   }else{    var newli = ul.insertBefore(li,preObj);   }   preObj = newli;newli.innerHTML = "我是新的LI。";

如果需要插入到容器的最后面时,用:appendChild


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表