JavaScript笔记之第四天
来源:互联网 发布:vb代码编程实例 编辑:程序博客网 时间:2024/05/17 15:57
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="新标题";
element.innerHTML="新标题";
改变 HTML 属性
document.getElementById(id).attribute=新属性值document.getElementById("image").src="landscape.jpg";
改变 HTML 样式
document.getElementById(id).style.property=新样式<pid="p1">Hello World!</p><pid="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>
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>
<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()
0 0
- JavaScript笔记之第四天
- Html5笔记之第四天
- CSS3笔记之第四天
- JavaScript学习笔记(第四天)
- javascript之第四章
- JavaScript学习笔记 第四记
- Javascript学习笔记【第四章】
- JavaScript学习笔记-第四章
- javascript第四天
- JavaScript第四天
- JAVASCRIPT的第四天
- 第四天 Javascript基础教程
- javascript高级程序设计笔记(第四章)
- javascript笔记--(第四章)数据类型
- javascript 编程艺术 第四章 笔记
- JavaScript笔记之第六天
- 第四天:听课笔记
- HTML第四天笔记
- 互联网控制报文协议(icmp)
- 准备写一篇shell 脚本 (shell script)的加密与解密,有人看吗?
- 22. Generate Parentheses
- centos6.X系统非root用户启动的程序无法创建超过1024个进程的问题
- CSS3笔记之第三天
- JavaScript笔记之第四天
- 迷失在追逐中
- Container With Most Water
- JPush极光推送Java服务器端实例
- c# Winform DataGridView 当前单元格失去焦点的有关问题
- linux无名管道
- Java泛型方法重写问题
- MySQL数据库备份
- SpringData 学习(4)—— 使用 @Query 注解实现查询