HTML DOM (文档对象模型)

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


查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

  • 通过 id 找到 HTML 元素
  • 通过标签名找到 HTML 元素
  • 通过类名找到 HTML 元素

document.getElementById("intro");
x.getElementsByTagName("p");


JavaScript HTML DOM - 改变 HTML

1.document.write() 可用于直接向 HTML 输出流写内容。

改变 HTML 内容

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

element.innerHTML="新标题";

改变 HTML 属性

document.getElementById(id).attribute=新属性值


document.getElementById("image").src="landscape.jpg";


改变 HTML 样式

document.getElementById(id).style.property=新样式


<p
id="p1">Hello
World!</p><p
id="p2">Hello
World!</p><script>document.getElementById("p2").style.color="blue";document.getElementById("p2").style.fontFamily="Arial";document.getElementById("p2").style.fontSize="larger";


JavaScript HTML DOM 事件

<script>

function changetext(id)

{

    id.innerHTML="Ooops!";

}

</script>

</head>

<body>

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

</body>

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

<body onload="checkCookies()">

JavaScript HTML DOM 元素(节点)

创建新的 HTML 元素

<div id="div1">

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

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

</div>



<script>

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

var node=document.createTextNode("这是一个新段落。");

para.appendChild(node);



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

element.appendChild(para);

</script>

删除已有的 HTML 元素

<div id="div1">

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

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

</div>

<script>

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

var child=document.getElementById("p1");

parent.removeChild(child);

</script>

JavaScript 对象

对象只是带有属性和方法的特殊数据类型。

属性是与对象相关的值。

访问对象属性的语法是：

objectName.propertyName

您可以通过以下语法来调用方法：

objectName.methodName()

























































































JavaScript笔记之第四天的更多相关文章

  1. Python学习笔记（十四）

    Python学习笔记(十四): Json and Pickle模块 shelve模块 1. Json and Pickle模块 之前我们学习过用eval内置方法可以将一个字符串转成python对象,不 ...

  2. (转)javascript异步编程的四种方法

    本文转自:http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html 作者:阮一峰 本文仅仅作为个人mark ...

  3. 深入理解javascript作用域系列第四篇——块作用域

    × 目录 [1]let [2]const [3]try 前面的话 尽管函数作用域是最常见的作用域单元,也是现行大多数javascript最普遍的设计方法,但其他类型的作用域单元也是存在的,并且通过使用 ...

  4. Javascript动画效果（四）

    Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...

  5. [Effective JavaScript 笔记] 第4条：原始类型优于封闭对象

    js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //&q ...

  6. [Effective JavaScript 笔记] 第5条：避免对混合类型使用==运算符

    “1.0e0”=={valueOf:function(){return true;}} 是值是多少? 这两个完全不同的值使用==运算符是相等的.为什么呢?请看<[Effective JavaSc ...

  7. [Effective JavaScript 笔记]第3章：使用函数--个人总结

    前言 这一章把平时会用到,但不会深究的知识点,分开细化地讲解了.里面很多内容在高3等基础内容里,也有很多讲到.但由于本身书籍的篇幅较大,很容易忽视对应的小知识点.这章里的许多小提示都很有帮助,特别是在 ...

  8. [Effective JavaScript 笔记]第27条：使用闭包而不是字符串来封装代码

    函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式 ...

  9. [Effective JavaScript 笔记]第28条：不要信赖函数对象的toString方法

    js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+ ...

随机推荐

  1. 简单的.NET后台定时服务框架

    后台服务只要是有一定经验的开发人员都接触过,其中离不开服务创建,调度逻辑处理,业务逻辑编写等环节.往往我们在新建一个后台服务项目的时候都会去拷贝以前的代码,再写一些线程等方式去完成,然后又去处理服务的 ...

  2. java.net.UnknownHostException 异常解决方案

    1)使用hostname命令设置新的host name与/etc/hosts本机hostname一致 #hostname 本机hostname 具体可以查看:/etc/hosts和//etc/sysc ...

  3. （转）Vi命令详解

    vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令.由于对Unix及Linux系统的任何版本,vi编辑器是完全相 ...

  4. iptables中DNAT的配置方法

    1.一对一流量完全DNAT 首先说一下网络环境,普通主机一台做防火墙用,网卡两块 eth0 192.168.0.1  内网 eth1 202.202.202.1 外网 内网中一台主机 192.168. ...

  5. Web测试与APP测试有哪些异同？

    1.相同点 不管是传统行业的web测试,还是新兴的手机APP测试,都离不开测试的基础知识,即是不管怎么变,测试的原理依然会融入在这两者当中. 1)设计测试用例时,依然都是依据边界值分析法.等价类划分等 ...

  6. Android 内存检查

    Android 内存检查 本文简单介绍了如何使用 DDMS 和 MAT 工具来对 android 进行内存检查,了解 android 内存的具体占用情况. 步骤1. 使用 DDMS 观察内存的使用情况 ...

  7. pygal的简单使用

    pygal的简单使用 例子来自此书: <Python编程从入门到实战>[美]Eric Matthes pygal是一个SVG图表库.SVG是一种矢量图格式.全称Scalable Vecto ...

  8. mbos之动态图表设计

    前言 所谓,一图胜千言.人脑有80%的部分专门用于视觉处理.而随着数据时代的全面来临,我们自然有必要将数据转化为图形与图表. Mbos是一个快速,稳定的云端轻应用开发平台.帮助企业快速开发移动应用,加 ...

  9. Spring整合CXF webservice restful 实例

    webservice restful接口跟soap协议的接口实现大同小异,只是在提供服务的类/接口的注解上存在差异,具体看下面的代码,然后自己对比下就可以了. 用到的基础类 User.java @Xm ...

  10. <经验杂谈>C#生成条形码

    虽然二维码满天飞,但也不能忘了条形码,本篇介绍可以在C#中使用的1D/2D编码解码器.条形码的应用已经非常普遍,几乎所有超市里面的商品上面都印有条形码: 条形码的标准: 条形码的标准有ENA条形码.U ...