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. (转)Synchronized（对象锁）和Static Synchronized（类锁）的区别

    场景:面试的时候经常用得到! 1 综述 Synchronized和Static Synchronized区别 一个是实例锁(锁在某一个实例对象上,如果该类是单例,那么该锁也具有全局锁的概念),一个是全 ...

  2. [js] post 方式打开新窗口

    一.前因 一般我们是用 window.open(url,name,params); 打开新窗口, url 会携带一些参数, 但存在参数过多,引发url 过长截断,无法打开正确窗口, 所以我们需要使用 ...

  3. [BZOJ 3319] 黑白树

    3319: 黑白树 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 557  Solved: 194[Submit][Status][Discuss] ...

  4. PocScan的搭建与使用

    安装Docker, 然后下载镜像 $ sudo curl -sSL https://get.daocloud.io/docker | sh $ sudo systemctl start docker ...

  5. hiberate关系映射大全

    1. 集合映射 开发流程: 需求分析/数据库设计.项目设计/ 编码/测试/实施部署上线/验收 需求: 用户购买, 填写地址! 数据库: 代码: // javabean设计 public class U ...

  6. c++STL(栈、队列）

    栈stack -先入后出FILO 栈可以理解为一个坑,先掉坑里的被压在下面,等上面的走了才能出来 头文件 <stack> 入栈 push(某东西); 栈顶元素出栈 pop(); 是否为空 ...

  7. Java中Scanner的输入流的关闭问题

    为什么Scanner in语句只能关闭一次,且对于其他任何Scanner输入流也关闭? 代码如图 import java.util.Scanner; public class ScannerTest  ...

  8. ASP.NET Core - Razor 页面简介

    简介 随着ASP.NET Core 2 即将来临,最热门的新事物是Razor页面.在之前的一篇文章中,我们简要介绍了ASP.NET Core Razor 页面. Razor页面是ASP.NET Cor ...

  9. 版本管理工具Git(1)带你认识git

    简介 本篇将带领大家认识,git.github,让大家对git有基本的认识:下面将持续更新几篇文章来介绍git,见git导航: 下一篇中将讲解git的安装及使用: Git系列导航 版本管理工具Git( ...

  10. 今天聊一聊nuxt.js（上）

    背景 近期在做内部系统的重构,从一线业务彻底的重构,经过充分的考虑我们准备把这个项目打造成前台业务的试验站,比如ssr和一些其他的前沿技术的探索,积累充分的经验后待合适的契机应用到C端的项目中. 既然 ...