首页 > 代码库 > DOM学习笔记三
DOM学习笔记三
通过节点层次关系获取节点：(重要)
当节点既没有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=http://www.mamicode.com/"通过节点关系获取标签" onclick="getNodeByLevel()"/>>
DOM的节点操作：创建并添加
<!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 = http://www.mamicode.com/"我的按钮";>
示例 — DOM新闻字体：
演示新闻字体的大中小字体样式
步骤：
1.用标签封装新闻字体
2.定义样式
3.确定事件源，以及处理方式中被处理的节点
事件源：<a> 事件：onclick
被处理的节点：div-newstext
因为要给超链接加入自定义的事件处理，所以就要先确定超链接的默认点击效果
href="javascript:void(0)",只要是取消超链接效果，都是用这个方式。
<!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>
如果根据用户点击所需要的效果不唯一，那么仅通过传递参数，虽然实现了效果，但是传参过多，阅读性差，js代码和css代码耦合性高，不利用扩展
解决方案，将多个所需的样式，进行封装，封装到选择器中，只要给指定的标签加载不同的选择器，就可以了
预定义样式(一般使用类选择器，注意定义样式的优先级问题)
<!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>
DOM学习笔记三
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。