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学习之三的更多相关文章

  1. AspectJ基础学习之三HelloWorld（转载）

    AspectJ基础学习之三HelloWorld(转载) 一.创建项目 我们将project命名为:aspectjDemo.然后我们新建2个package:com.aspectj.demo.aspect ...

  2. Linux学习之三-Linux系统的一些重要配置文件

    Linux学习之三-Linux系统的一些重要配置文件 1.网卡配置文件 /etc/sysconfig/network-scripts/ifcfg-eth0 说明: DEVICE=eth0        ...

  3. C++11并发学习之三：线程同步（转载）

    C++11并发学习之三:线程同步 1.<mutex> 头文件介绍 Mutex又称互斥量,C++ 11中与 Mutex 相关的类(包括锁类型)和函数都声明在 <mutex> 头文 ...

  4. 前端基础-BOM和DOM学习

    JavaScript分为 ECMAScript,BOM,DOM. BOM:是指浏览器对象模型,使JavaScript有能力与浏览器进行对象. DOM:是指文档对象模型,通过它,可以访问HTML文档的所 ...

  5. HTML DOM 学习

    HTML DOM 学习 By: Mirror王宇阳 E-mail:2821319009@qq.com 博客主页:https://www.cnblogs.com/wangyuyang1016/ DOM ...

  6. jackson学习之三：常用API操作

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  7. JavaScript DOM学习总结（一）

    DOM 什么是DOM?简单地说DOM是一套对文档内容进行抽象和概念化的方法.   W3C给出的DOM定义是这样的:"一个与系统平台和编程语言无关的接口,程序和脚本以通过这个接口动态的访问和修 ...

  8. Js dom 学习

    节点类型 文档节点: 一棵DOM树的顶端是文档节点,它呈现为整个页面(相当于document对象),当需要访问任何元素.属性或文本节点时,都需要通过文档节点来进行导航.(document.) 元素节点 ...

  9. TCP学习之三：客户端、服务端同步传输字符串

    参考学习张子阳大神的博客:http://www.cnblogs.com/JimmyZhang/category/101698.html 一个客户端.发送一条消息 客户端: 服务端: 注意:Networ ...

随机推荐

  1. codeforces 496B. Secret Combination 解题报告

    题目链接:http://codeforces.com/problemset/problem/496/B 题目意思:给出 n 位数你,有两种操作:1.将每一位数字加一(当某一位 > 9 时只保存个 ...

  2. JSTL的c:forEach标签(${status.index})

    <c:forEach>标签具有以下一些属性: var:迭代参数的名称.在迭代体中可以使用的变量的名称,用来表示每一个迭代变量.类型为String. items:要进行迭代的集合.对于它所支 ...

  3. 【编程题目】有 4 张红色的牌和 4 张蓝色的牌，主持人先拿任意两张，再分别在 A、B、C 三人额头上贴

    第 22 题(推理):有 4 张红色的牌和 4 张蓝色的牌,主持人先拿任意两张,再分别在 A.B.C 三人额头上贴任意两张牌,A.B.C 三人都可以看见其余两人额头上的牌,看完后让他们猜自己额头上是什 ...

  4. iOS - iPhone开发 UILocalNotification的使用

    OS下的Notification的使用 Notification 是智能手机应用编程中非常常用的一种传递信息的机制,而且可以非常好的节省资源,不用消耗资源来不停地检查信息状态(Pooling),在iO ...

  5. Ajax如何使用Session

    在Ajax中有时会使用到Session,在aspx.cs文件这样获取: string name = Session["name"]; 但是在Ajax中就不能这样获取Session, ...

  6. python基础——匿名函数

    python基础——匿名函数 当我们在传入函数时,有些时候,不需要显式地定义函数,直接传入匿名函数更方便.  在Python中,对匿名函数提供了有限支持.还是以map()函数为例,计算f(x)=x2时 ...

  7. EasyUI中控件汉化问题

    --BY ZYZ 我在使用EasyUI的过程中,遇到了控件无汉化的情况,如下图. 这么多洋文看着觉得挺烦的.时间居然是月日年格式的,这样可不行,得改. 重写控件代码?别,那能是我这种低级代码C-V客能 ...

  8. 再来一发！DB2 应用程序如何从数据库取数据 Fetch

    The FETCH statement positions a cursor on the next row of its result table and assigns the values of ...

  9. 阿里云的RDS 查看binlog日志的方法

    按时间点反后台备份的binlog日志从阿里云导出来,然后用mysqlbinlog查看日志内容: # mysqlbinlog -vv --base64-output=decode-rows mysql- ...

  10. linux退出vi

    linux退出vi操作,可以先按“esc”,再按“:”,“x”即可,这是要保存退出. 假如是修改过的,不保存,即是:先按  :   ,然后输入  q!  回车 假如未改动,即先按  :   ,然后输入 ...