HTML DOM学习之二
1.HTML DOM属性：
**innerHTML属性-获取元素内容的最简单方法是使用innerHTML属性，innerHTML属性对于获取或替换HTML元素的内容很有用
<html>
<body>
<p id="intro">Hello world!</p>
<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>
</body>
</html>
2.nodeName属性规定节点的名称：
**nodeName是只读的；
**元素节点的nodeName与标签名相同；
**属性节点的nodeName与属性名相同；
**文本节点的nodeName始终是#text
**文档节点的nodeName始终是#document
3.nodeValue属性：
**元素节点的nodeValue是undefine或null；
**文本节点的nodeValue是文本本身；
**属性节点的nodeValue是属性值；
<html>
<body>
<p id="intro">Hello world!</p>
<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
4.访问HTML元素（节点）：
**通过使用getElementById()方法：返回带有指定ID的元素
document.getElementById("intro");
语法：node.getElementById("id");
**通过使用getElementsByTagName()方法：返回带有指定标签名的所有元素
document.getElementByTagName("p");
document.getElementById("main").getElemetstByTagName("p");
语法：node.getElementsByTagName("tagname");
**通过使用getElementByClassName()方法：返回带有相同类名的所有HTML元素
5.HTML DOM 修改：改变HTML内容，改变CSS样式，改变HTML属性，创建新的HTML元素，删除已有的HTML元素，改变事件（处理程序）
**创建HTML内容：改变元素内容最简单的方法就是使用innerHTML属性
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
**改变HTML样式：通过HTML DOM，能够访问HTML元素的样式对象；
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
**创建新的HTML元素：必须首先创建该元素（元素节点），然后把它追加到已有元素上
<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph</p>
</div>
<script>
var para=document.createrElement("p");
var node=document.creatTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>
6.修改HTML内容：改变元素内容的最简单的方法就是使用innerHTML属性；
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
7.改变HTML样式：通过HTML DOM，能够访问HTML对象的样式对象；
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
8.使用事件：HTML DOM允许您在事件发生时执行代码；当HTML元素“有事件发生”时，浏览器就会生成事件：
**在元素上点击
**加载页面
**改变输入字段
<html>
<body>
<input type="button" onclick="document.body.style.backgroundColor='lavender';" value="Change background color"/>
</body>
</html>
<html>
<body>
<script>
function ChangeBackground(){
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()" value="Change background color"/>
</body>
</html>
HTML DOM学习之二的更多相关文章
- 从零开始学习jQuery (二) 万能的选择器
本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- Typescript 学习笔记二：数据类型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- amazeui学习笔记二（进阶开发4）--JavaScript规范Rules
amazeui学习笔记二(进阶开发4)--JavaScript规范Rules 一.总结 1.注释规范总原则: As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性. ...
- 前端基础-BOM和DOM学习
JavaScript分为 ECMAScript,BOM,DOM. BOM:是指浏览器对象模型,使JavaScript有能力与浏览器进行对象. DOM:是指文档对象模型,通过它,可以访问HTML文档的所 ...
- 微信小程序学习笔记二 数据绑定 + 事件绑定
微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...
- 《高性能javascript》 领悟随笔之-------DOM编程篇(二)
<高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
- crawler4j 学习（二）
crawler4j 学习(二) 实现控制器类以制定抓取的种子(seed).中间数据存储的文件夹.并发线程的数目: public class Controller { public static voi ...
- Android Animation学习（二） ApiDemos解析：基本Animators使用
Android Animation学习(二) ApiDemos解析:基本Animatiors使用 Animator类提供了创建动画的基本结构,但是一般使用的是它的子类: ValueAnimator.O ...
随机推荐
- jquery[siblings]取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合,用于筛选同辈元素的表达式 $("#pageList").click(function(){ $(this).pa ...
- osgconv 将多个模型合成一个模型
osgconv a.osg b.osg c.osg BigOne.ive 以上命令的作用是将a.osg.b.osg.c.osg三个模型合并到BigOne.ive模型
- Swift - UIViewController
UIViewController类详解: 通过Nib文件初始化 init(nibName nibName: String?, bundle nibBundle: NSBundle?) println( ...
- NYOJ之奇偶数分离
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAscAAAJ8CAIAAACdmZvPAAAgAElEQVR4nO3dPVLjStsG4G8T5CyEFC
- eclipse查看hadoop中文件出现乱码
出现这个问题, 我首先去找了一下几个问题: 1.文件是否是utf-8 2.上传到Linux中的hadoop, 在Linux下去查看是否乱码 3.上面都没有问题, 就去检查eclipse,将项目工程改成 ...
- jquery学习笔记---requirejs 和模块化编程
http://www.cnblogs.com/lisongy/p/4711056.html jquery模块化编程:http://www.cnblogs.com/digdeep/p/4602460.h ...
- Delphi面向对象的属性
可以把属性看成是能对类中的数据进行修改和执行代码的特殊的辅助域.对于组件来说,属性就是列在Object Inspector窗口的内容.下面的例子定义了一个有属性的简单对象 TMyObject = cl ...
- Pyqt QSystemTrayIcon 实现托盘效果
pyqt的托盘效果很好实现,在Pyqt的demo中有个例子 路径:PyQt4\examples\desktop\systray.py 今天我就仿这个Tray效果做效果 一. 创建UI trayicon ...
- SQL集合操作符样例（UNION,INTERSECT,EXCEPT）
由于MYSQL目前只实现了UNION, 所以后面两个就没得玩罗.... SELECT emp_id, assigned_branch_id -> FROM employee -> WHER ...
- HTTPCLIENT 学习 (1) 入门
早就如雷贯耳它的大名,却一直不曾相见,昨天下载下来,今天终于测试了一把,用的官网的QUICK START例子,来访问我自己以前开发过的WEB程序,因为这个网站恰好有一个写好的通过POST请求验证用户名 ...