1、HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）；HTML DOM 模型被构造为对象的树。

2、DOM 方法

<!DOCTYPE html>

<html>

<body>

<p>Hello World!</p>

<div id="main">

<p>The DOM is very useful.</p>

<p>本例演示 <b>getElementsByTagName</b> 方法。</p>

</div>

<script>

var x=document.getElementById("main");

var y=x.getElementsByTagName("p");

document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);

</script>

</body>

</html>

3、JS的事件

HTML 事件的例子：

  • 当用户点击鼠标时 onclick
  • 当网页已加载时
  • 当图像已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当提交 HTML 表单时
  • 当用户触发按键时
 <!DOCTYPE html>

 <html>

 <body>

 <!-- ---------- -->

 <h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

 <!-- ---------- -->

 <script>

     function changetext(id)

     {

         id.innerHTML="谢谢!";

     }

 </script>

 </head>

 <>

 <!-- ---------- -->

 <h1 onclick="changetext(this)">请点击该文本</h1>

 <p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>

 <button onclick="displayDate()">点击这里</button>

 <!-- ---------- -->

 <script>

     function displayDate()

     {

         document.getElementById("demo").innerHTML=Date();

     }

 </script>

 <p id="demo"></p>

 <p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>

 <button id="myBtn">点击这里</button>

 <!-- ---------- -->

 <script>

     document.getElementById("myBtn").onclick=function(){displayDate1()};

     function displayDate1()

     {

         document.getElementById("demo1").innerHTML=Date();

     }

 </script>

 <p id="demo1"></p>

 <!-------------------------->

 <div onmouseover="mOver(this)" onmouseout="mOut(this)" onmousedown="mDown(this)" onmouseup="mUp(this)"style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

 <script>

     function mDown(obj)

     {

         obj.style.backgroundColor="#1ec5e5";

         obj.innerHTML="请释放鼠标按钮"

     }

     function mUp(obj)

     {

         obj.style.backgroundColor="green";

         obj.innerHTML="请按下鼠标按钮"

     }

     function mOver(obj)

     {

         obj.innerHTML="谢谢"

     }

     function mOut(obj)

     {

         obj.innerHTML="把鼠标移到上面"

     }

 </script>

 </body>

 </html>

4、JS的DOM节点

添加节点或者删除节点

 <!DOCTYPE html>

 <html>

 <body>

 <div id="div1">

     <p id="p1">这是一个段落。</p>

     <p id="p2">这是另一个段落。</p>

 </div>

 <!-----添加一个超链接------------->

 <script>

     var para=document.createElement("a");

     var node = document.createTextNode("new anchor");

     para.setAttribute("href","http://www.baidu.com");

     para.appendChild(node);

     var element = document.getElementById("div1");

     element.appendChild(para);

 </script>

 <!-----删除id为p1的段落------------->

 <script>

     var child = document.getElementById(p1);

     child.parentNode().remove(child);

 </script>

 </body>

 </html>

8、HTML DOM总结的更多相关文章

  1. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  2. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  3. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  4. 通俗易懂的来讲讲DOM

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  5. HTML DOM 介绍

    本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...

  6. HTML DOM 对象

    本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...

  7. 重撸js_2_基础dom操作

    1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...

  8. 虚拟dom与diff算法 分析

    好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  10. jQuery学习之路（2）-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

随机推荐

  1. 零基础逆向工程25_C++_02_类的成员权限_虚函数_模板

    1 类的成员权限 1.1 小结: 1.对外提供的函数或者变量,发布成public的 但不能随意改动. 2.可能会变动的函数或者变量,定义成private的 这样编译器会在使用的时候做检测. 3.只有结 ...

  2. web安全防御之RASP技术

    作者:      我是小三 博客:      http://www.cnblogs.com/2014asm/ 由于时间和水平有限,本文会存在诸多不足,希望得到您的及时反馈与指正,多谢! 0x00:we ...

  3. 关于web开发中订单自动超时和自动收货的简单方法(window server)

    最近做一个订单自动超时和自动收货的功能,因为以前是用的mysql 存储过程和定时器来完成,这次的业务逻辑相对复杂用以前的方式就不太合适,本来是准备使用定时执行php脚本来实现的,后来发现业务逻辑中使用 ...

  4. ubuntu14.04server下安装scala+sbt工具

    安装sbt参考https://www.cnblogs.com/wrencai/p/3867898.html 在安装scala时 首先得安装jdk环境,最好安装最新版本以免后续安装出现不必要的麻烦 一. ...

  5. ubuntu下JDK安装（更新旧版本JAVA）

    1.sudo apt-get install openjdk-8-jre openjdk-8-jdk 2.默认会安装在 路径为 /usr/lib/jvm/java-7-openjdk-amd64 下面 ...

  6. MyDebugeer 一个简单调试器的实现

    学习的是网上的帖子,所以就不贴源码了. 整个程序以调试循环为主体,实现了启动调试,继续执行,内存查看,读取寄存器值,显示源代码,断点的设置.查看.删除,三种单步执行:StepIn.StepOver.S ...

  7. codeblocks winsock配置

    在codeblocks进行Socket编程遇到如下情况: undefined reference to WSAStartup@8 解决方法: 右击工程,选择 build options,选择 Link ...

  8. c++树的表示方法

    c++树的节点的表示方法: typedef struct Node *Tree; struct Node { int data; Node *left; Node *right; int flag; ...

  9. python_53_函数补充

    def test1(x,y=2): print(x,y) test1(1) test1(1,3) test1(1,y=4) #默认参数特点:调用函数的时候,默认参数非必须传递,默认参数放在后边 #用途 ...

  10. OO第13-14次作业总结

    目录 面向对象第13-14次作业总结博客 1.设计分析 2.架构总结.测试 3.课程收获和建议 面向对象第13-14次作业总结博客 1.设计分析 这个单元是我做的最差的一个单元.总工程量超过2000行 ...