javascript基础。dom操作
| 属性/方法 |
类型／返回类型 |
说明 |
| 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'; } } } }