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 ...
随机推荐
- Bestcoder13 1003.Find Sequence（hdu 5064） 解题报告
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5064 题目意思:给出n个数:a1, a2, ..., an,然后需要从中找出一个最长的序列 b1, b ...
- ORACLE 远程导入导出数据库
Oracle数据导入导出imp/exp就相当于oracle数据还原与备份.exp命令可以把数据从远程数据库服务器导出到本地的dmp文件,imp命令可以把dmp文件从本地导入到远处的数据库服务器中. ...
- web开发，关于jsp的常见问题，重复提交，防止后退。
看了网上的,有几种方法:1 在你的表单页里HEAD区加入这段代码: <META HTTP-EQUIV="pragma" CONTENT="no-cache" ...
- 【leetcode】Remove Nth Node From End of List（easy）
Given a linked list, remove the nth node from the end of list and return its head. For example, Give ...
- java获取客服端信息(系统，浏览器等)
String agent = request.getHeader("user-agent"); System.out.println(agent); StringTokenizer ...
- Does the OpenSceneGraph have a native file format?
From OpenSceneGraph-3.0 onwards we have new native file formats based on generic serializers that ar ...
- 数据结构One_Vector(向量的简单实现)
#include <iostream> using namespace std; template<typename Object> class Vector { privat ...
- 清除Windows系统桌面快捷方式小箭头
清除Windows桌面快捷方式小箭头,需要重启,且不会导致软件无法锁定到任务栏.新建.reg的注册表文件,命名随意,内容如下: Windows Registry Editor Version 5.00 ...
- 20145206实验四《Android开发基础》
20145206 实验四<Android开发基础> 实验内容 ·安装Android Studio ·运行安卓AVD模拟器 ·使用安卓运行出虚拟手机并显示HelloWorld以及自己的学号 ...
- sqlserver执行sql文件命令（sqlcmd）
个人自用sqlcmd命令: sqlcmd -E -i test.sql -d databasename -s 127.0.0.1 sqlcmd命令解释: 用法: Sqlcmd [ ...