DOM小解

现在来说说DOM

文档对象模型DOM（Document Object Model）定义访问和处理html文档的标准方法。DOM将html文档呈现为带有元素

，属性和文本的树结构（节点树）

先来看看下列代码

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<h2><a href="http://www.baidu.com">javascript DOM</a></h2>

<p>对HTML元素进行操作，可添加，改变或移除CSS样式等</p>

<ul>

<li>JavaScript</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>

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>

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>

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>

<title>display</title>

function hidetext()

{

document.getElementById("con").style.display="none";

}

function showtext()

{

document.getElementById("con").style.display="block";

}

</script>

</head>

<body>

<h1>JavaScript</h1>

作为一个web开发者来说，如果你想提供漂亮的网页，令客户满意的上网体验，JavaScript

是必不可少的工具。</p>

<form>

</body>

</html>

接下来说一说控制类名（className属性）

className属性设置或返回元素的class属性。

语法：

Object.className=classname

作用：

1.获取元素的class属性

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

看看下面的代码，获得<p>元素的class属性和改变className：

<!DOCTYPE HTML>

<html>

<head>

<title>className属性</title>

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>

</form>

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等等都必须严格

遵循驼峰法，否则将不起作用。

DOM小解的更多相关文章

关于DOM的操作以及性能优化问题-重绘重排
写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素二.修改DOM引起的重绘重排一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...
读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
页面嵌入dom与被嵌入iframe的攻防
1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...
通俗易懂的来讲讲DOM
DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...
HTML DOM 介绍
本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...
HTML DOM 对象
本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...
重撸js_2_基础dom操作
1.node 方法返回含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...
虚拟dom与diff算法分析
好文集合: 深入浅出React(四):虚拟DOM Diff算法解析全面理解虚拟DOM,实现虚拟DOM
窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？
引言你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么在之前,React和Em ...

随机推荐

[整理]Breakpoint on arbitrary selector
基本解释了最近在调试时遇到的一些疑问,接下来就是找解决方法了. //-- Begin: 1 T __mh_execute_header 0000000005614542-000000 OPT radr ...
Leetcode: 06/01
今天完成了三道题目,总结一下: 1: Length of last word(细节实现题) 此题有一些细节需要注意(比如 “a_ _” 最后一个单词是a, 而不是遇到空格就直接算成没有),别的基本就是 ...
《C++游戏开发》笔记十三平滑过渡的战争迷雾(一) 原理：Warcraft3地形拼接算法
本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/9611887 作者:七十一雾央新浪微博:http:/ ...
ORA-12520错误解决方法
ORA-12520监听程序无法为请求的服务器类型找到可用的处理程序以下不知道是不是解决方法的方法,因为我只重启下oracle服务就好了,并没进行任何修改引用别人的文章: 1)数据库是专用服务器,但 ...
jquery animate stop函数解析
今天我们来看看jquery中动画操作的stop函数.其实我至今不是很明白啊,所以此文算是求救以及抛砖引玉. 在jquery 1.7版本以前,stop支持两个参数,分别是clearQueue和jumpT ...
Mongodb 集群搭建以及常见错误
Mongodb 集群搭建以及常见错误 1 关于Replica Sets +Sharding(主从复制加分片)搭建,不这详细去说,网上有很多,大部分的例子就三台服务器之间做主从复制,分2个shard,架 ...
EM算法详解
EM算法详解 1 极大似然估计假设有如图1的X所示的抽取的n个学生某门课程的成绩,又知学生的成绩符合高斯分布f(x|μ,σ2),求学生的成绩最符合哪种高斯分布,即μ和σ2最优值是什么? 图1 学生成 ...
CSS 实现的各种球体效果
CSS 实现的各种球体效果[附在线演示] CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有 ...
python supervisor demo deployment
I did a demo about how to deploy other python apps served by a 'supervisord' daemon processor on git ...
Python之路3Day
3.python基础补充(集合,collection系列,深浅拷贝) 一.集合 1.集合(set): 把不同的元素组成一起形成集合,是python基本的数据类型.集合元素(set elements ...

DOM小解

DOM小解的更多相关文章

随机推荐

热门专题