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

js——Dom对象，控制html

2016-07-04 14:28 393 查看

1、getAttribute()方法

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>getAttribute()</title>
</head>
<body>
<p id="intro">课程列表</p>
<ul>
<li title="第1个li">HTML</li>
<li>CSS</li>
<li title="第3个li">JavaScript</li>
<li title="第4个li">Jquery</li>
<li>Html5</li>
</ul>
<p>以下为获取的不为空的li标签title值:</p>
<script type="text/javascript">
var con=document.getElementsByTagName("li");
for (var i=0; i< con.length;i++){
var text=con[i].getAttribute("title");
if(text!=null)
{
document.write(text+"<br>");
}
}
</script>
</body>
</html>

2、setAttribute()方法

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<p id="intro">我的课程</p>
<ul>
<li title="JS">JavaScript</li>
<li title="JQ">JQuery</li>
<li title="">HTML/CSS</li>
<li title="JAVA">JAVA</li>
<li title="">PHP</li>
</ul>
<h1>以下为li列表title的值,当title为空时，新设置值为"WEB前端技术":</h1>
<script type="text/javascript">
var Lists=document.getElementsByTagName("li");
document.write(Lists.length+"<br>");
for (var i=0; i<Lists.length;i++)
{
var text=Lists[i].getAttribute("title");
document.write(text +"<br>");
if(text=="")
{
Lists[i].setAttribute("title","WEB前端技术");
document.write(Lists[i].getAttribute("title")+"<br>");
}
}
</script>
</body>
</html>

3、节点属性

DOM 节点有三个重要的属性：

1. nodeName : 节点的名称

2. nodeValue ：节点的值

3. nodeType ：节点的类型

一、nodeName 属性: 节点的名称，是只读的。

1. 元素节点的 nodeName 与标签名相同

2. 属性节点的 nodeName 是属性的名称

3. 文本节点的 nodeName 永远是 #text

4. 文档节点的 nodeName 永远是 #document

二、nodeValue 属性：节点的值

1. 元素节点的 nodeValue 是 undefined 或 null

2. 文本节点的 nodeValue 是文本自身

3. 属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:

元素类型节点类型

元素 1

属性 2

文本 3

注释 8

文档 9

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>节点属性</title>
</head>
<body>
<ul>
<li>javascript</li>
<li>HTML/CSS</li>
<li>jQuery</li>
</ul>
<script type="text/javascript">
var num=document.getElementsByTagName("li");
for (var i=0;i<num.length;i++){
document.write(num[i].nodeName+"<br>");
document.write(num[i].nodeValue+"<br>");
document.write(num[i].nodeType+"<br>");
}
</script>
</body>
</html>

4、访问子节点

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div>
javascript
<p>javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var num=document.getElementsByTagName("div")[0].childNodes;
for(var i=0;i<num.length;i++){
document.write(num[i].nodeName+"   ");
document.write(num[i].nodeType+"   ");
document.write(num[i].nodeValue+"<br>");
}
</script>
</body>
</html>

5、访问子节点的第一和最后项

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="con">
<p>javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var x=document.getElementById("con");
document.write(x.childNodes[1].firstChild.nodeValue+"  ");
document.write(x.childNodes[1].childNodes[0].nodeName+"  ");
document.write(x.childNodes[1].lastChild.nodeName+"<br>");
</script>
</body>
</html>

6、访问父节点

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id="con">
<li id="lesson1">javascript
<ul>
<li id="tcon"> 基础语法</li>
<li>流程控制语句</li>
<li>函数</li>
<li>事件</li>
<li>DOM</li>
</ul>
</li>
<li id="lesson2">das</li>
<li id="lesson3">dadf</li>
<li id="lesson4">HTML/CSS
<ul>
<li>文字</li>
<li>段落</li>
<li>表单</li>
<li>表格</li>
</ul>
</li></ul>
<script  type="text/javascript">
var mylist = document.getElementById("tcon");
var pare=mylist.parentNode.parentNode.parentNode;
document.write(pare.nodeName);
document.write(pare.lastChild.nodeValue);
</script>

</body>
</html>

有问题，运行结果不对！

7、访问兄弟节点

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>nextSibling</title>

</head>

<body>

<ul id="u1">

<li id="a">javascript</li>

<li id="b">jquery</li>

<li id="c">html</li>

</ul>

<ul id="u2">

<li id="d">css3</li>

<li id="e">php</li>

<li id="f">java</li>

</ul>

<script type="text/javascript">

function get_nextSibling(n){

var x=n.nextSibling;

while (x && x.nodeType!=1){

x=x.nextSibling;

}

return x;

}

function get_previousSibling(n){

var x=n.previousSibling;

while (x && x.nodeType!=1){

x=x.previousSibling;

}

return x;

}

var x=document.getElementsByTagName("li")[1];

document.write(x.nodeName);

document.write(" = ");

document.write(x.innerHTML);



var y=get_previousSibling(x);



if(y!=null){

document.write("<br />nextsibling: ");

document.write(y.nodeName);

document.write(" = ");

document.write(y.innerHTML);

}else{

document.write("<br>已经是最后一个节点");

}

</script>

</body>

</html>

8、插入节点

8.1appendChild

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id="test">
<li>JavaScript</li>
<li>HTML</li>
</ul>
<script type="text/javascript">
var otest = document.getElementById("test");
var newnode=document.createElement("li");
newnode.innerHTML="php";
otest.appendChild(newnode);
</script>
</body>
</html>

8.2insertBefore

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id="test">
<li id="first">JavaScript</li>
<li>HTML</li>
</ul>
<script type="text/javascript">
var otest = document.getElementById("test");
var node=document.getElementById("first");
var newnode=document.createElement("li");
newnode.innerHTML="php";
otest.insertBefore(newnode,node);
</script>
</body>
</html>

9、删除节点

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="content">
<h1>html</h1>
<h1>php</h1>
<h1>javascript</h1>
<h1>jquery</h1>
<h1>java</h1>
</div>
<script type="text/javascript">
function clearText() {
var content=document.getElementById("content");
// 在此完成该函数
for(var i=1;i<=content.childElementCount;i++){
var x=content.removeChild(content.childNodes[i]);
document.write("删除的节点："+x.innerHTML+"<br>");
}
}
</script>
<button onclick="clearText()">清除节点内容</button>
</body>
</html>

10、替换元素节点

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div><b id="oldnode">JavaScript</b>是一个很常用的技术，为网页添加动态效果。</div>
<a href="javascript:replaceMessage()"> 将加粗改为斜体</a>
<script type="text/javascript">
function replaceMessage(){
var newnode=document.createElement("i");
var newnodetext=document.createTextNode("CSS");
newnode.appendChild(newnodetext);
var node=document.getElementById("oldnode");
node.parentNode.replaceChild(newnode,node);
}
</script>
</body>
</html>

11、创建元素节点

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
var main = document.body;
//创建链接
function createa(url,text)
{
var body=document.body;
var murl=document.createElement("a");
murl.href=url;
murl.setAttribute("color","red");
murl.innerHTML=text;
body.appendChild(murl);
}
// 调用函数创建链接
createa("http://www.baidu.com","百度");
</script>
</body>
</html>

12、创建文本节点

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
.message{
width:200px;
height:100px;
background-color:#345354;}
</style>
</head>
<body>
<script type="text/javascript">
var ele=document.createElement("p");
ele.className="message";
var textnode=document.createTextNode("I love js");
ele.appendChild(textnode);
document.body.appendChild(ele);
</script>
</body>
</html>

13、浏览器窗口可视区域大小

获取浏览器窗口的尺寸。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript">
var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;
w=window.innerWidth;//第二种方式
h=window.innerHeight;
document.write(w+"<br>"+h);
</script>
</body>
</html>

14、网页尺寸

获取网页内容的宽度和高度，不包括滚动条和工具栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript">
var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;
var w1=window.innerWidth;//第二种方式
var h1=window.innerHeight;
var w2=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h2=document.documentElement.scrollHeight
|| document.body.scrollHeight;
document.write(w+" "+h+"<br>");
document.write(w1+" "+h1+"<br>");
document.write(w2+" "+h2+"<br>");
</script>
</body>
</html>

获取网页的尺寸，包括滚动条和边框

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript">
var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;
var w1=window.innerWidth;//第二种方式
var h1=window.innerHeight;
var w2=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h2=document.documentElement.scrollHeight
|| document.body.scrollHeight;
var w3= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h3= document.documentElement.offsetHeight
|| document.body.offsetHeight;
document.write(w+" "+h+"<br>");
document.write(w1+" "+h1+"<br>");
document.write(w2+" "+h2+"<br>");
document.write(w3+" "+h3+"<br>");
</script>
</body>
</html>

15、网页卷去的距离和偏移量

scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离，即左边灰色的内容。

scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离，即上边灰色的内容。

offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。

offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置。

注意:

1. 区分大小写

2. offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。

<!DOCTYPE HTML>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">

function req(){
var div = document.getElementById("div1");

document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距离屏幕顶部的距离

document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距离屏幕左部的距离

document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1纵向滚动条滚动的距离

document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1横向滚动条滚动的距离

}

</script>

</head>

<body style="border:10px solid #ccc;padding:0px 0px;margin:5px 10px">

<div style="width:60%;border-right:1px dashed red;float:left;">

<div style="float:left;">

<div id="div1" style="border:5px red solid;height:300px;width:200px;overflow:auto">

<div style="height:500px;width:400px">请调整横竖滚动条后，点击按钮后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div>

</div>

<input type="button" value="点击我!" onclick="req()" style="border: 1px solid purple;height: 25px;"/>

</div>

</div>

<div style="width:30%;float:left;">

<ul style="list-style-type: none; line-height:30px;">结果：

<li>offsetTop : <span id="li1"></span></li>

<li>offsetLeft : <span id="li2"></span></li>

<li> scrollTop : <span id="li3"></span></li>

<li>scrollLeft : <span id="li4"></span></li>

</ul>

</div>

<div style="clear:both;"></div>

</body>

</html>

16、案例往表格中添加和删除数据

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
window.onload = function(){
var row=document.getElementsByTagName("tr");
for(var i=0;i<row.length;i++){
bgcChange(row[i]);
}
}
function  bgcChange(obj) {
obj.onmouseover=function () {
obj.style.backgroundColor="#f2f2f2";
}
obj.onmouseout=function () {
obj.style.backgroundColor="#fff";
}
}
// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
var num=2;
function add(){
num++;
var tr=document.createElement("tr");
var xh=document.createElement("td");
var xn=document.createElement("td");
xh.innerHTML="xh00"+num;
xn.innerHTML="第"+num+"学生";
var del=document.createElement("td");
del.innerHTML="<a href='javascript:;' onclick='remove(this);'>删除</a>"
var tab=document.getElementById("table");
tab.appendChild(tr);
tr.appendChild(xh);
tr.appendChild(xn);
tr.appendChild(del);
var row=document.getElementsByTagName("tr");
for(var i=0;i<row.length;i++){
bgcChange(row[i]);
}
}
// 创建删除函数
function remove(obj) {

var tr=obj.parentNode.parentNode;
tr.parentNode.removeChild(tr);
}
</script>
</head>
<body>
<table border="1" width="50%" id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td>xh001</td>
<td>王小明</td>
<td><a href="javascript:;" onclick="remove(this);">删除</a></td>   <!--在删除按钮上添加点击事件  -->
</tr>

<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick="remove(this);">删除</a></td>   <!--在删除按钮上添加点击事件  -->
</tr>

</table>
<input type="button" value="添加一行"  onclick="add()" />   <!--在添加按钮上添加点击事件  -->
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航