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

随机推荐

Eclipse plugin web site 发布和版本更新
Eclipse plugin web site 发布和版本更新在eclipse插件开发过程中免不了要发布1.0, 1.1, 1.2…….等等,随着版本的递增,假如每次都发布一个插件zip包,那使用者 ...
IIS日志字段详解
IIS日志字段详解抓住8月的尾巴,弥补下这个月的空白,事情太多,忘了写博客这回事了. IIS日志字段设置网站运营时 ...
WordPress 4.3.1正式发布修复了3个安全问题
WordPress 4.3.1正式发布修复了3个安全问题! 出于安全性考虑,建议大家进行升级! WordPress 4.3.1 安全维护版本已经发布,该版本是针对之前所有版本的安全更新,强烈建议大 ...
go实现排序的链表
go实现排序的链表 Posted on 2013-08-14 23:25 mac的学习笔记阅读(224) 评论(0) 编辑收藏链表的数据结构比较线性数组,优点是可以方便的对任意的位置进行插入和 ...
CSS样式基础知识
CSS样式基础知识 CSS样式概述 CSS是Cascading Style Sheet 的缩写.译作“层叠样式表单”.是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 引用位 ...
关于JdbcTemplate的queryForList返回值
通过spring的jdbctemplate返回的list其实封装的是需要通过如下方法得到里面的内容的 public void getAllUsers() { List allUsers = new A ...
Android NDK 开发中 adb logcat 命令的使用
一.LogCat 存储在一个叫做 circular memory buffers 的缓冲中. 平时常用的都是通过eclipse 自带的 logcat 插件查看 logcat ,其实也可以通过命令来导出 ...
boost解析XML方法教程
boost库在解析XML时具有良好的性能,可操作性也很强下地址有个简单的说明 http://blog.csdn.net/luopeiyuan1990/article/details/9445691 一 ...
[COM/ATL]浅析COM的思想及原理
COM--Component Object Model,即组件对象模型,它是微软提出的一套开发软件的方法与规范.它也代表了一种软件开发思想,那就是面向组件编程的思想. COM编程思想--面向组件编程思 ...
POJ 1915 经典马步双向bfs
拿这个经典题目开刀...........可是双向时间优势在这题上的效果不太明显 #include <iostream> #include <algorithm> #includ ...

DOM小解

DOM小解的更多相关文章

随机推荐

热门专题