JS第二部分--DOM文档对象模型
一、DOM的概念
二、DOM可以做什么
三、DOM对象的获取
四、事件的介绍
五、DOM节点标签样式属性的操作
六、DOM节点对象对值的操作
七、DOM节点-标签属性的操作(例如id class src href等)
八、DOM节点显示隐藏的两种方式
九、DOM节点创建
十、查找DOM节点
-----------------------------------
一、DOM的概念
Document Object Model文档对象模型
万事万物皆对象：
（DOM树中一切皆节点,节点是一个标签）
document对象
|
html对象
| |
head对象 body对象
| | | | | | | |
......
DOM对象产生是为了让js操纵文档
对象有属性和方法
二、DOM可以做什么
1、找到元素节点(获取DOM)
2、设置标签属性值(对标签属性的操作)
3、设置标签的样式(对样式的操作)
4、设置标签的值
5、动态的创建和删除元素(对DOM的增删改建)
6、事件的触发响应：找对象，加事件，事件的业务逻辑
三、DOM对象的获取
<body>
<div id="box" class="box"></div>
<div id="box2" class="box"></div>
</body>
//1.获取文档对象
document
//2.获取HTML
document.documentElement
//3.获取body
document.body
//4.获取body中元素节点对象的三种方式
4.1通过ID获取找到一个
document.getElementById('box');
4.2通过类名获取找到多个(伪数组)
document.getElementsByClassName('box');
4.3通过标签名获取多个(伪数组)
document.getElementsByTagName('div');
四、事件的介绍
onclick: 鼠标单击
ondblclick: 鼠标双击
onkeyup: 按下并释放键盘上的一个键时触发
onchange: 文本内容或下拉菜单选项发生改变
onfocus: 获得焦点
onblur: 失去焦点
onmouseover: 鼠标悬停
onmouseout: 鼠标移出
onmouseenter:鼠标进入
onmouseleve:鼠标离开
onload: 网页文档加载事件
onunload: 关闭网页时
onsubmit: 表单提交时
onreset: 重置表单时
0.键盘事件监听，监听ipt输入框按下回车键（如果监控全局就是$(document)）
$('ipt').onkeydown=function (event) {
if(event.keyCode===13){
alert('按了回车键');
}
};
1. onload事件
<body>
<div id="box"></div>
</body>
JavaScript中有入口函数：window.onload()
window.onload可以写在任何地方。作用是等待文档和图片资源加载完成后，会自动触发onload事件
给函数赋值
window.onload = function(){
var o = document.getElementById('box');
console.log(o);
}
所以以后写script脚本写在body之后，可以不用window.onload了,也表示文档和图片加载完成后执行
而且这个是等待文档和图片资源加载完后才触发
如果客户网速卡了，就必须要等到加载完成
window.onload有事件覆盖现象：只打印2
window.onload=function(){
console.log(1);
}
window.onload=function(){
console.log(2);
}
如果只等待文档资源加载完成就触发可以写document.onload：也一般不用
document.onload=function(){
...
}
2.绑定事件的步骤
window.onload = function () {
//获取事件源
var o = document.getElementById('box');
console.log(o);
//绑定事件方式
o.onclick=function(){
alert(1);
}
}
五、DOM节点标签样式属性的操作
1，需求：初始化的时候是红色，点击盒子变为绿色
<div class="box"></div>
写在body后
var o = document.getElementsByClassName('box')[0];
o.onclick = function(){
//获取css属性对象(内置的style样式)
var css = o.style;
//设置属性值
css.backgroundColor = "green";
//css.backgroundColor改之前为空。
//因为这个获取的是标签内置的style属性里的样式，优先级最高
}
2，需求：节点样式属性颜色切换
var o = document.getElementsByClassName('box')[0];
//事件的操作是异步的不会阻塞
var isRed=true;
o.onclick = function(){
if(isRed){
o.style.backgroundColor='green';
isRed=false;
}else{
o.style.backgroundColor='red';
isRed=true;
}
}
六、DOM节点对象对值的操作
<button id="btn">设置值</button>
<div id="box"></div>
点击按钮给div设置值alex
var btn = document.getElementById("btn");
var div = document.getElementById("box");
btn.onclick = function{
//只获取文本
console.log(div.innerText);
div.innerText="alex";
//获取所有节点，包括文本、标签、换行
console.log(div.innerHTML);
div.innerHTML='<h2>alex</h2>';
}
如果是表单控件，有value属性的必须通过value来设置和获取：
<input value='123' id='input'>
var input = document.getElementById('input');
console.log(input.value);
input.value='321';
七、DOM节点-标签属性的操作(例如id class src href等)
获取标签属性值：
this.getAttribute('src');获取相对路径 等价于 this.src 获取绝对的路径
this.getAttribute('id'); 等价于 this.id
this.getAttribute('class'); 等价于 this.class
设置标签属性值：
this.setAttribute('src','./images/image.png'); 等价于 this.src='xxx'
示例：
<a href="javascript:void(0);">
<img id="prev" src="./images/image.png" alt="上一张">
</a>
window.onload=function(){
var img = document.getElementById('prev');
img.onmouseover=function(){
console.log(img); //相当于python中的self 谁调用的事件this就是谁
//设置属性值
this.setAttribute('src','./images/image-hover.png');
};
img.onmouseout=function(){
this.setAttribute('src','./images/image.png');
}
}
八、DOM节点显示隐藏的两种方式
.hidden{
display:none;
} //网页中频繁切换建议使用display:none的方式
<button id="btn">隐藏</button>
<div id="box" class="box"></div>
第一种方式：
window.onload=function(){
function $(id){
return document.getElementById(id);
}
var isShow=true;
$('btn').onclick=function(){
if(isShow){
//通过控制样式属性的display属性对盒子进行显示和隐藏
$('box').style.display='none';
isShow=false;
this.innerText='显示';
}else{
$('box').style.display='block';
isShow=true;
this.innerText='隐藏';
}
}
}
第二种方式：在类后面添加隐藏类
window.onload=function () {
function $(id){
return document.getElementById(id);
}
var isShow=true;
$('btn').onclick=function () {
if(isShow){
$('box').className += ' hidden';
this.innerText='显示';
isShow=false;
}else{
var newClaNam=$('box').className.replace(' hidden','');
$('box').className = newClaNam;
this.innerText='隐藏';
isShow=true;
}
}
}
九、DOM节点创建
标签有创建有销毁，页面性能有损耗。
如果页面中出现频繁性的切换，不要使用创建元素的形式创建而是使用显示隐藏的方式
<button class="create">创建p标签</button>
<button class="remove">移除p标签</button>
<div class="box">
</div>
添加节点
window.onload=function(){
function $(id){
return document.getElementById(id);
}
var p = null;
$('create').onclick=function(){
//创建p节点元素
p = document.createElement('p');
p.innerText='alex';
//追加元素 父子 父元素.appendChild(子元素)
$('box').appendChild(p);
}
$('remove').onclick=function(){
//删除元素 父子 父元素.removeChild(子元素)
$('box').removeChild(p);
}
}
还有一种方式添加节点：
//父节点.insertBefore(新的子节点, 作为参考的节点)
$('box').document.body.insertBefore(op ,$('hh')); //在box下，在hh节点之前添加op节点
十、查找DOM节点
<div id='box'>
<button id='btn'>
<span>哈哈</span>
<span>呵呵</span>
</button>
</div>
//获取父节点
$('btn').parentNode
//获取子节点
$('btn').children
//移除自己（注意：移除后再创建的跟之前不是同一个对象慎用）
this.parentNode.removeChild(this);
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
不常用：查找节点，节点包括：元素，文本，不包括属性
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点
JS第二部分--DOM文档对象模型的更多相关文章
- 认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构（节点树）。
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...
- Javascript - DOM文档对象模型
文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Ja ...
- xml.dom——文档对象模型API
文档对象模型,或者“DOM”,是一个跨语言API的World Wide Web Consortium(W3C)来访问和修改XML文档.DOM的实现提供了一个XML文档树结构,或允许客户机代码从头开始建 ...
- JavaScirpt(JS)——DOM文档对象模型
一.HTML DOM介绍 HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML). HTML DOM 定义了用于 HT ...
- js下 Day02、DOM文档对象模型
一．DOM简介 Document Object Model 文档对象模型 DOM包含了所有HTML元素的属性和方法,以及访问他们的方式: #二．DOM节点 #1. 什么是节点? HTML中所有的元素都 ...
- JavaScript学习笔记7 之DOM文档对象模型
一.什么是DOMDocument Object Model 文档 -------对象 ----模型-------缩写DOM DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘 ...
- DOM 文档对象模型
document 对象(作为对象),是 DOM 的核心作用:对内容,属性,样式等操作属性:title:设置/返回当前文档的标题url:返回当前文档的 urlinnerHTML:获取指定对象内的内容bg ...
- JavaScript学习总结（一）DOM文档对象模型
一.文档(D) 一个网页运行在浏览器中,他就是一个文档对象. 二.对象(O) "对象"是一种自足的数据集合.与某个特定对象相关联的变量被称为这个对象的属性,只能通过某个对象调用的函 ...
- DOM文档对象模型
随机推荐
- Java基础2：基本数据类型与常量池
本文会结合虚拟机对引用和对象的不同处理来介绍三大特性的原理. 三大特性:继承 封装 多态 继承 Java中的继承只能单继承,但是可以通过内部类继承其他类来实现多继承. public class Son ...
- Struts2【UI标签、数据回显、资源国际化】
Struts2UI标签 Sturts2为了简化我们的开发,也为我们提供了UI标签...也就是显示页面的标签..... 但是呢,Struts2是服务端的框架,因此使用页面的标签是需要在服务器端解析然后再 ...
- 补习系列(9)-springboot 定时器，你用对了吗
目录 简介 一.应用启动任务 二.JDK 自带调度线程池 三.@Scheduled 定制 @Scheduled 线程池 四.@Async 定制 @Async 线程池 小结 简介 大多数的应用程序都离不 ...
- Java开发知识之XML文档使用,解析
目录 XML文件详解 一丶XML简介 1.文档结构 2.XML中的元素(Element)或者叫做标签(Tab).属性 文本内容. 节点(Node) 3.XML语法规则 二丶XML文档解析 三丶使用XP ...
- 想晋级高级工程师只知道表面是不够的！Git内部原理介绍
本文由云+社区发表 作者:腾讯工蜂用户:王二卫 从不一样的视角了解git,以便更好的使用git 一.git & git 版本库认识 git 是一个内容寻址的文件系统,其核心部分是一个简单的键值 ...
- Django学习笔记（1）——初识Django
一:Web框架介绍 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以快速帮你开发特定的系统. Web框架是别人已经设定好的一个web网站模板,你学习它 ...
- springboot+cloud 学习（五）统一配置中心 spring cloud config + cloud bus + WebHooks +RibbitMQ
前言 微服务要实现集中管理微服务配置.不同环境不同配置.运行期间也可动态调整.配置修改后可以自动更新的需求,Spring Cloud Config同时满足了以上要求.Spring Cloud Conf ...
- Centos7-yum部署配置LNMP+php-fgm，一台机器上部署
一.简介 1.了解nginx特性 请参考,https://www.cnblogs.com/zhangxingeng/p/10150955.html 2.LNMP:linux+nginx+mysql+p ...
- 【转载】 C#检测输入的内容中是否含有中文
在C#开发中,可以结合正则表达式,来检测输入的内容中是否包含中文,Regex类是C#中有关正则表达式处理的相关类,功能强大,我们只需要设置好规则,即可很快检测出输入的字符串内容中是否含有中文信息. R ...
- VisualStudio2017集成GitHub
1 概述 通过使用VisualStudio2017来编写C语言版本的helloworld程序,然后上传至GitHub 2 VisualStudio2017安装GitHub插件 前提条件: 必须完成Vi ...