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. linux下 git 安装

    1.使用yum安装 yum -y install git yum remove git 2.源代码安装 a.下载git源码  网址为 https://github.com/git/git/releas ...

  2. JVM常用启动参数

    本文参考 jvm参数设置大全:http://www.cnblogs.com/marcotan/p/4256885.html 堆内存分配及gc:http://www.cnblogs.com/weiguo ...

  3. ios控制器生存周期

    iOS中控制器的生命周期 一般我们在创建控制器的时候,有三种方法. 1.  直接通过代码创建 2.  通过storyboard创建 3.  通过Xib,在创建控制器的时候传入一个Xib文件作为这个控制 ...

  4. 【jquery】ajax请求

    1. defferred对象 实现链式回调函数编程. http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_d ...

  5. IBM Websphere 集群会话共享问题解决办法

    遇到一应用部署环境如下图: 两台HTTP SERVER(以下简称IHS)负责转发数据包,其中F5采用粘性模式,即一个用户在会话周期内的数据包一定会被转发到IHS中的一台, 但IHS 到Web Serv ...

  6. Python零基础学习系列之一--初识计算机！

    1-1.计算机概念: Computer: 原指专门负责计算的人,后来演变成特指计算设备,译为"计算机" 计算机的概念: 计算机是能够根据一组指令操作数据的机器. A compute ...

  7. Android中的广播

    Android中的广播 广播接受器,可以比喻成收音机.而广播则可以看成电台. Android系统内部相当于已经有一个电台 定义了好多的广播事件,比如外拨电话 短信到来 sd卡状态 电池电量变化... ...

  8. GPUImage原理

    GPUImage是一个开元的基于GPU的图片或视频的处理框架,其本身内置了多达120多种常见的滤镜效果,并且支持照相机和摄像机的实时滤镜,并且能够自定义图像滤镜. 美颜的基本概念 OpenGL ES: ...

  9. RabbitMQ --- Work Queues（工作队列）

    目录 RabbitMQ --- Hello Mr.Tua 前言 Work Queues 即工作队列,它表示一个 Producer 对应多个 Consumer,包括两种分发模式:轮循分发(Round-r ...

  10. 如何开发自己的搜索帝国之ES图形化Kibana安装与使用

    在如何开发自己的搜索帝国之Elasticsearch中已经介绍安装好了ES,下面就Kibana对ES的查询监控作介绍,就是常提到的大数据日志处理组件ELK里的K. 什么是Kibana?现引用园友的一段 ...