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

javascript基础。dom操作

2011-10-23 19:14 525 查看

属性/方法	类型／返回类型	说明
nodeName	String	节点的名字<div> <span>等
nodeValue	String	节点的值 div的内容
nodeType	Number	节点的类型常量值之一
firstChild	Node	指向childNodes列表的第一个节点
lastChild	Node	指向childNodes列表中的最后一个节点
childNodes	NodeList	所有子节点的列表
previousSibling	Node	指向前一个兄弟节点,如果这个节点是第一个，则返回为null
removeChild(node)	Node	从childNodes中删除node
replaceChild(newnode,oldnode)	Node	将childNodes中的oldnode替换成newnode
insertBefore(newnode,refnode)	Node	在childNodes中的refnode之前插入newnode

3.4:创建和操作节点

1) 创建新节点

createDocumentFragment()

创建文档碎片节点

createElement(tagname) 用的比较多

创建标签名tagname的元素

createTextNode(text)

创建包含文本text的文本节点

appendChild()

添加子元素

操作节点

removeChild()

删除一个节点

replaceChild()

替换一个节点的内容

insertBefor()

在一个节点之前插入新节点

如：有以下HTML页面

<html><head><title>createElementd() Example</title> </head>

<body> </body>

</html>

如：现在想使用DOM来添加下列代码到此页面上

<p>Hellow World!</p>

则：

var Op = document.createElement(“p”);

var oText = document.createTextNode(“Hellow World”);

Op.appendChild(oText);

document.body.appendChild(Op);

注意：在这里对于DOM的操作必须在页面完全载入之后才能进行。

动态创建节点

function CreateP(){

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

var oText = document.createTextNode("Hellow World");

Op.appendChild(oText);

document.body.appendChild(Op); }

<input type="button" value="createElement" onclick="CreateP()"/>

<html> <head> <title> DOM Simple </title> </head> <body>

<p> Hellow</p>
<p> how are you?</p>

<p> ok</p>

</body></html>

Eg:

function removeElement(){

var oP = document.body.getElementsByTagName("p")[0];//获取文档p标签集合的第一个

//document.body.removeChild(oP);

oP.parentNode.removeChild(oP);

}

function ReplaceElement(){

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

var oText = document.createTextNode("aaaaaaaaaaaaaaaa");

oNewP.appendChild(oText);//添加到段落

var oOldP= document.body.getElementsByTagName("p")[0];//得到第一个段落的引用

oOldP.parentNode.replaceChild(oNewP,oOldP);}//用oNewP替换调oOldP

function insertElement() {

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

var oText = document.createTextNode("aaaaaaaaaaaaaaaa");

oNewP.appendChild(oText);

var oOldP= document.body.getElementsByTagName("p")[0];

document.body.insertBefore(oNewP,oOldP);}

利用javascript操作dom，css元素

CSS样式特性	Javascript样式属性
color	style.color
font	style.font
background-color	style.backgroundColor
font-family	style.fontFamily

Eg

<input type = "button" value="click me"

onmouseover="this.style.backgroundColor='black';this.style.color='white'"//背景变黑色文字变白色

onmouseout="this.style.backgroundColor='white';this.style.color='black'" style="background-Color:white;color:black"/>

注意：可以用style.cssText来得到一个对象上所应用的css字符串

案例一

<a href="javascript:void(0)" onmouseover="showTip(event)"

onmouseout = "hiddenTip(event)">click me</a>

style="background-color:Yellow;position:absolute;visibility:hidden;padding:5px;">

<span>这是我自己写的提示<br />这是我自己写的提示</span></div>

position:absolute; 决定定位，根据页面的进行定位

<script type="text/javascript">

function showTip(oEvent)

{

//alert(document.documentElement.scrollTop);

var oDiv = document.getElementById("divTip1");//得到div的引用

oDiv.style.visibility ="visible"; //显示一个提示

oDiv.style.left = document.documentElement.scrollLeft+ oEvent.clientX+5;

//这个div的坐标改为 x的坐标+5

oEvent是鼠标的，如

scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置。滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时，位置是 0。

scrollTop 滚动条的一个定位

oDiv.style.top = document.documentElement.scrollTop+oEvent.clientY+5;

//这个div的坐标改为y的坐标+5

}

function hiddenTip(oEvent)

{ var oDiv = document.getElementById("divTip1");

oDiv.style.visibility = "hidden"; }

</script>

案例2:折叠

<div id="divTitle" style="width:200px;height:20px;background-color:blue;cursor:pointer" onclick="toggle('divContent')"></div>

<div id="divContent" style="width:200px;height:50px;background-color:red;display:block">Content</div>

function toggle(div) {

var mydiv = document.getElementById(div);

if (mydiv) {

mydiv.style.display=mydiv.style.display == "none"?"block":"none"; }//显示和隐藏互相切换

} 动态注入CSS

function addhupoocss(cssfile){

var head = document.getElementsByTagName('HEAD').item(0);

var style = document.createElement('link');

style.href = cssfile;

style.rel = 'stylesheet'

style.type = 'text/css';

head.appendChild(style);

}

得到head元素。创建link这个元素，给这个link元素附属性（css文件），然后，添加到head标签里面

动态注入js

function addjs(jsfile){

var head = document.getElementsByTagName('HEAD').item(0);

var script = document.createElement('script');

script.src = jsfile;

script.type = 'text/javascript';

head.appendChild(script);

}

表格里面，选中一行，使改行变色

<input ID="chkID" type="checkbox" onclick="setRowColor(this)" /> 这个check控件

<body onload="init()">

function init(){

var oTable = document.getElementById("GridView1");GridView1是表格id

if (oTable){//如果得到了这个对象

var oTrs = oTable.getElementsByTagName("tr");//得到所有的tr标签

for(var i=1;i<oTrs.length;i++) {//从表格第二行（标题是第一行）

oTrs[i].onmouseover=function(){

this.style.backgroundColor='yellow'; }//this指当前tr本身

oTrs[i].onmouseout=function(){

this.style.backgroundColor='white'; } } } }

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

标签：

相关文章推荐

新的分享

章节导航