JS第二部分--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.获取文档对象
console.log(document);
//2.获取HTML
console.log(document.documentElement);
console.dir(document.documentElement);
//3.获取body
console.log(document.body);
//4.获取body中元素节点对象的三种方式
4.1通过ID获取找到一个
var o = document.getElementById(‘box‘);
4.2通过类名获取找到多个(伪数组)
var os = document.getElementsByClassName(‘box‘);

4.3通过标签名获取多个(伪数组)
var os = document.getElementsByTagName(‘div‘);

四、事件的介绍

onclick: 鼠标单击
ondblclick: 鼠标双击
onkeyup: 按下并释放键盘上的一个键时触发
onchange: 文本内容或下拉菜单选项发生改变
onfocus: 获得焦点
onblur: 失去焦点
onmouseover: 鼠标悬停
onmouseout: 鼠标移出
onload: 网页文档加载事件
onunload: 关闭网页时
onsubmit: 表单提交时
onreset: 重置表单时

1. onload事件
<body>
<div id="box"></div>
</body>

JavaScript中有入口函数:window.onload()
作用是等待文档和图片资源加载完成后,会自动触发onload事件
给函数赋值
window.onload = function(){
var o = document.getElementById(‘box‘);
console.log(o);
}
如果没有这个方法。不写onload()方法,这时候o==null
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="application/javascript">
// window.onload = function () {
var o = document.getElementById(‘box‘);
console.log(o);
// }
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
所以以后写script脚本写在body之后,window.onload可以不用了
而且这个是等待文档和图片资源加载完后才触发
如果客户网速卡了,就必须要等到加载完成
window.onload有事件覆盖现象:只打印2
window.onload=function(){
console.log(1);
}
window.onload=function(){
console.log(2);
}
如果只等待文档资源加载完成就触发可以写:也一般不用
document.onload=function{
...
}
2.绑定事件
window.onload = function () {
//获取事件源
var o = document.getElementById(‘box‘);
console.log(o);
//绑定事件方式
o.onclick=function(){
alert(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属性里的样式,优先级最高
}

六、节点样式属性颜色切换

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;
}

}
console.log(222);

七、节点对象对值的操作

<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‘;

八、标签属性的操作(例如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‘);
}
}

九、显示隐藏的两种方式

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

十一、节点操作补充

<div id=‘box‘>
<button id=‘btn‘>
<span>哈哈</span>
<span>呵呵</span>
</button>
</div>

//获取父节点
$(‘btn‘).parentNode
//获取子节点
$(‘btn‘).children
//移除自己(注意:移除后再创建的跟之前不是同一个对象慎用)
this.parentNode.removeChild(this);

原文地址:https://www.cnblogs.com/staff/p/10605288.html

时间: 2024-10-05 23:58:43

JS第二部分--DOM文档对象模型的相关文章

js基础,DOM 文档对象模型

DOM 文档对象模型 DOM (document object model) 文档对象模型,它定义了操作文档对象的接口. DOM 把一份html文档表示为一棵家谱树,使用parent(父), child(子), sibling(兄弟)等记号 来表明家庭成员之间的关系. 一.节点 节点(node) 一词来自于网络理论,这代表着网络中一个个的连接点,网络是由节点构成的. 对于html文档也是一样,文档是由节点构成的集合. 1.元素节点 元素节点如 <body> <p> <div&

xml.dom——文档对象模型API

文档对象模型,或者"DOM",是一个跨语言API的World Wide Web Consortium(W3C)来访问和修改XML文档.DOM的实现提供了一个XML文档树结构,或允许客户机代码从头开始建立这样一个结构.然后给访问结构通过一组对象提供著名的接口. 模块内容 xml.dom包含以下功能: xml.dom.registerDOMImplementation(name,factory) 注册factory函数名称的名称.factory函数应该返回一个对象实现 DOMImpleme

JavaScript学习笔记7 之DOM文档对象模型

一.什么是DOMDocument Object Model 文档 -------对象 ----模型-------缩写DOM DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.DOM树中的所有节点均可通过JS进行访问.所有HTML元素(节点)均可被修改.创建或删除. 二.节点类型1.节点类型 HTML 文档中的所有内容都是节点(node): 整个文档是一个文档节点每个 HTML 元素是元素节点HTML 元素

09.05 javascript 属性 内置属性 自定义属性 DOM文档对象模型

# 属性 ### 内置属性 * js对象和html标签有映射关系 ### 自定义属性 * getAttribute() * setAttribute() * hasAttribute() * removeAttribute() ### H5新增的自定义属性操作操作 * HTML:  `<tag data-attr="">` * JS :  element.dataset.attr ### 把属性当做属性节点 * getAttributeNode(attrname) # 元素

DOM文档对象模型

 DOM文档对象模型   1.DOM对象分为:  a.Document对象: b.Element对象: c.Node对象: 2.DOM发展级别: DOM有4个级别,分别为: a.DOM 0 级:定义Document对象的一些属性和方法: b.DOM 1 级: c.DOM 2 级: d.DOM 3 级: 注:第 0 级和第 3 级不是W3C的官方标准: 3.DOM组成:  a.Core DOM:也称核心DOM编程,定义标准针对任何结构文档的对象: b.XML DOM:定义一套标准的针对 XML 文

JavaScript学习总结(一)DOM文档对象模型

一.文档(D) 一个网页运行在浏览器中,他就是一个文档对象. 二.对象(O) "对象"是一种自足的数据集合.与某个特定对象相关联的变量被称为这个对象的属性,只能通过某个对象调用的函数被称为这个对象的方法. JavaScript中有三种类型的对象: ①用户自定义对象:不做了解 ②内建对象(native object):JavaScript中一开始就存在的.列如Array,Math,Date等(JavaScript语法区分大小写) ③宿主对象(host object):由浏览器提供的对象.

JavaScript之DOM文档对象模型

1.DOM是文档对象模型(Document Object Model)的简称. 当网页加载时,可以将结构化文档在内存中转换成对象树. 简单的说,DOM并不是一种技术,而是一种访问结构化文档的思想.借助DOM模型,我们可以对DOM树进行修改.删除.新增等操作,让结构化文档动态化. 2.DOM模型中的节点--文档可以说是由节点构成的集合.在DOM模型中有以下3种节点: (1)元素节点:各种标签就是这些元素节点的名称,如<ul>.<p>等: (2)文本节点:文本节点总是被包含在元素节点的

js仿百度文库文档上传页面的分类选择器_第二版

仿百度文库文档上传页面的多级联动分类选择器第二版,支持在一个页面同时使用多个分类选择器: 此版本把HTML,CSS,以及图片都封装到"category.js"中,解决因文件路径找不到样式及图片的问题: 源码下载地址:http://download.csdn.net/detail/testcs_dn/7290577 初始状态,一个页面使用两个,可以初始化之前选中的分类: 选择状态: 当选中一个分类后,会触发"onChange"事件,如上图中的"您选择的分类编

005_01文档对象模型DOM

DOM:document object model  文档对象模型.是W3C织制订的一套用于访问XML和HTML文档的标准.允许脚本动态地访问和更新文档的内容.结构和样式. W3C DOM 标准被分为 3 个不同的部分: 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型 左边为HTML文档树,右边为结构树示意图 XML DOM 定义了访问和处理 XML 文档的标准方法. HTML文档格式 符合X