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 ...

随机推荐

LeetCode-Search a 2D Matrix
Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...
Makefile简易教程
本文部分内容引用: 中文维基百科. 一个简单的Makefile教程. Makefile简介在软件开发中,make通常被视为一种软件构建工具.该工具主要经由读取一种名为"makefile&q ...
div四个边框分别设置阴影样式
对于div边框的阴影一直没有很好地理解,也一直不明白怎么给四个边框分别设置阴影.昨天项目中碰到了这个问题,就认真想了一下,在此总结一二. 首先,还是从官方解释说起. 网上的解释通常都是什么水平阴影长度 ...
.Net WebApi 实现OAuth2.0认证
现在多数公众平台提供的api都使用OAuth2.0认证模式,最近在搞Android方面的开发,身份认证和权限控制的各方面比较来说,使用OAuth认证的还是比较靠谱,OAuth2.0的协议可以参考htt ...
【Unity3D基础教程】给初学者看的Unity教程（四）：通过制作Flappy Bird了解Native 2D中的RigidBody2D和Collider2D
作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 引子在第一篇文章[Unity3D基础教程] ...
Perl/Nagios – Can’t locate utils.pm in @INC
While trying to use a Nagios plugin I got an error saying that “Can’t locate utils.pm in @INC”. Foll ...
单因素特征选择--Univariate Feature Selection
An example showing univariate feature selection. Noisy (non informative) features are added to the i ...
SpringMVC 请求路径结尾存在.使用@PathVariable访问路径内容，路径参数获取不准确的问题
SpringMVC采用Get方式请求资源时,如果请求路径的结尾中带有小数点(.)时,同时使用@PathVariable访问路径内容时,请求路径中最后一个小数点及其后面的内容会被Spring截断丢弃比如 ...
web服务器和ftp服务器有什么区别
WEB是以一个网页的形势展现出来的,FTP是一个上传和下摘的软件统称,一般,在网站制作中有WEB和FTP两种上传文件的方式,WEB是通过文件夹复制的方式将本地文件传到服务器上,速度较慢,FTP是通过不 ...
获取广告标识符ifad
#import <AdSupport/ASIdentifierManager.h> NSString *adId =[[[ASIdentifierManager sharedManager ...

JS 学习（三）DOM

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

随机推荐

热门专题