您的位置：首页 > Web前端 > JavaScript

原生Javascript操作DOM的一些常用方法集合

2013-08-12 23:55 921 查看

JS-DOM Element方法和属性

S-DOM Element方法和属性

一,获取html元素

1.getElementByID(id)

通过对元素的ID访问,这是DOM一个基础的访问页面元素的方法.

example:

<div

id="divid">测试</div>

<script language="javascript">

var

div=document.getElementByID("divid");

alert (div.nodeName);

//显示元素名

</script>

如果id在元素中不是唯一的,那么获得的将是第一个ID.

2.getElementsByName(name)

仅用于input

radio checkbox等元素,返回名字为name的元素数组

example:

<div

name="george"></div>

<input

name="george"></div>

<script language=javascript>

var

ge=document.getElementsByName("george");

alert

(georges.length); //获取georges个数,对div唔效果

</script>

3.getElementsByTagName(tagname)

返回具有tagname的元素列表数组.处理大的DOM结构会用到它

二,DOM

Element常用方法

1.appendChild(node)

//增加内容

向当前对象追加节点,example:

<div

id="test">123</div>

<script type="text/javascript">

var

newdiv=document.createElement("div");

var newtext=document.createTextNode("A

new div");

newdiv.appendChild(newtext)

;

document.getElementById("test").appendChild(newdiv)

;

</script>

当然,上面的功能用document.getElementById("test").innerHTML="测试一下"就可实现,遗憾的是,innerHTML不属于DOM.

2,removeChild(childreference)

移除当前节点的子节点,并返回节点

<div

id="father"><div id="child">A

child</div></div>

<script type="text/javascript">

var

childnode=document.getElementById("child");

var

removednode=document.getElementById("father").removeChild(childnode)

</script>

3.cloneNode(deepBoolean)

复制并返回当前的复制节点,由于复制了原节点的id属性,所以在document树中要改ID属性,以确保ID唯一性.

4,insertBefore(newElment,targetElement) 插入新的节点

在当前节点插入一个新节点,如果targetElement为null,那新节点为最后节点.

example:

<body>

<span

id="lovespan">熊掌我所欲也!</span>

</body>

<script

type="text/javascript">

var

lovespan=document.getElementById("lovespan"); //获取id

var

newspan=document.createElement("span");

var

newspanref=document.body.insertBefore(newspan,

lovespan);

newspanref.innerHTML="鱼与";

</script>

三,DOM Element常用属性

1、childeNodes 返回所有子节点对象,

例如

<ul

id="mylist">

<li>美国</li>

<li>意大利</li>

<li>加拿大</li>

</ul>

<script>

var

msg="" ;

var mylist=document.getElementById("mylist")

for (i=0;

i<mylist.childNodes.length; i++){

var

li=mylist.childNodes[i];

msg+=li.innerText;

}

alert

(msg);

</script>

2,innerHTML

这是一个标准,但它并不书DOM

例如:

<div

id="bbb"><span id="aaa">我拉</span></div>

<input

type=button value="点击看看">

<script

language="javascript">

function

change()

{

document.getElementById("aaa").innerHTML=

"修改修改";

}

</script>

3,style

这是一个极其重要的属性,可以获取并修改每个单独的样式.

例如:document.getElementByTagName("body")[0].style.backgroundColor="#cccccc"

4、firstChild 返回第一个子节点

lastChild

返回最后一个子节点

parentNode 返回父节点的对象。

nextSibling

返回下一个兄弟节点的对象

previousSibling 返回前一个兄弟节点的对象

nodeName

返回节点的HTML标记名称，使用英文的大写字母，如P, FONT

5,click()

执行元素的一次点击，可以用于通过脚本来触发onClick函数

四.JS设置DIV的属性

setAttribute方法:

var a=document.createElement("div"); //新建一个DIV

a.id="div1";

//给新加的DIV命名

a.style.setAttribute("zIndex",2);

//设置DIV叠放次序

a.style.setAttribute("textAlign",Dalign);

//对齐方式

a.style.setAttribute("border","#e6e7e8 1px solid");

//边框颜色

a.style.width=divwidth; //DIV宽度

a.style.height=Dheight;

//DIV高度

a.setAttribute("position","absolute");

a.style.backgroundColor=Dbgcolor;

//DIV背景

a.setAttribute("z-index","2"); //DIV叠放次序

a.style.top =

divtop+"px"; //DIV上边距

a.style.left = divleft+"px";

//DIV左边距

a.setAttribute("innerHTML",info10[0].firstChild.data+"<br>"+info11[0].firstChild.data);

document.body.appendChild(a); //新建DIV结束

隐藏div：document.getElementById（“啊”）.style.display="none" //block 出现

document.getElementById（“啊”）.style.disabled="true"

document.getElementById（“啊”）.style.readOnly="true"

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航