DOM
DOM的发展(了解)
Documentc Object Model文档对象模型是针对XML但经过扩展用于HTML的应用程序接口（API Application programming Interface).DOM把整个界面都映射成多层次节点结构，每个组成部分都是某种类型的节点，通过DOM可以操作任何节点。
DOM由来
因为Internet Explorer4和Netscape Navigation4分别支持不同的DHTML（动态HTML）,为了统一标准，负责制定web通信标准的W3C(World Wide Web Consortium,万维网联盟)开始制定DOM.
DOM0
Netscape Navigator 4和IE4分别发布于1997年的6月和10月发布的DHTML，他们是未形成标准的试验性质的初级阶段的DOM，称为dom0,并不是标准。
DOM1
DOM1是W3C在1998年制定的标准，DOM1级主要定义了HTML和XML文档的底层结构。在DOM1中，DOM由两个模块组成：DOM Core（DOM核心）和DOM HTML。其中，DOM Core规定了基于XML的文档结构标准，通过这个标准简化了对文档中任意部分的访问和操作。DOM HTML则在DOM核心的基础上加以扩展，添加了针对HTML的对象和方法，如：JavaScript中的Document对象.
DOM2
DOM2级在原来DOM的基础上又扩充了鼠标、用户界面事件、范围、遍历等细分模块，而且通过对象接口增加了对CSS的支持。DOM1级中的DOM核心模块也经过扩展开始支持XML命名空间。在DOM2中引入了下列模块，在模块包含了众多新类型和新接口：
DOM视图（DOM Views）：定义了跟踪不同文档视图的接口DOM事件（DOM Events）：定义了事件和事件处理的接口DOM样式（DOM Style）：定义了基于CSS为元素应用样式的接口DOM遍历和范围（DOM Traversal and Range）：定义了遍历和操作文档树的接口
DOM3
DOM3进一步扩展了DOM，在DOM3中引入了以下模块：
DOM加载和保存模块（DOM Load and Save）：引入了以统一方式加载和保存文档的方法DOM验证模块（DOM Validation）：定义了验证文档的方法DOM核心的扩展（DOM Style）：支持XML 1.0规范，涉及XML Infoset、XPath和XML Base
一、概念和作用
概念
文档对象模型，Document Object Model
DOM是一个使程序和脚本有能力动态访问和更新文档内容、结构以及样式的(与平台和语言无关的)接口。
DOM描述了处理网页内容的方法和接口
作用
把网页里面的元素当成对象一样支配
DOM树(结构)
window对象也就是浏览器窗口对象，所有东西都被当作是window的子对象
文档对象document是window下的一个属性，代表整个DOM文档对象
根元素(root) html标签，之后一级一级往下分
文档树(DOM树) 以HTML为根节点 形成的一棵倒立的树状结构，我们称作DOM树；这个树上所有的东西都叫节点，DOM树当中有12种节点,我们需要关注的节点有4中:
- 元素节点 标签 1
- 属性节点 属性 2
- 文本节点 内容 3
- 注释节点 注释 8
这些节点如果我们通过DOM方法去获取或者其它的操作去使用的话，就叫DOM对象
获取DOM元素对象的六种方法
document下的方法，通过特定的方式获取到相关元素，封装为dom对象返回
| 方法 | 作用 | 说明 |
|---|---|---|
| getElementById("id"); | 通过ID来进行获取页面元素 | |
| getElementsByClassName("class") | 通过class名称来获取页面元素 | 返回的是个HTMLCollection类数组 |
| getElementsByTagName("TagName") | 通过标签名去获取页面元素 | 返回的是个HTMLCollection类数组 |
| document.getElementsByName("name") | 通过name属性去获取页面元素 | 返回的是个NodeList类数组 |
| querySelector() | 通过CSS选择器来选择元素 | 找到了元素就返回1个元素 找不到就返回null |
| querySelectorAll() | 通过CSS选择器来选择元素 | 返回的是个NodeList类数组 |
封装类似Jquery选择器的方法
Object.prototype.$=function(selector){
let flag;
//三目运算,如果this等于全局对象,则返回document前缀的,否则返回this前缀的
this==window||undefined||global?flag=document:flag=this;
//如果元素总个数为一,则返回querySelector(),否则返回querySelectorAll()
return flag.querySelectorAll(selector).length==1?flag.querySelector(selector):flag.querySelectorAll(selector);
//写一块的写法
// return this==window||undefined||global?document.querySelectorAll(selector).length==1?document.querySelector(selector):document.querySelectorAll(selector):this.querySelectorAll(selector).length==1?this.querySelector(selector):this.querySelectorAll(selector);
}
获取元素的一些问题
// getElementsByClassName 通过类名获取元素是 动态获取的
// 这里通过"red"获取到这个类名元素的伪数组
// 第一次点击这个类名被"blue"覆盖了,此时没有了"red"这个类名
// 而getElementsByClassName是通过"red"这个类名动态获取的,
// 现在没有"red"类名的元素,所以获取不到
// 这里的问题如何解决?
// 1. 使用 querySelectorAll
// 2. 使用 this 解决
var box = document.getElementsByClassName("red");
// 1.使用querySelectorAll
// var box = document.querySelectorAll(".red");
box[0].onclick = function () {
if (box[0].className == "red") {
box[0].className = "blue";
} else if (box[0].className == "blue") {
box[0].className = "green";
}
// 2.使用 this 解决
// if (this.className == "red") {
// this.className = "blue";
// } else if (this.className == "blue") {
// this.className = "green";
// }
}
Nodelist和HTMLCollection接口常用属性和方法
| NodeList.prototype.length | 返回NodeList实例包含的节点数量 |
|---|---|
| NodeList.prototype.forEach() | forEach方法遍历NodeList的所有成员 |
| HTMLCollection.prototype.length | 返回HTMLCollection实例包含的成员数量 |
小技巧：后期我们肯定会经常获取页面上面的元素，所以我们会把上面的querySelectorAll的方法封装起来
//你给我一个选择器，我返回一个选中的元素的集合给你
function $(selector){
return document.querySelectorAll(selector);
}
jQuery选择器的本质就是这一个东西
DOM属性操作
| 方法 | 作用 | |
|---|---|---|
| 标签名.属性名 | 获取或设置标签自己所具备的内置属性 | |
| getAttribute() | 获取任何方式定义的自定义属性(行内属性) | |
| setAttribute(属性',属性值) | 设置标签的自定义属性(行内属性) | |
| dataset['属性']或dataset.属性 | H5新增设置或获取自定义属性(行内属性)的方式,设置的属性最终会添加data-前缀 |
i9以下不支持 |
| dataset | 获取一个DOMStringMap对象,这个对象中放了当前元素所有data开头的自定义属性(行内属性) |
i9以下不支持 |
| removeAttribute() | 删除任何一个属性 | |
| hasAttribute() | 判断当前元素有没有这个属性 | 有就返回true没有就返回`false |
| attributes | 获取一个NamedNodeMap对象,这个对象中放了当前元素所有的自定义属性(行内属性) |
Element常用属性(dom对象属性)
文本和标签内容
| 属性 | 作用 | 说明 |
|---|---|---|
| innerText | 获取或设置当前元素的文本内容(不包含空白符),设置的文本内容会覆盖当前元素下的后代节点 | |
| innerHTML | 获取或设置当前元素的标签内容,设置的内容会覆盖当前元素下的后代节点 | |
| TextContent | 获取或设置当前元素下的所有文本内容(包括空白符),设置的文本内容会覆盖当前元素下的后代节点,可以获取隐藏的节点 |
标签,class,属性
| 属性 | 作用 | 说明 |
|---|---|---|
| tagName | 返回当前元素的标签名（全大写） | |
| className | 获取或设置当前元素的class名称 | 使用的是字符串的方式去操作,比如添加class用+ |
| attributes | 获取一个NamedNodeMap对象,这个对象中放了当前元素所有的属性 |
innerText 和 textContent 的区别
1.textContent会把空白符也获取到
2.innerText获取不到隐藏标签的内容,textContent可以获取隐藏标签内容(visibility: hidden)
3.textContent可以获取到display:none;的内容(style和script标签中的内容),innerText不可以
innerText没有兼容性问题,textContentIE9 以下不支持
textContent兼容性处理
// 形参
// node 代表传入的DOM元素
// content 代表要设置的内容
// 如果两个参数都传代表要设置内容
// 如果只传第一个参数代表要获取内容
function getOrSetContent (node, content) {
if (node && content) { // 设置内容
console.log(node.textContent);
if (node.textContent) {
node.textContent = content;
} else {
node.innerText = content;
}
} else { // 获取内容
// 兼容处理
if (node.textContent) { // 如果获取到值,证明是高版本浏览器,就返回
return node.textContent;
} else { // 获取不到,证明是IE低版本浏览器,使用没有兼容问题的innerText
return node.innerText;
}
}
}
获取第一个子元素兼容性封装
// 目标: 获取第一个子元素(兼容处理)
function getFirstElement(node) {
if (node.firstElementChild) { // 证明是高版本浏览器
return node.firstElementChild;
} else { // 证明是IE低版本浏览器
var result = node.firstChild;
while (result && result.nodeType != 1) {
result = result.nextSibling;
}
return result;
}
}
Element.classlist属性
classlist返回或设置当前元素的class名称集合(DOMTokenList集合)
classlist下的方法:
| 方法 | 作用 | 说明 |
|---|---|---|
| add() | 添加一个class名 | |
| remove() | 移除一个class名 | |
| toggle() | 有这个class就删除,否则添加 | |
| contains() | 判断当前的class集合里面是否有这个class样式 | true代表存在，false代表不存在 |
特殊的标签生成的特殊属性
网页当中有一些特殊的标签会生成一些特殊的属性
| 属性 | 作用 |
|---|---|
| document.documentElement | html标签生成的对象 |
| document.title | 网页的标题title标签生成的对象 |
| document.body | 网页的body标签生成的对象 |
| document.links | 网页link标签所生成的对象的集合 |
特殊的单属性
以下几个属性比较特性，它特殊的地方在属性值上面,返回的值要么是true,要么是false,如果是true则代属性成立，如果是false则代表属性不成立
| 属性 | 描述 |
|---|---|
| readonly | 表单是否只读 |
| disabled | 表单是否禁用 |
| selected | 下拉列表选项是否被选中 |
| checked | 单/多选框是否选中 |
| loop | 音视频是否循环播放 |
| autoplay | 音视频是否自动播放 |
| muted | 音视频是否禁音 |
<input type="checkbox" id="ck1">
<input type="text" readonly value="123123" id="userName">
<script>
ck1.checkecd=true; //设置为选中状态
userName.readonly=false; //将readonly只读设置为false
</script>
节点
DOM树所有包含的东西都可以称作节点,DOM树当中有12种节点,我们需要关注的节点有4中,其中最关注的是元素节点。
| 节点 | nodeType | nodeName | nodeValue |
|---|---|---|---|
| 元素节点 | 1 | 元素名大写 | null |
| 文本节点 | 3 | #text | 文本内容 |
| 属性节点 | 2 | 属性名 | 属性值 |
| 注释节点 | 8 | #comment | 注释内容 |
<div id="box">
<p id="p1" aa="bb">文本</p> //元素节点
一段文本 //文本节点
<!-- 一段注释 --> //注释节点
</div>
方法
| 方法 | 作用 | |
|---|---|---|
| document.write() | 不常用 | |
| document.createElement() | 根据标签创建一个元素节点 | |
| insertBefore(新节点,参照节点) | 在参照节点前插入新节点 | 注意:参照节点是当前节点的子节点 |
replaceChild(新节点, 被替换节点) |
把被替换节点替换成新节点 |
注意:被替换节点是当前节点的子节点 |
| append() | 追加小括号中的内容 可以传多个参数,都是去追加,参数形式不定,不解析标签 |
|
| appendChild() | 向当前元素追加一个子节点 | |
| remove() | 删除当前节点（里面的子节点也会随当前节点一同删除） | |
| removeChild() | 删除指定的子节点 | |
| cloneNode(true/false) | 克隆一个相同的节点 | 默认为false,如果给true,则代表要将该元素下的子元素一同拷贝注意： cloneNode()方法无论参数是不是true，拷贝出来的都是深拷贝 |
属性
| 属性 | 作用 | 说明 |
|---|---|---|
| children | 获取当前元素下面的子元素节点 | 高级浏览器：元素 低版本浏览器：元素，注释 |
| childNodes | 返回当前元素的子节点信息 | 高级浏览器：元素，文本（文本，空格，换行），注释 低版本浏览器：元素，文本（不包括空格和换行），注释 |
| parentElement | 获取当前元素的父元素节点 | |
| parentNode | 获取当前元素的父节点 | 在获取根部document节点是，parentElement找的是元素，因此报错null,而parentNode获取的是节点，返回的是#document |
| firstChild | 获取第一个子节点 | |
| firstElementChild | 获取当前元素下面的第一个子元素节点 | 相当于children[0] IE9以下不支持 |
| lastChild | 获取最后一个子节点 | |
| lastElementChild | 获取当前元素下面的最后一个子元素 | IE9以下不支持 |
| nextSibling | 获取当前元素的下一个兄弟节点 | |
| nextElementSibling | 获取当前元素的下一个兄弟元素节点 | IE9以下不支持 |
| previousSibling | 获取当前元素的上一个兄弟节点 | |
| previousElementSibling | 获取当前元素的上一个兄弟元素节点 | IE9以下不支持 |
| nodeType | 返回当前元素的节点信息 | |
| nodeName | 返回节点的名称(大写) | |
| nodeValue | 返回节点值 |
常见dom事件
MDN文档
https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model
鼠标事件
| 属性 | 描述 | DOM |
|---|---|---|
| onclick | 当用户点击某个对象时调用的事件句柄。 | 2 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 | 2 |
| onmousemove | 鼠标被移动。 | 2 |
| onmouseenter | 当鼠标指针移动到元素上时触发。不支持冒泡(子元素的mouseenter事件不会冒泡到这个元素上) | 2 |
| onmouseleave | 当鼠标指针移出元素时触发不支持冒泡(子元素的mouseleave事件不会冒泡到这个元素上) | 2 |
| onmouseover | 鼠标移到某元素之上。 | 2 |
| onmouseout | 鼠标从某元素移开。 | 2 |
| oncontextmenu | 在用户点击鼠标右键时触发 | |
| onmousedown | 鼠标按下触发。 | 2 |
| onmouseup | 鼠标松开触发。 | 2 |
两对移入移出事件的区别
onmouseenter onmouseleave
如果是一个父子元素模型，对父元素添加移入和移出，当鼠标移入父元素里面的子元素的时候， 事件并没有移出然后再移入。也就是说事件元素没有切换；
onmouseover onmouseout
如果是一个父子元素模型，对父元素添加移入和移出，当鼠标移入父元素里面的子元素的时候，事件会移出然后再移入。也就是说事件元素会有切换；事件委派的时候，必须使用这一对
滚轮事件
| 属性 | 描述 | DOM |
|---|---|---|
| onmousewheel | 滚轮滚动时触发 | |
| DOMMouseScroll | 火狐用的滚轮事件,只在addEventListener里有效 | |
| onscroll | 当页面被滚动条时触发 | |
| onwheel | 当页面被滚轮滚动时触发 |
键盘事件
| 属性 | 描述 | DOM |
|---|---|---|
| onkeydown | 某个键盘按键被按下。(不识别大小写) | 2 |
| onkeypress | 某个键盘按键被按下并松开。(只有a-z、A-Z、0-9、回车、空格和字符按键可以触发这个事件) | 2 |
| onkeyup | 某个键盘按键被松开。 | 2 |
表单事件
| 属性 | 描述 | DOM |
|---|---|---|
| onblur | 元素失去焦点时触发 | 2 |
| onchange | 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) |
2 |
| onfocus | 元素获取焦点时触发 | 2 |
| onfocusin | 元素即将获取焦点时触发 | 2 |
| onfocusout | 元素即将失去焦点时触发 | 2 |
| oninput | 元素获取用户输入时触发 | 3 |
| onreset | 表单重置时触发 | 2 |
| onsearch | 用户向搜索域输入文本时触发 ( <input="search">) |
|
| onselect | 用户选取文本时触发 ( <input> 和 <textarea>) |
2 |
| onsubmit | 表单提交时触发 | 2 |
动画事件
| 事件 | 描述 | DOM |
|---|---|---|
| onanimationend | 该事件在 CSS 动画结束播放时触发 | |
| onanimationiteration | 该事件在 CSS 动画重复播放时触发 | |
| onanimationstart | 该事件在 CSS 动画开始播放时触发 |
兼容性写法:
onwebkitanimationend等
过渡事件
| 事件 | 描述 | DOM |
|---|---|---|
| ontransitionend | 该事件在 CSS 完成过渡后触发。 |
剪贴板事件
| 属性 | 描述 | DOM |
|---|---|---|
| oncopy | 该事件在用户拷贝元素内容时触发 | |
| oncut | 该事件在用户剪切元素内容时触发 | |
| onpaste | 该事件在用户粘贴元素内容时触发 |
拖动事件
| 事件 | 描述 | DOM |
|---|---|---|
| ondrag | 该事件在元素正在拖动时触发 | |
| ondragend | 该事件在用户完成元素的拖动时触发 | |
| ondragenter | 该事件在拖动的元素进入放置目标时触发 | |
| ondragleave | 该事件在拖动元素离开放置目标时触发 | |
| ondragover | 该事件在拖动元素在放置目标上时触发 | |
| ondragstart | 该事件在用户开始拖动元素时触发 | |
| ondrop | 该事件在拖动元素放置在目标区域时触发 |
排他思想操作修改文本内容
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
<p>内容4</p>
<script type="text/javascript">
var pNodes = document.querySelectorAll("p");
for (var i = 0; i < pNodes.length; i++) {
pNodes[i].onclick = function() {
for (var j = 0; j < pNodes.length; j++) {
pNodes[j].innerText = "哈哈"
}
this.innerText = "呵呵";
}
}
</script>
Style 对象属性
用来获取内嵌样式
"CSS" 列表示该属性是在哪一个 CSS 版本中定义的（CSS1、CSS2 或 CSS3）。
animation
| 属性 | 描述 | CSS |
|---|---|---|
| animation | 是下面除了 animationPlayState 属性之外的其他属性的速记属性。 | 3 |
| animationDelay | 设置或返回动画何时开始。 | 3 |
| animationDirection | 设置或返回是否循环交替反向播放动画。 | 3 |
| animationDuration | 设置或返回动画完成需花费的秒数或毫秒数。 | 3 |
| animationFillMode | 设置或返回当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 | 3 |
| animationIterationCount | 设置或返回动画的播放次数。 | 3 |
| animationName | 设置或返回关键帧 @keyframes 动画的名称。 | 3 |
| animationTimingFunction | 设置或返回动画的速度曲线。 | 3 |
| animationPlayState | 设置或返回动画是运行的还是暂停的。 | 3 |
transform
| 属性 | 描述 | CSS |
|---|---|---|
| transform | 向元素应用 2D 或 3D 转换。 | 3 |
| transformOrigin | 设置或返回被转换元素的位置。 | 3 |
| transformStyle | 设置或返回被嵌套的元素如何呈现在 3D 空间中。 | 3 |
transiton
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 一个用于设置或返回四个过渡属性的速记属性。 | 3 |
| transitionProperty | 应用过渡效果的 CSS 属性的名称。 | 3 |
| transitionDuration | 设置或返回完成过渡效果需要花费的时间（以秒或毫秒计）。 | 3 |
| transitionTimingFunction | 设置或返回过渡效果的速度曲线。 | 3 |
| transitionDelay | 设置或返回过渡效果何时开始。 | 3 |
background
| 属性 | 描述 | CSS |
|---|---|---|
| background | 设置或返回在一个声明中的所有背景属性。 | 1 |
| backgroundAttachment | 设置或返回背景图像是否固定或随页面滚动。 | 1 |
| backgroundColor | 设置或返回元素的背景色。 | 1 |
| backgroundImage | 设置或返回元素的背景图像。 | 1 |
| backgroundPosition | 设置或返回的背景图像的起始位置。 | 1 |
| backgroundRepeat | 设置或返回如何重复背景图像。 | 1 |
| backgroundClip | 设置或返回背景的绘制区域。 | 3 |
| backgroundOrigin | 设置或返回背景图像的定位区域。 | 3 |
| backgroundSize | 设置或返回背景图像的大小。 | 3 |
| backfaceVisibility | 设置或返回当一个元素背对屏幕时是否可见。 | 3 |
border
| 属性 | 描述 | CSS |
|---|---|---|
| border | 设置或返回在一个声明中的 borderWidth、borderStyle 和 borderColor。 | 1 |
| borderBottom | 设置或返回在一个声明中的所有 borderBottom* 属性。 | 1 |
| borderCollapse | 设置或返回表格的边框是否被折叠为一个单一的边框。 | 2 |
| borderColor | 设置或返回元素边框的颜色（最多可以有四个值）。 | 1 |
| borderImage | 一个用于设置或返回所有的 borderImage* 属性的速记属性。 | 3 |
| borderImageOutset | 设置或返回边框图像区域超出边界框的量。 | 3 |
| borderImageRepeat | 设置或返回图像边框是重复拼接图块还是延伸图块。 | 3 |
| borderImageSlice | 设置或返回图像边框的向内偏移。 | 3 |
| borderImageSource | 设置或返回要作为边框使用的图像。 | 3 |
| borderImageWidth | 设置或返回图像边框的宽度。 | 3 |
| borderRadius | 一个用于设置或返回四个 borderRadius 属性的速记属性。 | 3 |
| borderStyle | 设置或返回元素边框的样式（最多可以有四个值）。 | 1 |
| borderWidth | 设置或返回元素边框的宽度（最多可以有四个值）。 | 1 |
flex
| 属性 | 描述 | CSS |
|---|---|---|
| flex | 相对于同一容器其他灵活的项目，设置或返回项目的长度。 | 3 |
| flexDirection | 设置或返回灵活项目的方向。 | 3 |
| flexWrap | 设置或返回灵活项目是否拆行或拆列。 | 3 |
| flexFlow | 是 flexDirection 和 flexWrap 属性的速记属性。 | 3 |
| alignItems | 设置或返回灵活容器内的各项的对齐方式。 | 3 |
| alignContent | 设置或返回当灵活容器内的各项没有占用所有可用的空间时各项之间的对齐方式（水平）。 | 3 |
| order | 设置或返回一个灵活的项目相对于同一容器内其他灵活项目的顺序。 | 3 |
| alignSelf | 设置或返回灵活容器内被选中项目的对齐方式。 | 3 |
| flexGrow | 设置或返回项目将相对于同一容器内其他灵活的项目进行扩展的量。 | 3 |
| flexBasis | 设置或灵活项目的初始长度。 | 3 |
| flexShrink | 设置或返回项目将相对于同一容器内其他灵活的项目进行收缩的量。 | 3 |
list
| 属性 | 描述 | CSS |
|---|---|---|
| listStyle | 设置或返回一个声明中的 listStyleImage、listStylePosition 和 listStyleType。 | 1 |
| listStyleImage | 设置或返回作为列表项标记的图像。 | 1 |
| listStylePosition | 设置或返回列表项标记的位置。 | 1 |
| listStyleType | 设置或返回列表项标记的类型。 | 1 |
column
| 属性 | 描述 | CSS |
|---|---|---|
| columns | 一个用于设置或返回 columnWidth 和 columnCount 的速记属性。 | 3 |
| columnCount | 设置或返回元素应该被划分的列数。 | 3 |
| columnFill | 设置或返回如何填充列。 | 3 |
| columnGap | 设置或返回列之间的间隔。 | 3 |
| columnRule | 一个用于设置或返回所有的 columnRule* 属性的速记属性。 | 3 |
| columnRuleColor | 设置或返回列之间的颜色规则。 | 3 |
| columnRuleStyle | 设置或返回列之间的样式规则。 | 3 |
| columnRuleWidth | 设置或返回列之间的宽度规则。 | 3 |
| columnSpan | 设置或返回一个元素应横跨多少列。 | 3 |
| columnWidth | 设置或返回列的宽度。 | 3 |
| counterIncrement | 增加一个或多个计数器。 | 2 |
| counterReset | 创建或重置一个或多个计数器。 | 2 |
文本和字体
| 属性 | 描述 | CSS |
|---|---|---|
| textAlign | 设置或返回文本的水平对齐方式。 | 1 |
| textDecoration | 设置或返回文本的修饰。 | 1 |
| textDecorationColor | 设置或返回文本修饰的颜色。 | 3 |
| textDecorationLine | 设置或返回文本修饰要使用的线条类型。 | 3 |
| textDecorationStyle | 设置或返回文本修饰中的线条样式。 | 3 |
| textIndent | 设置或返回文本第一行的缩进。 | 1 |
| textJustify | 设置或返回当 text-align 属性设置为 "justify" 时，要使用的对齐方法。 | 3 |
| textAlignLast | 设置或返回当 text-align 属性设置为 "justify" 时，如何对齐一个强制换行符前的最后一行。 | 3 |
| textOverflow | 设置或返回当文本溢出包含它的元素，应该发生什么。 | 3 |
| textShadow | 设置或返回文本的阴影效果。 | 3 |
| textTransform | 设置或返回文本的大小写。 | 1 |
| font | 设置或返回一个声明中的 fontStyle、fontVariant、fontWeight、fontSize、lineHeight 和 fontFamily。 | 1 |
| fontFamily | 设置或返回文本的字体。 | 1 |
| fontSize | 设置或返回文本的字体尺寸。 | 1 |
| fontStyle | 设置或返回字体样式是否是 normal（正常的）、italic（斜体）或 oblique（倾斜的）。 | 1 |
| fontVariant | 设置或返回是否以小型大写字母显示字体。 | 1 |
| fontWeight | 设置或返回字体的粗细。 | 1 |
| verticalAlign | 设置或返回元素中内容的垂直对齐方式。 | 1 |
| whiteSpace | 设置或返回如何处理文本中的制表符、换行符和空格符。 | 1 |
| wordSpacing | 设置或返回文本中单词之间的空间。 | 1 |
| wordWrap | 允许长单词或 URL 地址换行到下一行。 | 3 |
| wordBreak | 设置或返回非 CJK 语言的换行规则。 | 3 |
| justifyContent | 设置或返回当灵活容器内的各项没有占用所有可用的空间时各项之间的对齐方式（垂直）。 | 3 |
| letterSpacing | 设置或返回文本中字符之间的空间。 | 1 |
| direction | 设置或返回文本的方向。 | 2 |
| lineHeight | 设置或返回在文本中行之间的距离。 | 1 |
其他
| 属性 | 描述 | CSS |
|---|---|---|
| perspective | 设置或返回 3D 元素被查看的视角。 | 3 |
| perspectiveOrigin | 设置或返回 3D 元素的底部位置。 | 3 |
| width | 设置或返回元素的宽度。 | 1 |
| height | 设置或返回元素的高度。 | 1 |
| visibility | 设置或返回元素是否应该是可见的。 | |
| zIndex | 设置或返回定位元素的堆叠顺序。 | 2 |
| resize | 设置或返回是否可由用户调整元素的尺寸大小。 | 3 |
| cssFloat | 设置或返回元素的浮动方向。 | 1 |
| content | 与 :before 和 :after 伪元素一起使用，来插入生成的内容。 | 2 |
| color | 设置或返回文本的颜色。 | 1 |
| cursor | 设置或返回鼠标指针显示的光标类型。 | 2 |
| display | 设置或返回元素的显示类型。 | 1 |
| filter | 设置或返回图片滤镜(可视效果，如：高斯模糊与饱和度) | 3 |
| tableLayout | 设置或返回表格单元格、行、列的布局方式。 | 2 |
| tabSize | 设置或返回制表符（tab）字符的长度。 | 3 |
| captionSide | 设置或返回表格标题的位置。 | 2 |
| emptyCells | 设置或返回是否显示表格中的空单元格的边框和背景。 | 2 |
| boxDecorationBreak | 设置或返回分页处元素的背景和边框行为，或者换行处内联元素的背景和边框行为。 | 3 |
| boxShadow | 设置或返回元素的下拉阴影。 | 3 |
| boxSizing | 允许您以特定的方式定义匹配某个区域的特定元素。 | 3 |
| clear | 设置或返回元素相对浮动对象的位置。 | 1 |
| margin | 设置或返回元素的外边距（最多可以有四个值）。 | 1 |
| padding | 设置或返回元素的内边距（最多可以有四个值）。 | 1 |
| maxHeight | 设置或返回元素的最大高度。 | 2 |
| maxWidth | 设置或返回元素的最大宽度。 | 2 |
| minHeight | 设置或返回元素的最小高度。 | 2 |
| minWidth | 设置或返回元素的最小宽度。 | 2 |
| opacity | 设置或返回元素的不透明度。 | 3 |
| outline | 设置或返回在一个声明中的所有 outline 属性。 | 2 |
| outlineColor | 设置或返回一个元素周围的轮廓颜色。 | 2 |
| outlineOffset | 对轮廓进行偏移，并在边框边缘进行绘制。 | 3 |
| outlineStyle | 设置或返回一个元素周围的轮廓样式。 | 2 |
| outlineWidth | 设置或返回一个元素周围的轮廓宽度。 | 2 |
| overflow | 设置或返回如何处理呈现在元素框外面的内容。 | 2 |
| overflowX | 规定如果内容溢出元素的内容区域，是否对内容的左/右边缘进行裁剪。 | 3 |
| overflowY | 规定如果内容溢出元素的内容区域，是否对内容的上/下边缘进行裁剪。 | 3 |
没见过
| 属性 | 描述 | CSS |
|---|---|---|
| orphans | 设置或返回当元素内有分页时，必须在页面底部预留的最小行数。 | 2 |
| unicodeBidi | 设置或返回文本是否被重写，以便在同一文档中支持多种语言。 | 2 |
| widows | 设置或返回一个元素必须在页面顶部的可见行的最小数量。 | 2 |
| quotes | 设置或返回嵌入引用的引号类型。 | 2 |
| fontSizeAdjust | 当使用备用字体时，确保文本的可读性。 | 3 |
| fontStretch | 从字体库中选择一种正常的、浓缩的或扩大的字体。 | 3 |
| hangingPunctuation | 规定一个标点符号是否可以放置在线框外。 | 3 |
| hyphens | 设置如何拆分单词来提高段落布局。 | 3 |
| imageOrientation | 规定一个用户代理应用到图像上的顺时针方向的旋转。 | 3 |
| icon | 向作者提供为一个带有等价于图标的元素定义样式的功能。 | 3 |
| navIndex | 设置或返回元素的显示顺序。 | 3 |
| navUp | 设置或返回当使用向上箭头导航键时要导航到哪里。 | 3 |
| navDown | 设置或返回当使用向下箭头导航键时要导航到哪里。 | 3 |
| navLeft | 设置或返回当使用向左箭头导航键时要导航到哪里。 | 3 |
| navRight | 设置或返回当使用向右箭头导航键时要导航到哪里。 | 3 |
| pageBreakAfter | 设置或返回元素后的分页行为。 | 2 |
| pageBreakBefore | 设置或返回元素前的分页行为。 | 2 |
| pageBreakInside | 设置或返回元素内的分页行为。 | 2 |
获取css样式
| 方法 | 描述 | 返回值 |
|---|---|---|
| getComputedStyle(元素节点) | 获取当前元素节点所有最终使⽤的CSS属性值。 | 返回的是⼀个CSS样式对象([object CSSStyleDeclaration] |
| 元素节点.currentStyle | ie获取非内嵌样式的方式 | |
| 元素节点.style | 获取设置内嵌样式 |
事件绑定和解绑
网址:
https://www.w3cschool.cn/javascript_guide/javascript_guide-p9ug269r.html
什么是事件?
事件是一种异步编程的实现方式，本质上是程序各个组成部分之间的通信。具有如下特征:
- 事件三要素
- 事件源 （承受事件的对象）
- 事件类型(如onclick)
- 事件处理回调函数
- 事件处理三大步
- 获取事件源DOM对象
- 添加对应事件监听
- 书写处理回调
- 事件写好之后可以重复触发执行
事件处理函数的参数
事件处理函数的参数在没有事件触发时,与普通函数没有区别
在事件触发时,第一个参数是触发的事件对象(会覆盖传的第一个实参),鼠标事件对象是(PointerEvent),键盘事件对象是(KeyboardEvent)
DOM 0 1 2 3
dom0 和 dom2 有自己独立的事件绑定和解绑方式
dom0 事件所有的浏览器都是通用的
dom2 事件高级浏览器和低级浏览器用的方法不同
dom1 和 dom3 没有事件绑定方式
什么是事件绑定和解绑?
事件绑定就是我们说的事件监听
事件解绑就是我们说的移除事件监听
冒泡与捕获
冒泡指事件从内到外触发
捕获指事件从外到内触发
监听函数分类
常见的监听函数有两种
- on-事件(DOM0事件绑定)
- addEventListener(DOM2事件绑定)
通过on设置的监听函数只在冒泡阶段触发
通过addEventListener设置的监听函数看三个参数的值确定在冒泡还是捕获阶段触发
事件绑定和解绑方法
注意，removeEventListener方法移除的监听函数，必须与对应的addEventListener方法的参数完全一致，而且必须在同一个元素节点，否则无效。
| 方法 | |
|---|---|
| 元素.on事件类型=事件处理函数 | DOM0绑定事件方式 |
| 元素.on事件类型=null | DOM0解绑事件方式 |
| 元素.addEventListener('事件类型',事件处理回调函数,Boolean) | DOM2绑定事件方式 默认为 false（监听函数只在冒泡阶段被触发）true为（监听函数只在捕获阶段被触发） |
| 元素.removeEventListener('事件类型',事件处理回调函数,Boolean) | DOM2解绑事件方式,参数必须与addEventListener绑定的事件相同 |
| 元素.attachEvent("on事件类型", 事件处理回调函数) | DOM2绑定事件方式,低版本IE浏览器使用 |
| 元素.detachEvent("on事件类型", 事件处理回调函数) | DOM2解绑事件方式,低版本IE浏览器使用 |
绑定事件的简单封装
//封装简单的事件绑定函数
//this代表调用封装函数的DOM对象,type代表事件类型,fn代表事件处理回调函数
Object.prototype.addEvents=function (type,fn){
//判断是不是少参数
if(arguments.length<2){
//判断少了哪个参数(只要不乱写,事件类型一定是字符串类型)
typeof type=='string'?console.error('小伙子,你的事件处理回调函数没输入'):console.error('小伙子,你的事件类型没输入')
//判断是不是高版本浏览器
}else if(this.addEventListener){
this.addEventListener(type,fn);
//如果不是高版本浏览器执行以下代码
}else{
this.attachEvent(`on${type}`,fn);
}
}
解绑事件的基础封装
//封装简单的事件解绑函数
//this代表调用封装函数的DOM对象,type代表事件类型,fn代表事件处理回调函数
Object.prototype.removeEvents=function (type,fn){
//判断是不是少参数
if(arguments.length<2){
//判断少了哪个参数(只要不乱写,事件类型一定是字符串类型)
typeof type=='string'?console.error('小伙子,你的事件处理回调函数没输入'):console.error('小伙子,你的事件类型没输入')
//判断是不是高版本浏览器
}else if(this.removeEventListener){
this.removeEventListener(type,fn);
//如果不是高版本浏览器执行以下代码
}else{
this.detachEvent(`on${type}`,fn);
}
}
事件流
什么是事件流?
事件流描述的是从页面中接收事件的顺序。
早期的IE和Netscape(网景)提出了完全相反的事件流概念，IE事件流是事件冒泡，而Netscape的事件流就是事件捕获。由于IE低版本浏览器不支持事件捕获，所以很少使用事件捕获。后来ECMAScript在DOM2中对事件流进行了进一步规范。规定的事件流包括三个阶段。
事件流的三个阶段
当一个事件发生以后，它会在不同的DOM节点之间传播（propagation）。这种传播分成三个阶段：
- 第一阶段：从事件源(如果没有指定事件源则从window对象)传导到触发事件的目标节点，称为“捕获阶段”（capture phase）。
- 第二阶段：在触发事件的目标节点上触发事件，称为“目标阶段”（target phase）。
- 第三阶段：从触发事件的目标节点传导回事件源(如果没有指定事件源则从window对象)，称为“冒泡阶段”（bubbling phase）。
阻止事件冒泡
| 方法 | 介绍 |
|---|---|
| event.stopPropagation(); | 阻止事件传播(冒泡捕获都可以阻止) |
| event.cancelBubbles | 低版本ie使用,赋值为true代表阻止冒泡,赋值为false代表允许冒泡 |
| event.bubbles | 事件是否冒泡 |
简单的阻止事件冒泡封装
function stopBubble(e){
var e=e||Window.event;
if(e.cancelBubble){
e.cancelBubble
}else{
e.stopPropagation();
}
}
事件委派(代理)
| 属性 | 描述 | 返回值 | DOM |
|---|---|---|---|
| target | 事件最初发生的节点 | 返回触发事件的那个节点 |
2 |
| srcElement | IE6—IE8的事件节点写法 |
由于事件会在冒泡阶段从事件触发的节点向上传播到父/祖先节点，因此可以把事件处理函数定义在父/祖先节点上，由父/祖先节点的事件处理函数统一处理多个子/后代元素的事件。这种方法叫做事件的代理（delegation）。
var ul = document.querySelector('ul');
ul.addEventListener('click', function(event) {
if (event.target.tagName.toLowerCase() === 'li') {
// some code
}
});
浙公网安备 33010602011771号