HTML DOM学习之三
1.创建新的HTML元素：appendChild();
如需向HTML DOM添加元素，首先必须创建该元素，然后把它追加到已有的元素上；
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p"); //创建一个新的<p>元素
var node=document.createTextNode("This is new."); //首先创建一个文本节点
para.appendChild(node); //向<p>元素追加文本节点
var element=document.getElementById("div1"); //向查找到一个已有元素
element.appendChild(para); //向这个已存在的元素追加新元素
</script>
2.创建新的HTML元素：insertBefore()方法；
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>
3.删除已有的HTML元素：如需删除HTML元素，您必须清楚该元素的父元素
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child); //从父元素中删除子元素
</script>
可以不查找父元素直接删除子元素的常用方法：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
4.替换HTML元素：如需替换HTML DOM中的元素，请使用replaceChild()方法：
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new .");
para.appendChild(node);
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);
</script>
5.HTML DOM-事件
**对事件作出反应：如需在用户点击某个元素时执行代码，请把JavaScript代码添加到HTML事件属性中：
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Chick on this text!</h1>
</body>
</html>
**HTML事件属性：如需向HTML元素分配事件，您可以使用事件属性：
<button onclick="displayDate()">Try it</button>
**使用HTML DOM来分配事件：
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
**onload和onunload事件
onload事件可用于检查访客的浏览器类型和版本，以便于基于这些信息加载不同版本的网页
onload和onunload事件可用于处理cookies
<body onload="checkCookies()">
**onchange事件：onchange事件常用于输入字段的验证
<input type="text" id="fname" onchange="upperCase()">
**onmouseover和onmouseout事件：用于在鼠标指针移动到或离开元素时触发函数
**onmousedown,onmouseup以及onclick事件：
onmousedown,onmouseup以及onclick事件是鼠标点击的全部过程，首先当鼠标被点击时，触发onmousedown事件，然后，当鼠标被松开时，会触发onmouseup事件，最后，当鼠标点击完成时，触发onclick事件；
6.HTML DOM导航：通过HTML DOM，能够使用节点关系在节点树中导航
**HTML DOM节点列表
var x=document.getElementsByTagName("p"); //选取文档中所有<p>节点
y=x[1]; //通过下标号访问这些节点，访问第二个<p>
**HTML DOM节点列表长度：length属性定义节点列表中节点的数量，可以使用length属性来循环节点列表：
x=document.getElementsByTagName("p");
for(i=0;i<x.length;i++){
document.write(x[i].innerHTML);
document.write("<br />")
}
**能够使用三个节点属性：parentNode,firstChild以及lastChild,在文档结构中进行导航
<html>
<body> //<body>元素是首个<p>元素和<div>元素的父节点(parentNode)
<p id="intro">Hello World!</p> //首个<p>元素是<body>元素的首个子元素(firstChild)
<div> //<div>元素是<body>元素的最后一个子元素(lastChild)
<p>The DOM is very useful!</p>
<p>This example demonstrates node relationships.</p>
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</div>
</body>
</html>
**DOM根节点：这里有两个特殊的属性，可以访问全部文档：
document.documentElement-全部文档
document.body-文档主体
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b>property</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html>
**ChildNodes和nodeValue：除了innerHTML属性，也可以使用childNodes和nodeValue属性来获取元素的内容；
<html>
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>
HTML DOM学习之三的更多相关文章
- AspectJ基础学习之三HelloWorld（转载）
AspectJ基础学习之三HelloWorld(转载) 一.创建项目 我们将project命名为:aspectjDemo.然后我们新建2个package:com.aspectj.demo.aspect ...
- Linux学习之三-Linux系统的一些重要配置文件
Linux学习之三-Linux系统的一些重要配置文件 1.网卡配置文件 /etc/sysconfig/network-scripts/ifcfg-eth0 说明: DEVICE=eth0 ...
- C++11并发学习之三：线程同步（转载）
C++11并发学习之三:线程同步 1.<mutex> 头文件介绍 Mutex又称互斥量,C++ 11中与 Mutex 相关的类(包括锁类型)和函数都声明在 <mutex> 头文 ...
- 前端基础-BOM和DOM学习
JavaScript分为 ECMAScript,BOM,DOM. BOM:是指浏览器对象模型,使JavaScript有能力与浏览器进行对象. DOM:是指文档对象模型,通过它,可以访问HTML文档的所 ...
- HTML DOM 学习
HTML DOM 学习 By: Mirror王宇阳 E-mail:2821319009@qq.com 博客主页:https://www.cnblogs.com/wangyuyang1016/ DOM ...
- jackson学习之三：常用API操作
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- JavaScript DOM学习总结（一）
DOM 什么是DOM?简单地说DOM是一套对文档内容进行抽象和概念化的方法. W3C给出的DOM定义是这样的:"一个与系统平台和编程语言无关的接口,程序和脚本以通过这个接口动态的访问和修 ...
- Js dom 学习
节点类型 文档节点: 一棵DOM树的顶端是文档节点,它呈现为整个页面(相当于document对象),当需要访问任何元素.属性或文本节点时,都需要通过文档节点来进行导航.(document.) 元素节点 ...
- TCP学习之三：客户端、服务端同步传输字符串
参考学习张子阳大神的博客:http://www.cnblogs.com/JimmyZhang/category/101698.html 一个客户端.发送一条消息 客户端: 服务端: 注意:Networ ...
随机推荐
- mybatis反向生成sql，基本的增删改查
用到的几个文件 MyBatisGeneratorProxy.java package com.timestech.wsgk.test.tools; import static org.mybatis. ...
- HTML超链接
打开网页在 想要查看的位置右键单击 审查元素 则可以查看代码 点击图片右键单独打开 则可以查看图片位置 一．超链接 a标签 <a href="地址"> ...
- Parallels Destop软件配置
Parallels Destop个人感觉最好用的mac虚拟win软件 http://pan.baidu.com/s/1jHFwIGm 密码:ab21百度云下载(或者下载自己百度云的) 安装方法: 1. ...
- 【python】入门学习（六）
type() #检查变量或值得数据类型 >>> type(5) <class 'int'> 序列:包括字符串.元组和列表.序列都可以用索引.切片.len()(计算元素个数 ...
- .NET微信公众号开发-4.0公众号消息处理
一.前言 微信公众平台的消息处理还是比较完善的,有最基本的文本消息,到图文消息,到图片消息,语音消息,视频消息,音乐消息其基本原理都是一样的,只不过所post的xml数据有所差别,在处理消息之前,我们 ...
- supersr--addSubview和 insertSubView 区别
A addSubview B 是将B直接覆盖在A的最上层 例子: [self.view addSubview:scrollView]; A insertSubView B AtIndex:2 是将 ...
- 股票交易（洛谷U6084)
题目背景 kkk最近迷上了炒股. 题目描述 kkk炒了N天股,第i天的股价为a[i]元.kkk希望股票每天都上涨1元钱,但是操盘手lzn并不想让kkk赚很多钱导致他亏本,于是a[i]相对a[i-1]就 ...
- mySQL中如何给某一IP段的用户授权？
给一个用用户use ip: 192.168.0.1 语句是: grant all on *.* to root@192.168.0.1 identified by 'pass' 来授权 其中:root ...
- 20145206邹京儒《Java程序设计》第3周学习总结
20145206 <Java程序设计>第3周学习总结 教材学习内容总结 第四章 4.1 定义类 class Clothes{ String color; char size; } publ ...
- python多线程之Condition（条件变量）
#!/usr/bin/env python # -*- coding: utf-8 -*- from threading import Thread, Condition import time it ...