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

js dom操作

2015-11-30 20:11 399 查看

平时jQuery用习惯了，对js真的不是很熟，整理一下，顺便复习一遍。

一,获取html元素
1.getElementById()
通过对元素的id查找dom元素，这是js访问页面中的元素的方法。例子如下：

<div id='myId'>测试</div>
<script>
var div=document.getElementById("myId");
</script>

如果id在元素中不是唯一的，那么获得的将是第一个id。所以一般id唯一。

2.getElementsByName(name)
仅用于input的radio和checkbox等元素，返回名字为name的元素数组。例子如下：

<div name="a"></div>
<input type="radio" name="a" value="1" /> 1
<br/>
<input type="radio" name="a" value="2" /> 2
<br/>
<input type="radio" name="a" value="3" /> 3
<script>
var num=document.getElementsByName("a");
alert (num.length);  //获取个数，div并不算，所以为3
</script>

3.getElementsByTagName(tagname)
返回具有tagname的元素列表数组.处理大的DOM结构会用到它。例子如下：

<!DOCTYPE html>
<html>
　　<head>
　　<meta charset="utf-8">
　　<title>try</title>
　　　　<script type="text/javascript">
function getElements() {
var x=document.getElementsByTagName("input");
alert(x.length);
}
</script>
</head>
<body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()" value="How many input elements?" />
</body>
</html>

可是也有一些浏览器不支持，可以用以下代码重写这个方法。

function getElementsByTagName(node, tagName) {
var elements = [], i = 0, anyTag = tagName === "*", next = node.firstChild;
while ((node = next)) {
if (anyTag ? node.nodeType === 1 : node.nodeName === tagName)
elements[i++] = node;
next = node.firstChild || node.nextSibling;
while (!next && (node = node.parentNode))
next = node.nextSibling;
}
return elements;
};

二,DOM操作
1.appendChild(node)
向当前对象追加节点。例子如下：

<div id="test">123</div>
<script>
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，那新节点为最后节点。例子如下：

<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 [b]Element常用属性[/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
这是一个极其重要的属性，可以获取并修改每个单独的样式。例子如下：
document.getElementByTagName("body")[0].style.backgroundColor="#cccccc"

4、firstChild

返回第一个子节点

lastChild

返回最后一个子节点

parentNode

返回父节点的对象。

nextSibling

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

previousSibling

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

nodeName

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

5,click()

执行元素的一次点击，可以用于通过脚本来触发onClick函数来设置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结束
document.getElementById（'a'）.style.display="none";    //隐藏div
document.getElementById（'a'）.style.disabled="true";   //不可操作
document.getElementById（'a'）.style.readOnly="true"    //只读

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

标签：

相关文章推荐

新的分享

章节导航