DOM 元素 操作

lnodeType:返回一个整数,这个数值代表着给定节点的类型。

nodeType属性返回的整数值对应着12 种节点类型,常用的有三种:

Node.ELEMENT_NODE    ---1   -- 元素节点Node.ATTRIBUTE_NODE  ---2   -- 属性节点Node.TEXT_NODE       ---3   -- 文本节点

nodeType 是个只读属性

lcreateElement()按照给定的标签名创建一个新的元素节点。方法只有一个参数:将被创建的元素的名字,是一个字符串.

var reference =document.createElement(element);

方法的返回值:

是一个指向新建节点的引用指针。返回值是一个元素节点,所以它的nodeType属性值等于1。

新元素节点不会自动添加到文档里,新节点没有 nodeParent 属性,它只是一个存在于JavaScript上下文的对象.

var pElement =document.createElement("p");

l  
//创建一个新的元素

l varpElement=document.createElement("li");


//设置属性值

l pElement.setAttribute("id","pid");

l


//获取父元素

l varloveElement=document.getElementById("love");


//在父元素中增加子元素

lloveElement.appendChild(pElement);

l


//通过id获取刚创建的元素

l varpidElement=document.getElementById("pid");


alert(pidElement.getAttribute("id"));

lcreateTextNode()创建一个包含着给定文本的新文本节点。这个方法的返回值是一个指向新建文本节点引用指针。

vartextNode = document.createTextNode(text);

方法只有一个参数:新建文本节点所包含的文本字符串

方法的返回值:是一个指向新建节点的引用指针。它是一个文本节点,所以它的nodeType 属性等于 3.

新元素节点不会自动添加到文档里,新节点没有 nodeParent 属性

varpElementText=document.createElement("li");

vartextElement=document.createTextNode("南京");  pElementText.appendChild(textElement);

lappendChild()为给定元素增加一个子节点:

var newreference = element.appendChild(newChild).

给定子节点newChild将成为给定元素节点element的最后一个子节点。

方法的返回值是一个指向新增子节点的引用指针。该方法通常与 createElement()createTextNode() 配合使用新节点可以被追加给文档中的任何一个元素

var
newliElement=document.createElement("li");

var textNode=document.createTextNode("北京");

newliElement.appendChild(textNode);

document.body.appendChild(newliElement);

lDOM 没有提供insertAfter() 方法

function
insertAfter(newElement,targetElement){

//获取目标元素的父节点

var
parentElement=targetElement.parentNode;

//如果目标元素是最后一个元素,则新元素插入到目标元素的后面

if(parentElement.lastChild==targetElement){

parentElement.appendChild(newElement);

}else{//如果目标元素不是最后一个元素,则新元素插入到目标元素的的

//下一个兄弟节点的前面,即目标元素的后面

parentElement.insertBefore(newElement,targetElement.nextSibling);

}

}

lremoveChild()从一个给定元素里删除一个子节点

var reference =element.removeChild(node);

返回值是一个指向已被删除的子节点的引用指针。

某个节点被removeChild()方法删除时,这个节点所包含的所有子节点将同时被删除。

如果想删除某个节点,但不知道它的父节点是哪一个,parentNode 属性可以帮忙。

lChildNodes:返回一个数组,这个数组由给定元素节点的子节点构成:

var nodeList = node.childNodes;

文本节点和属性节点都不可能再包含任何子节点,所以它们的ChildNodes属性永远会返回一个空数组。如果想知道某个元素有没有子节点,可以用hasChildNodes方法。如果想知道某个元素有多少个子节点,可以用childNodes数组的 length属性。childNodes属性是一个只读属性。

lfirstChild:该属性返回一个给定元素节点的第一个子节点,返回这个节点对象的指针。

var reference = node.firstChild;

文本节点和属性节点都不可能包含任何子节点,所以它们的firstChild属性永远会返回null。某个元素的firstChild属性等价于这个元素的childNodes节点集合中的第一个节点,即:

var reference = node.ChildNodes[0];

firstChild属性是一个只读属性。

llastChild:对应 firstChild的一个属性。

lnextSibling:返回一个给定节点的下一个兄弟节点。

lparentNode:返回一个给定节点的父节点。

parentNode属性返回的节点永远是一个元素节点,因为只有元素节点才有可能包含子节点。

document 节点的没有父节点。

lpreviousSibling:返回一个给定节点的上一个兄弟节点

时间: 2024-08-07 07:01:36

DOM 元素 操作的相关文章

javascript中的dom元素操作

javascript中的Dom事件操作 函数 函数就是将一些方法封装,通过调用执行函数. 作用: 避免重复代码. 简化编程,让编程模块化. 语法:fuction(){ } function是一个关键字,类似于Python中定义函数的"def": 小括号里放参数 大括号里放函数语句. 函数的调用 函数名+() 函数的参数 形参 实参 argument:只能在函数中使用. 返回实参的个数:argument.length 返回形参的个数:fn.length 伪数组 可以修改元素,但不能改变数

dom 元素操作 增删改

//获取网页宽高 var sHeight=document.documentElement.scrollHeight; var sWidth=document.documentElement.scrollWidth; //获取可视区域宽高 var wHeight=document.documentElement.clientHeight; var wWidth=document.documentElement.clientWidth; //创建div var oMask=document.cre

jquery dom元素操作

jquery 获取父节点,兄弟节点,在节点内插入内容. ①$("#test1").parent() //  父节点 ②$("#test1").next() //下一个节点 ③$("#test1").append('<div class="error_info"><span class="Validform_checktip"></span></div>'); 

jQuery碎语(1) 基础、选择要操作的元素、处理DOM元素

1.基础 jquery对象集: $():jquery对象集合 获取jquery对象集中的元素: 使用索引获取包装器中的javascript元素:var temp = $('img[alt]')[0] 使用jquery的get方法获取jquery对象集中的javascript元素:var temp = $('img[alt]').get(0) 使用jquery的eq方法获取jquery对象集中的jquery对象元素: $('img[alt]').eq(0) $('img[alt]').first(

操作DOM元素,Dom元素添加颜色,删除第二个li元素

<html> <head> <title>demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> /* 示例操作DOM元素 */ window.onload = function(){ //给Dom元素添

JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

带有Element和不带的区别 a)  带Element的获取的是元素节点 b)  不带可能获取文本节点和属性节点 获取所以子节点 a)   . childNodes b)   . children c)   . parentNode . children [索引] . children:获取所有子节点 opacity:0-1:透明度 alpha(opacity:百分数):IE6/7/8透明度 先绑定事件再进行循环 previousNode()上一个兄弟节点 alert(变量名)可测试变量名是否

jquery操作DOM元素的复习

使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 操作元素的内容 使用html()和text()方法操作元素的内容,当两个方法的参数为空时,表示获取该元素的内容,而如果方法中包含参数,则表示将参数值设置为元素内容. var $content = "<b>唉,我又变胖了!</b>"; $("#html").h

web进阶之jQuery操作DOM元素&amp;&amp;MySQL记录操作&amp;&amp;PHP面向对象学习笔记

hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 控制就是获取以及设置 <h3>attr()方法设置元素属性</h3> <a href="http://127.0.0.1" id="a1">点我就变</a> <d

jQuery操作得到DOM元素

jQuery再DOM操作方面提供了一些函数及其用法,这里就对DOM元素的包装简单说明一下,怎样使用会了,对其它方法也能灵活的使用.以下是一个小样例及其效果图. 代码例如以下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html;