JS 学习（三）DOM

HTML DOM（文档对象模型）

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

　　HTML DOM树:

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找HTML元素

通过 id 找到 HTML 元素，是最简单的方式

<p id="intro">Hello World!</p>

<script>

    x=document.getElementById("intro");

    document.write('<p>id="intro" 的段落中的文本是：' + x.innerHTML + '</p>');

</script>

Hello World!

id="intro" 的段落中的文本是：Hello World!

通过标签名找到 HTML 元素

<div id="main">

    <p>The DOM is very useful.</p>

</div>

<script>

    var x = document.getElementById("main");

    var y = x.getElementsByTagName("p");

    document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);

</script>

The DOM is very useful.

id 为 "main" 的 div 中的第一段文本是：The DOM is very useful.

通过类名找到 HTML 元素，在IE5、6、7、8中无效

JS HTML DOM改变HTML

改变HTML输出流

<script>

    document.write(Date());

</script>

Tue Aug 16 2016 13:45:37 GMT+0800 (CST)

注意： 绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

改变HTML内容
- 语法： document.getElementById(id).innerHTML=new HTML

<p id="p1">Hello World!</p>

<script>

    document.getElementById("p1").innerHTML="New text!";

</script>

New text!

改变HTML属性
- 语法： document.getElementById(id).attribute=new value

<img id="image" src="/i/eg_tulip.jpg" />

<script>

    document.getElementById("image").src="/i/shanghai_lupu_bridge.jpg";

</script>

JS改变HTML元素的样式

语法： document.getElementById(id).style.property=new style

<p id="p2">Hello World!</p>

<script>

    document.getElementById("p2").style.color="blue";

</script>

<h1 id="myH">Hello World!</h1>

<button type="button" onclick="document.getElementById('myH').style.color='red'">点击这里！</button>

<p id="p1">这是一段文本。</p>

<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />

<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />

JS HTML DOM 事件

HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时

<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

<head>

<script>

function changetext(id) {

    id.innerHTML="谢谢!";

}

</script>

</head>

<body>

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

</body>

HTML事件属性

<button onclick="displayDate()">点击这里</button>

<script>

function displayDate() {

    document.getElementById("demo").innerHTML=Date();

}

</script>

<p id="demo"></p>

使用HTML DOM来分配事件

<button id="myBtn">点击这里</button>

<script>

document.getElementById("myBtn").onclick=function(){displayDate()};

function displayDate() {

    document.getElementById("demo").innerHTML=Date();

}

</script>

<p id="demo"></p>

onload 和 onunload 事件
- onload 和 onunload 事件会在用户进入或离开页面时被触发。
  onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
  onload 和 onunload 事件可用于处理 cookie。

<body onload="checkCookies()">

<script>

function checkCookies() {

    if (navigator.cookieEnabled==true) {

        alert("已启用 cookie")

    } else {

        alert("未启用 cookie")

    }

}

</script>

onchange 事件

<head>

<script>

function myFunction() {

    var x=document.getElementById("fname");

    x.value=x.value.toUpperCase();

}

</script>

</head>

<body>

    请输入英文字符：<input type="text" id="fname" onchange="myFunction()">

    <p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>

</body>

onmouseover 和 onmouseout 事件
- onmouseover 鼠标移至HTML元素上方
- onmouseout 鼠标移出元素时

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面

</div>

<script>

function mOver(obj) {

    obj.innerHTML="谢谢"

}

function mOut(obj) {

    obj.innerHTML="把鼠标移到上面"

}

</script>

onmousedown、onmouseup 以及 onclick 事件
- onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。
- 首先当点击鼠标按钮时，会触发 onmousedown 事件
- 当释放鼠标按钮时，会触发onmouseup 事件
- 最后，当完成鼠标点击时，会触发 onclick 事件。

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里

</div>

<script>

function mDown(obj) {

    obj.style.backgroundColor="#1ec5e5";

    obj.innerHTML="请释放鼠标按钮"

}

function mUp(obj) {

    obj.style.backgroundColor="green";

    obj.innerHTML="请按下鼠标按钮"

}

</script>

onfocus 获得焦点

点击了哪个鼠标

<head>

<script type="text/javascript">

function whichButton(event) {

    var btnNum = event.button;

    if (btnNum == 2) {

        alert("您点击了鼠标右键！")

    }

    else if(btnNum == 0) {

        alert("您点击了鼠标左键！")

    }

    else if(btnNum == 1) {

        alert("您点击了鼠标中键！");

    }

    else {

        alert("您点击了" + btnNum+ "号键，我不能确定它的名称。");

    }

}

</script>

</head>

<body onmousedown = "whichButton(event)">

<p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p>

</body>

光标的坐标

<head>

<script type="text/javascript">

function show_coords(event) {

    x=event.clientX

    y=event.clientY

    alert("X 坐标: " + x + ", Y 坐标: " + y)

}

</script>

</head>

<body onmousedown="show_coords(event)">

</body>

相对于屏幕光标的位置

<script type="text/javascript">

function coordinates(event) {

    x=event.screenX

    y=event.screenY

    alert("X=" + x + " Y=" + y)

}

</script>

</head>

<body onmousedown="coordinates(event)">

</body>

被按的按键的unicode

<head>

<script type="text/javascript">

function whichButton(event) {

    alert(event.keyCode)

}

</script>

</head>

<body onkeyup="whichButton(event)">

<p>在键盘上按一个键。消息框会提示出该按键的 unicode。 </p>

</body>

JS HTML DOM 元素（节点）

向HTML DOM添加元素，必须先创建该元素，然后向一个已经存在的元素中追加该元素

<div id="div1">

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

</div>

<script>

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

    var node=document.createTextNode("这是新段落。”);  // 向p元素中添加文本，必须首先创建文本节点

    para.appendChild(node);

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

    element.appendChild(para);

</script>

DOM 的CURD

创建新的HTML元素

<p id="word">我是p标签</p>

<script>

    // 1.直接往body中动态的添加标签(可以是任意类型)

    document.write('helloWorld');

    document.write('<img src="data:image/img_01.jpg">');

    // 2. 创建一个新的标签,然后插入到body中任意的一个标签中 appendChild

    var div = document.createElement('div');

    div.style.background = 'red';

    div.style.width = '500px';

    div.style.height = '300px';

    // 添加到父标签

    document.body.appendChild(div);

    // 往div中插入一张图片

    var img = document.createElement('img');

    img.src = 'image/img_02.jpg';

    div.appendChild(img);

    //3. 拿到p标签

    var img1 = document.createElement('img');

    img1.src = 'image/img_03.jpg';

    var p = document.getElementById('word');

    p.appendChild(img1);

</script>

删除HTML元素

删除有3种方式:
- 1.直接用body进行删除,但是只能作用于直接子标签
  - document.body.removeChild(p);
- 2.拿到当前标签的父标签,再来删除
  - p.parentNode.removeChild(p);
- 3.直接拿当前的标签,调用 remove()方法.
  - p.remove();

DOM 教程：http://www.w3school.com.cn/htmldom/index.asp

JS 学习（三）DOM的更多相关文章

js学习笔记--dom部分(一)
js 学习整理之Dom部分前面我总结了我最近学习js基础部分,当时提到过js分了三大部分,第一部分ECMA基础也就是第一次写的基础部分, 第二部分也就是DOM部分,也就是这里要写的内容的,然后第三部 ...
原生js学习选择dom
连bootstrap5 都抛弃jquery了,重新使用原生js来写,所以最近在学习原生js. 一.选择dom元素: id let sure=document.getElementById('sure' ...
JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结
JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode 父节点 childNodes ...
JS学习三（函数）
[函数的声明格式] 1.函数的声明格式: function 函数名(参数1,参数2,...){ 函数体代码 return 返回值: } 函数的调用: ① 直接调用:函数名(参数1的值,参数2的值,.. ...
node.js学习三--------------------- http服务器模块的搭建
/** * http服务器的搭建,相当于php中的Apache或者java中的tomcat服务器 */ // 导包 const http=require("http"); //创建 ...
js 学习三 Array
1.数组的长度 var sequence = [1, 1, 2, 3, 5, 8, 13]; sequence .length //7 2.字符串转换成数组 string.split() var my ...
我的three.js学习记录（三）
此次的亮点不是three.js的3d部分,而是通过调用摄像头然后通过摄像头的图像变化进行简单的判断后进行一些操作.上篇中我通过简单的示例分析来学习three.js,这次是通过上一篇的一些代码来与摄像头 ...
Node.js基础学习三之登录功能
本篇介绍Node.js访问数据库并返回数据给客户端需求基于Node.js学习(二) 数据库请下载:user.sql 1.创建user 实体类(model-user.js) function User ...
js学习之BOM和DOM
1. 浏览器的原理 1.1 浏览器的多线程 (1) 解析js引擎线程 (2) UI渲染线程 (3) 事件发起线程 (4) 发起请求的线程 (5) 定时器的线程 1.2 同步异步 (1) 前 ...
【Knockout.js 学习体验之旅】（2）花式捆绑
本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

随机推荐

sql 查看数据库物理文件路径
方式一:用于查询all数据库,适用于SQL2005及以上版本. USE [Master] GO /****** 对象 : Table [dbo].[Master] 脚本日期 : 06/29/2 ...
Unix系统小知识（转）
Unix操作系统的小知识 2.VI添加行号/翻页/清屏 .在对话模式时(即输完Esc再输入: ),输入“:set number”可以将编辑的文本加上行号.跟玩俄罗斯方块一样方便的上下左右移动箭头的快捷 ...
VS 2005 修复重置（深度重置）
/resetuserdata 参数如果 Visual Studio 在运行时被损坏,且无法从损坏状态进行恢复,您可以使用此参数将 Visual Studio 重置到其使用之初的状态.这些问题的例子可 ...
OS实验报告——作业调度模拟程序
一.目的和要求 1. 实验目的 (1)加深对作业调度算法的理解: (2)进行程序设计的训练. 2．实验要求用高级语言编写一个或多个作业调度的模拟程序. 单道批处理系统的作业调度程序.作业一投入运行, ...
BSD License
BSD开源协议(original BSD license.FreeBSD license.Original BSD license) BSD开源协议是一个给于使用者很大自由的协议.基本上使用者可以”为 ...
【java规则引擎】之Drools之Rete算法
一:规则引擎--->规则引擎的核心是Pattern Matcher(模式匹配器).不管是正向推理还是反向推理,首先要解决一个模式匹配的问题.--->对于规则的模式匹配,可以定义为: 一个规 ...
从Eclipse转移到IntelliJ IDEA一点心得
http://www.ituring.com.cn/article/37792 本人使用IntelliJ IDEA其实并不太久,用了这段时间以后,觉得的确很是好用.刚刚从Eclipse转过来的很多人开 ...
（转）Predictive learning vs. representation learning 预测学习与表示学习
Predictive learning vs. representation learning 预测学习与表示学习 When you take a machine learning class, ...
H5页面在QQ和微信上分享，为什么不能自定义设置图片和摘要？
[记录]title标签中的页面标题为抓取标题.body内第一个img标签内的图片为自动抓取缩略图,图片宽高要大于300,如果不希望显示出来,将标签宽高皆设置为0.摘要显示为来源链接,如需自定义需要通过 ...
ETL利器Kettle实战应用解析系列三【ETL后台进程执行配置方式】
本文主要阅读目录如下: 1.简介Kettle的Kitchen和Span 2.命令行调度任务配置方式 3.后台进程配置运行方式 4.Windows任务设置 5.Demo下载 1.简介Kettle的Kit ...

JS 学习（三）DOM

JS 学习（三）DOM的更多相关文章

随机推荐

热门专题