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 ...

随机推荐

SugarSync网盘之NSDateFormatter
NSDateFormatter 在获取sugarsync网盘的accessToken时候,得到了过期时间.但是这里的过期时间采用的是世界标准时间UTC,而该网盘是国外的,所以在国内显示的时间就不对了, ...
迟到的 WPF 学习 —— 路由事件
1. 理解路由事件:WPF 通过事件路由(event routing)概念增强了传统的事件执行的能力和范围,允许源自某个元素的事件由另一个元素引发,例如,事件路由允许工具栏上的一个按钮点击的事件在被代 ...
【C#】聊聊不需要记密码的密码管理
密码管理(Password Management)肯定所有人都不会陌生,密码管理的来源也是来自于实际需求,当人们需要使用到密码的场景越来越多,场景也越来越复杂,密码的记录就成为了“难题”和“负担”,很 ...
企业架构研究总结（38）——TOGAF架构能力框架之架构能力建设和架构治理
为了确保架构功能在企业中能够被成功地运用,企业需要通过建立适当的组织结构.流程.角色.责任和技能来实现其自身的企业架构能力,而这也正是TOGAF的架构能力框架(Architecture Capabil ...
通过DialogFragment从DatePicker或TimePicker中获取日期数据
通过DialogFragment从DatePicker或TimePicker中获取日期数据一个activity类,里面存有date和time的变量,想通过dialogfragment的方式获取用户输 ...
spring.net AOP配置基础
在第一篇中,我们用配置代理工厂的方式实现了面向切面记日志的功能.非常便捷的实现了AOP,但当我们需要对多个切入点配置通知的时候就需要声明多个代理工厂,这样导致配置文件内容过多,配置过程也很繁琐.spr ...
HttpMessageHandler管道[上篇]
HttpMessageHandler管道[上篇] 整个ASP.NET Web API服务端框架采用管道式设计,这个用于“处理请求.响应回复”的管道本质上就是一组HttpMessageHandler的有 ...
U盘读不出+卷标丢失+像读卡器+大小0+无媒体
U盘读不出+卷标丢失+像读卡器+大小0+无媒体标题有点怪,原因是我不都不知道该怎样概括这个鸟问题,所以尽可能列出一些主要现象,希望有需要的童鞋搜到.但比标题更怪的是问题本身,且听我道来: 陪伴我若干 ...
MapXtrem + Asp.net 地图随窗体改变大小
在B/S框架下,MapXtreme都是基于图片的,也就是说在客户端显示的地图实际上都是一张图片. 地图控件 <cc1:MapControl ID="/> 在调试模式下,编译后的地 ...
schemaeasyui实例：SSh结合Easyui实现Datagrid的分页显示
查了好多资料,发现还是不全,干脆自己整理吧,最少保证在我的做法正确的,以免误导读者,也是给自己做个记载吧! 克日学习Easyui,发现非常好用,界面很雅观.将学习的心得在此写下,这篇博客写SSh结合E ...

DOM小解

DOM小解的更多相关文章

随机推荐

热门专题