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

随机推荐

【转】Objc的底层并发API
本文由webfrogs译自objc.io,原文作者Daniel Eggert.转载请注明出处! 小引本篇英文原文所发布的站点objc.io是一个专门为iOS和OS X开发者提供的深入讨论技术的平台, ...
let和const关键词
ECMAScript 6中的let和const关键词 2013-11-28 21:46 by BarretLee, 21 阅读, 0 评论, 收藏, 编辑 ECMAScript 6中多了两个定义变量的 ...
一个Shell小脚本——旋转的斜杠
话不多说,请从代码中寻找乐趣吧! #!/bin/bash #----中断计数器----# incr= #----旋转的斜杠----# spin="/-\|" echo -en &q ...
highlight高亮
玩转正则之highlight高亮 2013-10-07 05:16 by 靖鸣君, 584 阅读, 3 评论, 收藏, 编辑程序员在编写代码的时候少不了和字符串以及“查询”打交道,两者的交集中有一个 ...
用django搭建一个简易blog系统（翻译）（一）
Django 入门原始网址: http://www.creativebloq.com/netmag/get-started-django-7132932 代码:https://github.com/ ...
揭开redis神秘面纱
一直听别人说NoSQL,以前一直不明白,这到底是什么东西,今天听过我们涛哥的讲解,略有小感,特此小记. NoSQL(NoSQL = Not Only SQL),意为反SQL运动,是一项全新的数据库革命 ...
生成GUID字符串
//生成GUID字符串 string loginToken = System.Guid.NewGuid().ToString();
EntityFramework5提供的迁移工具
目录背景之前是如何做的?EntityFramework5提供了更好的选择备注背景返回目录刚毕业做项目的时候,没有用“迁移”这个概念,系统发布和更新的过程让人非常痛苦,在学习 Ruby On Ra ...
IceMx.Mvc 我的js MVC 框架三、动手来写一个评论模块儿
介绍本人菜鸟,一些自己的浅薄见解,望各位大神指正. 本框架有以下优点 1.简单(调用简单.实现简单.不过度设计) 2.视图.控制器.模型分离(分离对于维护十分有必要) 3.组件化(每一个mvc模块儿 ...
两种高性能 I/O 设计模式 Reactor 和 Proactor
两种高性能 I/O 设计模式 Reactor 和 Proactor Reactor 和 Proactor 是基于事件驱动,在网络编程中经常用到两种设计模式. 曾经在一个项目中用到了网络库 libeve ...

DOM小解

DOM小解的更多相关文章

随机推荐

热门专题