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 ...
随机推荐
- code vs1262 不要把球传我(组合数学) 2012年CCC加拿大高中生信息学奥赛
1262 不要把球传我 2012年CCC加拿大高中生信息学奥赛 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题解 查看运行结果 题目描述 De ...
- js中apply,call的用法
最近一直在用 js 写游戏服务器,我也接触 js 时间不长,大学的时候用 js 做过一个 H3C 的 web的项目,然后在腾讯实习的时候用 js 写过一些奇怪的程序,自己也用 js 写过几个的网站.但 ...
- JQuery页面加载
第一种: $(document).ready(function(){ alert("第一种方法."); }); 第二种: $(function(){ alert("第二种 ...
- 【XLL API 函数】xlGetName
以字符串格式返回 DLL 文件的长文件名. 原型 Excel12(xlGetName, LPXLOPER12 pxRes, 0); 参数 这个函数没有参数 属性值和返回值 返回文件名和路径 实例 \S ...
- 让view 覆盖导航栏
当我们想做一个弹出式菜单时,想将导航栏也一起盖住不显示的话,可以用如下语句实现: UIView* myView = /* 你自定义的view */; UIWindow* currentWindow = ...
- Hibernate简单分页
5.1 准备工作 建立项目,加入jar 建立hibernate.cfg.xml 建立pojo类和对应的映射文件 5.2 建立vo类PageEntity package org.guangsoft.vo ...
- ASIHTTPRequest详解 [经典]
ASIHTTPRequest 对CFNetwork API进行了封装,并且使用起来非常简单,用Objective-C编写,可以很好的应用在Mac OS X系统和iOS平台的应用程序中.ASIHTTPR ...
- OSG快速生成一个带有纹理的四边形Geometry
可以使用Geometry头文件中的 Geometry* createTexturedQuadGeometry osg::ref_ptr<osg::Texture2D> texture = ...
- 无法解析的外部符号 __imp__InitCommonControlsEx@4
需要comctl32.lib 今天在codeproject上找到一个屏保程序,http://www.codeproject.com/Articles/1551/Creating-a-screen-sa ...
- 登录到mysql查看binlog日志
查看当前第一个binlog文件的内容 show binlog events; 查看指定binlog文件内容 show binlog events in 'mysql-bin.000002'; 查看当前 ...