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

原生JS操作DOM的一些常用方法集合【转】

2011-06-24 17:41 991 查看

一直用JQuery，今天忽然想不用JQuery实现一些功能，在这个过程中，发现自己对原生的JS很不熟悉，找了点资料，在此做个记录吧！

JS-DOM Element方法和属性

S-DOM Element[/b]方法和属性[/b]
一,获取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[/b]常用方法
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属性[/b],所以在document树中要改ID属性[/b],以确保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[/b]常用属性[/b]
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
这是一个极其重要的属性[/b],可以获取并修改每个单独的样式.
例如: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"
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航