澳门新萄京8522js常用DOM方法详解

澳门新萄京8522js常用DOM方法详解

改变style属性后:

  1.  getElementsByClassName  

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<title></title>
<meta charset=”gb2312″ />
<style type=”text/css”>
body{
background-color:pink;
}
#div{
/*border:1px solid green;*/
margin:40px auto;
width:900px;
}
#ul li{
float:left;
margin-right:10px;
list-style-type:none;
}
p{
background-color:silver;
width:50%;
margin:0 auto;
top:10px;
text-align:center;
}
#divShow{
/*border:1px solid red;*/
width:640px;
height:400px;
margin:10px auto;
clear:both;
}
</style>
</head>
<body>
<div id=”div”>
<ul id=”ul”>
<li>
<a href=”imgs/0.jpg”>
<img src=”imgs_small/0.jpg” title=”图片111″></img>
</a>
</li>
<li>
<a href=”imgs/1.jpg”>
<img src=”imgs_small/1.jpg” title=”图片222″></img>
</a>
</li>
<li>
<a href=”imgs/2.jpg”>
<img src=”imgs_small/2.jpg” title=”图片333″></img>
</a>
</li>
<li>
<a href=”imgs/6.jpg”>
<img src=”imgs_small/6.jpg” title=”图片444″></img>
</a>
</li>
<li>
<a href=”imgs/4.jpg”>
<img src=”imgs_small/4.jpg” title=”图片555″></img>
</a>
</li>
</ul>
</div>
</body>
</html>
<script type=”text/javascript”>
//创设一个div节点
var divShow = document.createElement(“div”);
//设置div的id属性
divShow.setAttribute(“id”,”divShow”);
//创制二个img节点
var img = document.createElement(“img”);
//设置img的id属性
img.setAttribute(“id”,”img”);
//设置img的src属性
img.setAttribute(“src”,”imgs/face.jpg”);
//将img节点加多到div下
divShow.appendChild(img);
//成立文本表明标签p
var p = document.createElement(“p”);
p.setAttribute(“id”,”p”);
p.appendChild(document.createTextNode(“说明”));

节点.getAttribute(属性名);

  3. contentClass[0] 输出 <p
class=”contentClass” style=”width:500px; height: 30px;background-color:
#ccc”>


//打消<a>标签的跳转
return false;
}

父节点.childNodes

1.  getElementById 

 3.继续 contentTag[0]  输出 <p id=”contentId” style=”width:500px; height: 30px;background-color:
#ccc”> 

//修改p标签的文件
var p = document.getElementById(“p”);
p.firstChild.nodeValue=title;

父节点.getElementsByTagName(“html的标签字”)[0];

澳门新萄京8522 1


节点.getAttribute(属性名);

父节点.firstChild

咱俩常用的还应该有 getAttribute,setAttribute,ChildNodes, nodeType,
nodeValue, firstChild, lastChild 方法得到一些音讯。

那如固然<p#contentId>呢?

document.createTextNode(“文本”); //创立文本节点

节点.setAttribute(属性名,值);

 1.先概念变量 var contentId =
document.getElementById(“contentId”);


//修改img标签的src属性
var img = document.getElementById(“img”);
img.setAttribute(“src”,href);

//撤消<a>标签的跳转
return false;
}
}
</script>

  1. var contentClass =
document.getElementsByClassName(“contentClass”);

 改变style属性后:

document.getElementById(“id号”);

看到HTML会画DOM树。

2.  getElementsByTagName  

   contentTag[1] 输出 <p class=”contentClass” style=”width:500px; height: 30px;background-color:
#ccc”> 

节点.setAttribute(属性名,值);

设置文本

 contentTag[1] 输出 <p
class=”contentClass” style=”width:500px; height: 30px;background-color:
#ccc”>

  3. contentClass[0] 输出 <p class=”contentClass” style=”width:500px; height: 30px;background-color:
#ccc”> 

//当鼠标称上去的时候切换图片
alist[i].onmousemove = function(){
//this就表示近来被点击的节点
//点什么人拿走何人的href和title的值
var href = this.getAttribute(“href”);
var img = this.getElementsByTagName(“img”)[0];
var title = img.getAttribute(“title”);

将HTML变成DOM树

先写二个简单易行的网页做测试:

 

创设节点,增多节点,删除节点

//节点的个性

澳门新萄京8522 2

 2.  getElementsByTagName   

//获得全部的<a>标签
var alist = document.getElementById(“div”).getElementsByTagName(“a”);

//修改p标签的公文
var p = document.getElementById(“p”);
p.firstChild.nodeValue=title;

得到成分节点 getElementById    getElementsByTagName   
getElementsByClassName

估计 getElementsByTagName  
再次回到的是数组

知识点:
将HTML产生DOM树 看到HTML会画DOM树。 创制节点,增添节点,删除节点
varnodeObj = document.createElemen…

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<title></title>
<meta charset=”gb2312″ />
<style type=”text/css”>
body{
background-color:pink;
}
#div{
/*border:1px solid green;*/
margin:40px auto;
width:900px;
}
#ul li{
float:left;
margin-right:10px;
list-style-type:none;
}
p{
background-color:silver;
width:50%;
margin:0 auto;
top:10px;
text-align:center;
}
#divShow{
/*border:1px solid red;*/
width:640px;
height:400px;
margin:10px auto;
clear:both;
}
</style>
</head>
<body>
<div id=”div”>
<ul id=”ul”>
<li>
<a href=”imgs/0.jpg”>
<img src=”imgs_small/0.jpg” title=”图片111″></img>
</a>
</li>
<li>
<a href=”imgs/1.jpg”>
<img src=”imgs_small/1.jpg” title=”图片222″></img>
</a>
</li>
<li>
<a href=”imgs/2.jpg”>
<img src=”imgs_small/2.jpg” title=”图片333″></img>
</a>
</li>
<li>
<a href=”imgs/6.jpg”>
<img src=”imgs_small/6.jpg” title=”图片444″></img>
</a>
</li>
<li>
<a href=”imgs/4.jpg”>
<img src=”imgs_small/4.jpg” title=”图片555″></img>
</a>
</li>
</ul>
</div>
</body>
</html>
<script type=”text/javascript”>
//成立二个div节点
var divShow = document.createElement(“div”);
//设置div的id属性
divShow.setAttribute(“id”,”divShow”);
//成立二个img节点
var img = document.createElement(“img”);
//设置img的id属性
img.setAttribute(“id”,”img”);
//设置img的src属性
img.setAttribute(“src”,”imgs/face.jpg”);
//将img节点加多到div下
divShow.appendChild(img);
//创设文本表明标签p
var p = document.createElement(“p”);
p.setAttribute(“id”,”p”);
p.appendChild(document.createTextNode(“说明”));

上述正是本文的全部内容,希望本文的内容对大家的上学或许干活能推动一定的增援,同有时候也指望多多补助脚本之家!

澳门新萄京8522 3

父节点.firstChild

父节点.removeChild(子节点);

澳门新萄京8522 4

 

DOM:就是用JavaScript操作HTML节点。

文本节点.nodeValue=文本;

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图