欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS BOM、DOM、事件

程序员文章站 2022-06-23 08:44:56
1、BOM2、DOM3、事件...

1、BOM
2、DOM
3、事件

BOM

一.window对象

  • BOM的核心对象是window, 在全局作用域声明的变量、函数都会变成window对象的属性和方法。
  • 全局变量不可以通过delete删除,但是window对象上直接定义的属性可以

二.位置大小

1.screenTop、screenLeft:窗口位置
screenTop:浏览器窗口相对于电脑窗口上边的位置
screenLeft:浏览器窗口相对于电脑窗口左边的位置
2.innerWidth、innerHeight、outerWidth、outerHeight:窗口大小
innerWidth、innerHeight:返回页面可视区大小(减去了边框)
outerWidth、outerHeight==: 返回浏览器本身的尺寸
3.clientWidth、clientHeight:保存了页面视口信息

  • 使用方法:
    documetn.documentElement.clientWidth
    document.documentElement.clientHeight

4.resizeTo(X,Y)、resizeBy(X,Y):调整浏览器窗口大小
resizeTo(X,Y):接收的是新的宽和高
resizeBy(X,Y):接收的是高度差,如果X,Y是正的,就在原有宽高上加上这么多,如果是负的就减去这么多
5.window.open(url,窗口目标,特定字符串,是否替代当前页面),window.close()

//打开页面
<input type="button" value="open" οnclick="window.open('close.html'); "/>
//关闭页面
<input type="button" value="close" οnclick="window.close()"/>

6.超时调用、间歇调用
(1)超时调用
setTimeout(代码,毫秒数):返回一个数值ID
clearTimeout(数值ID);
(2)间歇调用
setInterval(代码,毫秒数):返回一个数值ID
clearInterval(数值ID)
7.系统对话框
(1)alert("hello world ");
JS BOM、DOM、事件
(2)confirm(“hello world”);
JS BOM、DOM、事件
(3).prompt()
JS BOM、DOM、事件

三、location对象

window.location=document.location:把当前的地址显示出来
用法1:alert(window.location);
用法2:onclick="window.location='网址' "//点击直接跳转到网址

四、navigator对象

1.window.navigator.userAgent
alert(window.navigator.userAgent); //判断浏览器类型

DOM

1、Node类型

1、JS所有结点类型都继承自node类型,结点类型由在node类型中定义的12个常量值表示。(再用if判断时最好用数字值进行比较)

  • nodeName、nodeValue、nodeType
    nodeType用来得到当前结点的结点类型。
    对于元素结点,其nodeName始终保存的是标签名。

2、每个结点都有一个childNodes属性,访问childNodes属性可以用
someChild.childNodes[0]或someChild.childNodes.item(0)

  • 每个结点都有一个parentNodes属性,与childNodes属性访问方式相同
  • children与childNodes类似,但它只对元素结点有操作,不会对文本结点进行操作
  • parentNode:是指某一元素在结构上的父级,是固定的,不同情况不会有区别
    offsetNode:是指已定位的父级,不一定是结构上的父级,会改变

3、收尾子节点:
firstElementChild、lastElementChild
4、兄弟节点
nextSibing、nextElementSibing
preciousSibing、previousElementSibing

2、DOM操纵元素属性

(1)获取:getAttribute(名称);
(2)设置:setAttribute(名称,值);
(3)删除:removeAttribute(名称);
其他方式:
(1)oDiv.style.display=“block”;
(2)oDiv.style[“display”]=“block”;

3、创建、插入、删除元素

(1)创建dom元素:document.createElement(标签名);
父元素 . appendChild(变量名);
两个都要写,再能把元素成功添加
(2)插入元素:父元素 . insertBefore(节点,已有节点);
在已有节点前加入
(3)删除节点:父元素 . removeChild(节点);

4、document类型

1.文档的子节点:
DocumentType、Element、ProcessingInstruction、Commom
2.属性:
(1)document . title:包含的是< title >的内容
(2)document . URL:存的是当前页面的完整URL(不能设置)
(3)document . domian:存的是当前页面的域名(可以设置)
(4)document . referrer:存的是连接到该页面的页面URL(不能设置)
3.获取元素
(1)getElementById(Id名);
(2)getELementsByTagName(标签名);如input,div ,p等等
4.文档写入
(1)两个都接收的是字符串,只不过第二个会自动添加 \n
write()
writeIn()
(2)打开和关闭网页(前面写过)
open()
close()

5、Element类型

1.访问元素的标签名:nodeName、tagName
先获取元素,然后变量 . tagName 或者 变量 . nodeName
2.HTML元素
所有html元素都由HTMLElement类型表示,每个HTML元素都存在以下特性:
id:元素的唯一标识符
title:元素的附加说明
lang:元素的语言代码
dir:语言的方向
className:class
3.获取特性:
(1)获取:getAttribute(名称);
(2)设置:setAttribute(名称,值);
(3)删除:removeAttribute(名称);
4.创建元素:createElement()
添加子元素:appendChild()
插入子元素:insertChild()
替换子元素:replaceChild()

6、Text类型(纯文本内容)

1.创建文本节点:document.createTextNode(要插入节点的文本)
2.normallize():在包含两个或多个文本元素的父节点上调用该方法,会把许多文本节点合并成一个
3.splitText():将一个吻吧分成两个文本节点,按照指定位置分隔

7、Comment类型

  • comment类型与text类型继承相同的基型,因此它拥有了出splitText()之外的所有字符串操作。
  • document。createComment并为其传递注释文本可以创造注释节点,
var comment = document.creatELement("A comment");

8、CDATASection类型

只针对于基于XML的文本,与text类型继承相同的基型,因此它拥有了出splitText()之外的所有字符串操作。

9、DocumentType类型

在Web浏览器中并不常用。
1.属性:
(1)name:文档类型的名称
(2)entities:文档类型描述的实体的NamedNodeMap对象
(3)notations:由文档类型描述的符号NamedNodeMap对象

10、DocumentFragment类型

  • 在所有节点类型中,只有这个类型在文档中没有对应的标记,DOM规定文档片段是一种“轻量级”的文档,可以包含和控制节点,但不会想完整文档那样占用资源。
    1.子节点:Element、ProcessingInstruction、Comment、Text、CDATASection、EntityReference.
  • 创建文档片段:document.createDocumentFragment();
  • 可以通过appendChild()和insertBefore()把文档片段添加到文档中

11、Attr类型

1.方法:getAttribute()、setAttribute()、removeAttribute()
2.属性:name:特性名称
value:特性的值
specified:布尔值,用来区别特性是在代码中是指定的还是默认的

12.操作表格

1.获取:
tBodies=getElementsByTagNames(‘body’);
rows=getElementsByTagNames(‘tr’);
cells=getElementsByTagNames(‘td’);
tHead:表格里的第一个元素
tFoot:表格里的最后一个元素

例如:
父元素.getELementsByTagNames('body')[0].getElementsByTagNames('tr')[1].getElementsByTagName('td')[1],innerHTML
==父元素.tBodies[0].rows[1].cells[1].innerHTML

事件

一、事件冒泡、事件捕获

1.事件冒泡:
在胃泡中,最内侧元素的事件会首先被处理,然后是更外侧的:首先处理< p>元素的点击事件,然后是< div> 元素的点击事件。
2.事件捕获:
在捕获中,最外侧元素的事件会首先被处理,然后是更内侧的:首先处理< div> 元素的点击事件,然后是< p>元素的点击事件。
3.DOM事件流

  • 事件流包含三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段

二、事件处理程序

  • 事件就是用户或浏览器自身执行的某种动作

1.DOM0级处理程序

btn.οnclick=onClick(); //添加事件
//btn.οnclick=null; //移除事件

2.DOM2级处理程序

  • 添加处理指定和删除事件处理程序
    addEventListener()、removeEventListener()
    接受三个参数:要处理的事件名、作为处理程序的函数、布尔值(true代表在捕获阶段调用事件处理程序、false代表在冒泡阶段调用事件处理程序)
btn.addEventListener("click", onClick, false); //添加事件

//btn.removeEventListener("click", onClick, false); //移除事件

3、IE事件处理程序
attachEvent: 添加事件处理函数
detachEvent: 移除事件处理函数

三、事件类型

UI事件

1、load事件:当页面完全加载后(包括所有图像、javascript文件、CSS文件等外部资源),就会触发window上的load事件
一般会用window.onload=function(){};
2.unload事件:该事件在文档被完全卸载后触发,只要用户从一个页面切换到另一个页面,就会触发unload事件。

//使用JavaScript:
EventUtil.addHandler(window,"unload",function(){
    alert("Unload");
});
//第二种方法,为body元素添加一个特性
<!DOCTYPE html>
<html>
<head>
    <titile>Unload Event Example</title>
</head>
<body onunload = "alert('Unloaded!')">
</body>
</html>

3.resize事件:当浏览器窗口被调整到一个新的高度或宽度时,就会触发resize事件。

EventUtil.addHandler(window, "resize", function () {
    alert("Resized");
});

4、scroll事件
可以使用scrollTop、scrollLeft来监控这一变化

window.addEventListener('scroll',function(){
    if(document.compatMode == "CSS1Compat") {
        alert(document.documentElement.scrollTop);
    } else {
        alert(document.body.scrollTop);
    }
},false);
焦点事件
  • 焦点事件会在页面元素获得或失去焦点时触发,利用这些事件并与document.hasFocus()方法及document.activeElememt属性配合,可以知晓用户在页面上的行踪。
  • blur:在元素失去焦点时触发。这个事件不会冒泡。所有浏览器都支持他。
  • DOMFocusIn:在元素获得焦点时触发。这个事件与HTML事件focus等价,但它冒泡。只有Opera支持这个事件。DOM3级事件肥企鹅了DOMfocusIn,选择了focusin.
  • DOMFocusOut:在元素失去焦点时触发。这个事件是HTML事件blur的通用版本。只有Opera支持这个事件。DOM3 级事件废弃了 DOMFocusOut,选择了focusout.
  • focus:在元素获得焦点时触发,这个事件不会冒泡,所有浏览器都支持他。
  • focusin:在元素获得焦点时触发。这个事件与HTML事件focus等价,但它冒泡。支持这个事件的浏览器有IE5.5+,Safari5.1+、Opera11.5+和Chrome
  • focusout:在元素失去焦点时触发,这个事件是HTML事件blur的通用版本。支持这个事件的浏览器有
鼠标事件、键盘事件

事件 浏览器支持 描述
onClick:鼠标点击事件,多用在某个对象控制的范围内的鼠标点击
onDblClick: 鼠标双击事件
onMouseDown:鼠标上的按钮被按下了
onMouseUp: 鼠标按下后,松开时激发的事件
onMouseOver: 当鼠标移动到某对象范围的上方时触发的事件
onMouseMove:鼠标移动时触发的事件当鼠标离开某对象范围时触发的事件
onKeyPress:当键盘上的某个键被按下并且释放时触发的事件.
onKeyDown: 当键盘上某个按键被按下时触发的事件
onKeyUp: 当键盘上某个按键被按放开时触发的事件

本文地址:https://blog.csdn.net/ladream/article/details/107875639

相关标签: js