DOM小解
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM小解相关的知识，希望对你有一定的参考价值。
|
现在来说说DOM
文档对象模型DOM（Document Object Model）定义访问和处理html文档的标准方法。DOM将html文档呈现为带有元素
，属性和文本的树结构（节点树）
先来看看下列代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title>DOM</title>
</head>
<body>
<h2><a href="http://www.baidu.com">javascript DOM</a></h2>
<p>对HTML元素进行操作，可添加，改变或移除CSS样式等</p>
<ul>
<li>JavaScript</li>
<li>DOM</li>
<li>CSS</li>
</ul>
</body>
</html>
html文档可以说由节点构成的集合，三种常见的DOM节点：
1.元素节点:如<html>、<body>、<p>等都是元素节点，即标签。
2.文本节点:向用户展示的内容，如<li>...</li>种的JavaScript、DOM、CSS等文本
3.属性节点:元素属性，如<a>标签的链接属性href="http://www.baidu.com"
看下面的代码：
<a href="http://www.baidu.com">JavaScript DOM</a>
这里面href="http://www.baidu.com"是属性节点 JavaScript DOM是文本节点
首先，通过ID获取元素
学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号
一样，只要通过身份证号就可以找到相对应的人，那么在网页中我们通过id先找到标签，然后进行操作。
语法：
document.getElementById("id")
今天晚上暂时更新到这里。。明天我继续更新。。。。。。
接上面的。下面继续： 下面来看看代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type
content="text/html;charset=gb2312">
<title>获取元素</title>
<script type="text/javascript">
var mye=document.getElementById("con");//获取元素存储在变量mye中
document.write(mye);//输出变量mye
</script>
</head>
<body>
<h3>Hello</h3>
<p id="con">I Love JavaScript</p>
</body>
</html>
结果：null或者[object HTMLParagraphElement]
注意：获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。
innerHTML属性用于获取或替换HTML元素的内容
语法：
Object.innerHTML
注意：
1.Object是获取的元素对象，如通过document.getElementById（"ID"）获取的元素
2.注意书写，innerHTML区分大小写
我们通过id="con"获取<p>元素，并将元素的内容输出和改变元素内容，如下：
<!DOCTYPE HTML>
<html>
<head>
<title>innerHTML</title>
</head>
<body>
<p id="con">Hello World!</p>
<script>
var mycon=document.getElementById("con");
document.write("p标签原始内容："+mycon.innerHTML+"<br>");
//输入元素内容
mycon.innerHTML="New text!"//修改p元素内容
document.write("p标签修改后的内容为："+mycon.innerHTML);
</script>
</body>
</html>
注意！！！看清楚，这里的innerTHML是可以获取！还有！替换！的！既可以获取，
又可以替换！懂了没有！不要再询问为什么前面也可以得到原始内容！看清楚！
然后HTML DOM允许JavaScript改变HTML元素的样式，如何改变HTML元素的样式呢？
语法：
Object.style.property=new style;
注意：Object是获取的元素对象，如通过document.getElementById("id")获取的
元素。
属性表如下：
属性 描述
backgroundColor 设置元素背景色
height 设置元素高度
width 设置元素宽度
color 设置文本的颜色
font 在一行设置所有的字体属性
fontFamily 设置元素的字体系列
fontSize 设置元素的字体大小
注意：这个表只是一小部分的css样式属性，其他的样式也可以通过该方法设置和
修改。
看看下面代码：
改变<p>元素的样式，将颜色改为红色，字号改为20，背景色改为蓝色：
<p id="pcon">Hello World!</p>
<script>
var kk=document.getElementById("pcon");
kk.style.color="red";
kk.style.fontSize="20";
kk.style.backgroundColor="blue";
</script>
网页中擦很难过常会看到显示和隐藏的效果，可以通过display属性来设置
语法：
Object.style.display=value
注意：Object是获取的元素对象，如通过document.getElementById("id")获取的
元素。
value取值：
值 描述
none 此元素不会被显示（即隐藏）
block 此元素将显示为块级元素（即显示）
看下面代码：
<!DOCTYPE THML>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html,charset=gb2312">
<title>display</title>
<script type="text/javascript">
function hidetext()
{
document.getElementById("con").style.display="none";
}
function showtext()
{
document.getElementById("con").style.display="block";
}
</script>
</head>
<body>
<h1>JavaScript</h1>
<p id="con">
作为一个web开发者来说，如果你想提供漂亮的网页，令客户满意的上网体验，JavaScript
是必不可少的工具。</p>
<form>
<input type="button" onclick="hidetext()" value="不显示段落内容">
<input type="button" onclick="showtext()" value="显示段落内容">
</body>
</html>
接下来说一说控制类名（className属性）
className属性设置或返回元素的class属性。
语法：
Object.className=classname
作用：
1.获取元素的class属性
2.为网页内的某个元素指定一个css样式来更改该元素的外观
看看下面的代码，获得<p>元素的class属性和改变className：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/htlm,charset=gb2312">
<title>className属性</title>
<style type="text/css">
input{font-size:10px;}
.one{
width:200px;
background-color:#ccc;
}
.two{
font-size:18px;
color:#FOO;
}
</style>
</head>
<body>
<p id="con" class="one">JavaScript</p>
<form>
<input type="button" value="点击修改" onclick="modifyclass()"/>
</form>
<script type="text/javascript">
var mychar=document.getElementById("con");
document.write("p元素Class值为："+mychar.className+"</br>");
//输出p元素Class属性
function modifyclass(){
mychar.className="two";//改变className
}
</script>
</body>
</html>
这里注意！这个地方的className还有前面提到的getElementById等等都必须严格
遵循驼峰法，否则将不起作用。
 |