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. 【NOIP模拟】matrix（简化矩阵）

    题目背景 SOURCE:NOIP2016-RZZ-1 题目描述 给出两个 N×N 的矩阵 A.B,矩阵每行每列标号 0-N-1 .定义这两个矩阵的乘积 AB 为

  2. Angular4 组件通讯方法大全

    组件通讯,意在不同的指令和组件之间共享信息.如何在两个多个组件之间共享信息呢. 最近在项目上,组件跟组件之间可能是父子关系,兄弟关系,爷孙关系都有.....我也找找了很多关于组件之间通讯的方法,不同的 ...

  3. Oracle和MySQL分组查询GROUP BY

    Oracle和MySQL分组查询GROUP BY 真题1.Oracle和MySQL中的分组(GROUP BY)有什么区别? 答案:Oracle对于GROUP BY是严格的,所有要SELECT出来的字段 ...

  4. 流畅python学习笔记：第十五章：上下文管理器

    在开始本章之前,我们首先来谈谈try-excep..final模块.在Python中,进行异常保护的最多就是用try..except..final.首先来看下下面的代码.进行一个简单的除法运算.为了防 ...

  5. 基于Python使用SVM识别简单的字符验证码的完整代码开源分享

    关键字:Python,SVM,字符验证码,机器学习,验证码识别 1   概述 基于Python使用SVM识别简单的验证字符串的完整代码开源分享. 因为目前有了更厉害的新技术来解决这类问题了,但是本文作 ...

  6. Bean 的生命周期 之 后处理Bean

    这里先把Bean 的生命周期总结一下,然后引出后处理Bean 首先,Bean 的生命周期总共有11步: 1.instantiate bean对象实例化 2.populate properties 封装 ...

  7. JavaScript中的call()、apply()与bind():

    关于call()与apply(): 在JavaScript中,每个函数都有call与apply(),这两个函数都是用来改变函数体内this的指向,并调用相关的参数. 看一个例子: 定义一个animal ...

  8. 银河英雄传说[NOI2002]

    题目描述 公元五八○一年,地球居民迁移至金牛座α第二行星,在那里发表银河联邦创立宣言,同年改元为宇宙历元年,并开始向银河系深处拓展.       宇宙历七九九年,银河系的两大军事集团在巴米利恩星域爆发 ...

  9. Scala 令人着迷的类设计

    尽管 Scala 和 Java 有很多相同的地方, 但是在类的声明, 构造, 访问控制上存在很大的差异, 通过本文你也能看到相比较 Java 很多啰嗦的模板代码, Scala 更加的简洁, 使用 Sc ...

  10. 【待整理】MySQL alter table modify vs alter table add产生state不一样

    MySQL:5.6.35 OS:redhat5.8 今天更新数据库某些表字段,有如下两SQL: ①alter table xx modify xxxx;(表大概是77w) ②alter table s ...