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

javaScript之DOM操作（一）

2017-01-11 01:49 459 查看

现在我们就开始认识什么是DOM？

DOM-文档对象模型（Document Object Moel）,定义访问和处理HTML文档的标准方法。

DOM将HTML文档呈现为带有元素，属性和文本的树结构（节点树）

HTML文档由以下三种节点构成

1.元素节点:<html><head><body><p>等都是元素节点，即标签；

2.属性节点:元素属性，<input>标签的type属性可以是button，text等；

3.文本节点:向用户展示的内容，如<li>...<li>中的JavaScript,DOM,CSS等文本；

例子

<div id="" class="">Hello</div>//<div>是元素节点，id，class是属性节点，Hello是文本节点

1.通过ID获取元素

标签的id属性值是唯一的，我们可以通过id找到指定的标签再对其操作

语法:

document.getElementById(“id”) ;

key:这里获取的元素是一个对象，如果要对元素进行操作必须通过他的属性和方法。

2.innerHTML属性-用于获取和替换HTML元素的内容

语法:Object.innerHTML

key:innerHTML区分大小写

var mychar=  document.getElementById("test").innerHTML;
document.write("结果:"+mychar); //输出获取的id名为test的内容（文本节点）

3.改变 HTML 样式

语法:Object.style.property = new style;

例子如下

var mychar= document.getElementById("test");
mychar.style.color = "white";
mychar.style.fontSize = "20px";
mychar.style.backgroundColor='#ccc';
mychar.style.width="300px"

在这里介绍一点基本属性，只包括一小部分CSS样式属性，其他样式也可以通过该方法进行设置和修改

属性描述

font 在一行设置所有字体属性

fontSize 字体大小

fontFamily 字体系列

color 字体颜色

width 元素宽度

height 元素高度

backgroundColor 元素背景颜色

这个例子是动态改变字体的大小

<div style="width:200px;height:120px;" id="test">测试改变字体大小</div>
<input name="" type="button" onclick="document.getElementById('test').style.fontSize='20px';" value="big"/>
<input name="" type="button" onclick="document.getElementById('test').style.fontSize='16px';" value="medium"/>
<input name="" type="button" onclick="document.getElementById('test').style.fontSize='12px';" value="small"/>

key:更改属性的时候记得带上单位px，注意css样式属性的驼峰命名法

4.显示和隐藏（display属性)

语法:Object.style.display = value

value取值:

none 此元素不会被现实

block 此元素被显示为块级元素

key:使用的时候记得带上双引号

5.控制类名（className 属性)-设置或返回元素的class属性

语法:Object.className = classname

作用:1.获取元素的class属性

2.为网页内的某一个元素指定一个css样式来更改该元素的外观

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className属性</title>
<style>
body{ font-size:16px;}
.one{ border:1px solid #eee;
width:230px;
height:50px;
background:#ccc;
color:red;}
.two{  border:1px solid #ccc;
width:230px;
height:50px;
background:#9CF;
color:blue;}
</style>
</head>
<body>
<p id="p1" > 为网页内的某一元素指定一个css样式</p>
<input type="button" value="添加样式" onclick="add()"/>
<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="更改外观" onclick="modify()"/>
<script type="text/javascript">
function add(){
var p1 = document.getElementById("p1");
p1.className="one";
}
function modify(){
var p2 = document.getElementById("p2");
p2.className="two";
}
</script>
</body>
</html>

这是一个综合性的小例子

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
body{font-size:12px;}
#txt{
height:400px;
width:600px;
border:#333 solid 1px;
padding:5px;}
p{  line-height:18px;
text-indent:2em;}
</style>
</head>
<body>
<h2 id="con">JavaScript课程</H2>
<div id="txt">
<h5>JavaScript学习</h5>
<p>1. JavaScript入门</p>
<p>2. JavaScript进阶，掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
<p>3. 深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
</div>
<form>
<!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
<input type="button" value="改变颜色" onclick="changeColor()">
<input type="button" value="改变宽高" onclick='changeWandH()'>
<input type="button" value="隐藏内容" onclick="hideContent()">
<input type="button" value="显示内容" onclick="displayContent()">
<input type="button" value="取消设置" onclick="cancelSetting()">
</form>
<script type="text/javascript">
var txt = document.getElementById('txt');
//定义"改变颜色"的函数
function changeColor(){
txt.style.color="#ff0000";
txt.style.backgroundColor='#124512';
}
//定义"改变宽高"的函数
function changeWandH(){
txt.style.width="200px";
txt.style.height="300px";
}
//定义"显示内容"的函数
function displayContent(){
txt.style.display="block"
}
//定义"隐藏内容"的函数
function hideContent(){
txt.style.display="none"
}
//定义"取消设置"的函数
function cancelSetting(){
if(confirm("确定取消设置？")){
txt.removeAttribute('style');
}
}
</script>
</body>
</html>

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

标签： dom html 文档 javascript

相关文章推荐

新的分享

章节导航