标签：des style blog http io ar color 使用 sp
通过节点层次关系获取节点：(重要)
当节点既没有id，也没有name，通过节点当中的关系，是另一种获取节点方式
<!--
通过节点关系获取节点
关系：
1.父节点:parentNode，一个父节点
2.子节点:childNodes ,直接后代节点集合
3.兄弟节点：比较少用，因为没有浏览器的解析方式，顺序就不一样
上一个兄弟节点:previousSibing
下一个兄弟节点:nextSibing
-->
<script type="text/javascript">
function getNodeByLevel() {
//获取页面中的表格节点
var tableNode = document.getElementById("tableId");
//获取父节点
//var node = tableNode.parentNode;
//alert(node.nodeName);
//获取子节点
var chnodes = tableNode.childNodes;
//不知为啥，table的第一个孩子节点是#text(文本节点),浏览器的原因
//table标签完了之后是一个回车，谷歌浏览器认为是一个空白的文本节点
// alert(chnodes[1].childNodes[0].nodeName);
//获取兄弟节点
var preBrotherNode = tableNode.previousSibling;
alert(preBrotherNode.nodeName);
//尽量少用兄弟节点，因为浏览器不同解析不一致，很容易就解析出文本节点
}
</script>
<input type="button" value="通过节点关系获取标签" onclick="getNodeByLevel()"/>
<div>div区域</div>
<table id="tableId">
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
</table>
<dl>
<dt>上层项目</dt>
<dd>下层项目</dd>
</dl>
<a href="http://www.baidu.com">百度</a><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
border:#FF00FF solid 1px;
width: 200px;
padding:25px;
margin: 10px;
}
#div1{
background-color: #F0000F;
} #div2{
background-color: #0CCFFF;
} #div3{
background-color: #0FF00F;
}
</style>
</head>
<body>
<script type="text/javascript">
//创建并添加节点
//在div1中添加一个文本节点
function CreatAndAddNode1_1(){
/*
1.创建文本节点
2.获取div1节点
3.将文本节点添加到div1节点中
*/
var oTextNode = document.createTextNode("文本节点");
var odiv1Node = document.getElementById("div1");
odiv1Node.appendChild(oTextNode);
}
//在div1中创建并添加按钮节点
function CreatAndAddNode1_2(){
//没有创建按钮这个方法，所以创建元素
var obuttonNode = document.createElement("input");
obuttonNode.type = "button";//指定类型
obuttonNode.value = "我的按钮";
var odiv2Node = document.getElementById("div1");
//将按钮添加div1节点中
odiv2Node.appendChild(obuttonNode);
}
function CreatAndAddNode2(){
//通过另一种方式添加节点
/*
使用容器型标签中的一个属性innerHTML
这个属性可以设置html文本
*/
var odiv1Node = document.getElementById("div1");
//odiv1Node.innerHTML = "ceshiyixia";//不论点多少下只能覆盖
odiv1Node.innerHTML="<input type='button' value='我的小按钮'>";
odiv1Node.innerHTML="<a href='http://www.baidu.com'>我的超链接</a>";//覆盖上面按钮
}
function DeleteNode(){
//将'你好'节点删除
var odiv2Node = document.getElementById("div2");
//odiv2Node.remove();
odiv2Node.parentNode.removeChild(odiv2Node);
}
function ChangeNode1_1(){
//用div3节点添换div1节点
var odiv3Node = document.getElementById("div3");
var odiv1Node = document.getElementById("div1");
odiv1Node.parentNode.replaceChild(odiv3Node,odiv1Node);//用div3替换div1
}
function ChangeNode1_2(){
//把div1克隆成div3
var odiv3Node = document.getElementById("div3");
var odiv1Node = document.getElementById("div1");
var ocopyNode3 =odiv3Node.cloneNode(true);//将true，连文本都克隆
odiv1Node.parentNode.replaceChild(ocopyNode3,odiv1Node);//div1克隆div3
}
</script>
<input type="button" value="创建并添加节点" onclick="CreatAndAddNode1_1()">
<input type="button" value="创建并添加节点按钮" onclick="CreatAndAddNode1_2()">
<input type="button" value="创建并添加节点按钮2" onclick="CreatAndAddNode2()">
<input type="button" value="删除节点" onclick="DeleteNode()">
<input type="button" value="改变节点_替换" onclick="ChangeNode1_1()">
<input type="button" value="改变节点_克隆" onclick="ChangeNode1_2()">
<div id="div1"> </div>
<div id="div2"> 你好 </div>
<div id="div3"> 我好 </div>
</body></html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link,a:visited{/*访问前访问后样式不遍*/
color:#0044FF;
text-decoration: none;
}
a:hover{
color: #FF8800;
}
#newstext{
width: 400px;
border: #F000FF solid 1px;
padding: 10px;
}
</style>
</head>
<body>
<script type="text/javascript">
function changeFont(SIZE){
//获取div节点对象
var odivNode = document.getElementById("newstext");
//获取 odivNode 的style属性 对象
odivNode.style.fontSize = SIZE;//CSS中样式的属性如font-size,DOM中就是fontSize
}
</script>
<h1>新闻标题</h1><hr/>
<a href="javascript:void(0)" onclick="changeFont('24px')">大字体</a>
<a href="javascript:void(0)" onclick="changeFont('16px')">中字体</a>
<a href="javascript:void(0)" onclick="changeFont('12px')">小字体</a> <br>
<div id="newstext">
阿斯顿所得到的的点点滴滴的点点滴滴的点点滴滴的点点滴滴单独
....
</div>
</body>
</html><!DOCTYPE html>
<html>
<head lang="en">
<!-- <link href="1.css" id="xxx"/>
下面的样式代码，就可以封装到单独的css文件中
同样也可以获取到link标签，通过js的方法传递2.css，就可以实现改变另一样式的效果
-->
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link,a:visited{/*访问前访问后样式不遍*/
color:#0044FF;
text-decoration: none;
}
a:hover{
color: #FF8800;
}
#newstext{
width: 400px;
border: #F000FF solid 1px;
padding: 10px;
}
.norml{
color: #000000;
font-size: 16px;
background-color: #CDD8D0;
}
.max{
color: #808080;
font-size: 28px;
background-color: #9CE9B4;
}
.min{
color: #FF0000;
font-size: 12px;
background-color: #Ffffff;
}
</style>
</head>
<body>
<script type="text/javascript">
function changeFont(selectorname){
var odivNode = document.getElementById("newstext");
odivNode.className = selectorname;//html中是class，DOM是className
}
</script>
<h1>新闻标题</h1><hr/>
<a href="javascript:void(0)" onclick="changeFont('max')">大字体</a>
<a href="javascript:void(0)" onclick="changeFont('norml')">中字体</a>
<a href="javascript:void(0)" onclick="changeFont('min')">小字体</a> <br>
<div id="newstext" class = "norml">
阿斯顿所得到的的点点滴滴的点点滴滴的点点滴滴的点点滴滴单独
...
</div>
</body>
</html> 标签：des style blog http io ar color 使用 sp
原文地址：http://blog.csdn.net/wjw0130/article/details/41809685
