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

时间: 2024-10-06 18:26:06

DOM模型和事件处理---节点操作的相关文章

轻松学习JavaScript二十二:DOM编程学习之节点操作

DOM编程不仅仅可以查找三种节点,也可以操作节点,那就是创建,插入,删除,替换和复制节点.先来看节点 操作方法: 还是借用一贯的HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.

DOM模型和事件处理---事件处理

常用的事件方式常规的事件处理方法无法批量的为节点添加事件,所以一般都是通过如下方式进行事件操作 <input type="button" value='click' id='btn'/> //另外一种创建事件的方式,基本上都是使用这种方法 var btn = document.getElementById('btn'); btn.onclick = function(event){ //会自动传入一个event的事件参数对象 console.log(event.type);

DOM模型和事件处理---基本操作

1.getElementById getElementById表示根据id获取,获取的是一个元素 function showPassword(){ var pwd = documnet.getElementById('password'); //innerText 不支持firefox documnet.getElementById('content').innerHtml = pwd.value; } 2.getElementsByName getElementsByName 表示通过属性的n

jQuery DOM 节点操作

DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面中的元素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建.插入.替换.克隆.删除等等一些列的元素操作. 一.创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. $('div').append('<strong>节点</strong>'); //向 div 内部插入 strong 节点 $('di

DOM 节点操作

DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面中的元 素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建. 插入.替换.克隆.删除等等一些列的元素操作. 一.创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. //创建一个节点  var box=$('<div id="box">节点</div>'); //将节点插入到&

Jquery6 DOM 节点操作

学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的"M".页面中的元素结构就是通过这种节点模型来互相对应着的,通过这些节点关系,可以创建.插入.替换.克隆.删除等等一些列的元素操作. 一.创建节点 为了使页面更加智能化,有时想动态的在 html 结构页面添加一个元素标签,那么在插入之前首先要做的动作就是:创建节点. var box = $('<div id="box">节

JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)

本节讲Dom和Bom模型概念讲解(节点获取,window对象). out.js: 写了2个输出到页面的函数. function println(param){ document.write(param+"<br/>"); } function print(param){ document.write(param); } window对象中的方式: 方法: confirm : bConfirmed = window.confirm( [sMessage]) 显示一个确认对话框

JQuery总结:选择器归纳、DOM遍历和事件处理、DOM完全操作和动画

JQuery总结一:选择器归纳 1.基本选择器 选择符 匹配元素 * 所有元素 id 给定ID的元素 element 给定类型的所有元素 .class 给定类的所有元素 a,b 与a或b匹配的元素 a b a的后代元素中与b匹配的元素 a>b a的直接子元素中与b匹配的元素 a+b a的直接同辈元素中与b匹配的元素 a~b a的同辈元素中与b匹配的元素 2.位置选择器 选择符 匹配元素 a b:nth-child(index) a的子元素中,第index个与b匹配的元素(从1开始计数) a b:

Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作

一.创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div>"; $('body').append(box); //将节点插入到<body>元素内部 二.插入节点 jQuery 提供了好几种个方法来插入节点: 1.内部插入节点方法  方法名 描述 append(content) 向指定元素内部后面插入节点 content append(func