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 ...
随机推荐
- Divide and conquer:Drying(POJ 3104)
烘干衣服 题目大意:主人公有一个烘干机,但是一次只能烘干一件衣服,每分钟失水k个单位的水量,自然烘干每分钟失水1个单位的水量(在烘干机不算自然烘干的那一个单位的水量),问你最少需要多长时间烘干衣服? ...
- HTML 基础
1.HTML 超文本标记语言 2.网页分类: 动态网页 静态网页 ①静态网页与动态网页区别: 主要:动态网页与数据库链接,静态网页不与数据库连接: ②静态网页 修改展示图片 必须修改源代码 : ...
- ubunto安装pycharm
转载:http://www.cnblogs.com/zhcncn/p/4027025.html 1. 下载 http://www.jetbrains.com/pycharm/download/ 选择L ...
- linux日常易忘指令
1.编辑全局指令 进入~/.bash_profile 增加"exprot +(启动文件的地址)" source ~/.bash_profilr(刷新) 2.修改mysql密码 my ...
- Meta标签实现阻止移动设备(手机、Pad)的浏览器双击放大网页
一.背景 在当今这个移动设备发展越来越快,并且技术越来越成熟的时代,移动设备成了企业扩展业务不可或缺的重要领域之一,随之而来的是适应手机的网站层出不穷,在开发过程中,我们往往会遇到一个很尴尬的问题:移 ...
- [Android Pro] static 和 Volatile 的区别
reference to : http://blog.sina.com.cn/s/blog_4e1e357d0101i486.html static也是各个业务方可以去全局修改: volatile是处 ...
- Redis自定义动态字符串(sds)模块（二）
sds模块的具体实现: 1.sdsnewlen 根据参数生成一个sds字符串 sds sdsnewlen(const void *init, size_t initlen) { struct sdsh ...
- poj1417(种类并查集+dp)
题目:http://poj.org/problem?id=1417 题意:输入三个数m, p, q 分别表示接下来的输入行数,天使数目,恶魔数目: 接下来m行输入形如x, y, ch,ch为yes表示 ...
- 使用HttpWebRequest发送自定义POST请求
平时用浏览器看网页的时候,点击一下submit按钮的时候其实就是给服务器发送了一个POST请求.但是如何在自己的C#程序里面实现类似的功能呢?本文给出了一个简单的范例,可以实现类似的和web serv ...
- 【JAVA解析XML文件实现CRUD操作】
一.简介. 1.xml解析技术有两种:dom和sax 2.dom:Document Object Model,即文档对象模型,是W3C组织推荐的解析XML的一种方式. sax:Simple API f ...