JS学习之路系列总结五行阵（此文犹如武林之中的易筋经，是你驰骋IT界的武功心法，学会JS五大阵法就学会了JS，博主建议先学三才阵）

Posted 2020-10-10

五行阵法: 内容，属性，样式，节点，事件【【为了便于记忆，减少占用大脑内存，我命名为JS心法为：道阵法，两仪阵法，三才阵法，四象阵法，五行阵法，只需记住阵法的关键字，即可搜索大脑中相应的内容，学会JS五大阵法即可学会JS】

内容：

innerhtml【支持HTML标签】

innerText 【不支持HTML标签，索引会显示h1】

value 【设置和获取input中的内容】

length 【数组/字符串的长度】

属性：

getAttribute("attrName")

setAttribute("attrName","attrValue")

样式:

style【只能获取行间样式，设置样式】

function CSS(obj){

if(){

return obj.currentStyle["styleName"];【 //IE8以下】

}else{

return getComputedStyle(obj,null)["styleName"];

}

}

节点：

 

element.nodeName 【可以返回元素节点，文本节点等】
element.tagName 【只能返回元素节点，文本节点返回undefined】
element.nodeValue 【属性设置或者返回指定节点的文本内容】
element.textContent 【属性设置或者返回指定节点的文本内容】

element.nodeType

节点类型主要有三种:元素节点，属性节点，文本节点
节点类型 nodeName nodeType nodeValue
元素 元素名称 1 null
属性 属性名称 2 属性值
文本 #text 3 文本内容(不包含html标签)

 

<div>
<p>123</p>
<p>456</p>
</div>
<script>
var div=document.querySelector("div");
var p=document.querySelector("p");
alert(p.nextElementSibling.innerHTML);
alert(p.nextSibling.innerHTML);//返回undefined【<p>123</p><p>456</p>时返回<P>456</p>】
console.log(p.parentNode);
console.log(p.parentElement);
console.log(div.childNodes);//返回length=4+元素节点[两个p标签]+文本节点[此时一个空格为一个文本节点]【标准】
console.log(div.children); //返回length=2=元素节点[两个p标签]【推荐使用】【野孩子】
console.log(div.firstChild); //返回#text
console.log(div.firstElementChild); //返回<p>123</p>
console.log(div.childNodes[0].nodeType);//返回3[文本节点nodeType==3]
console.log(div.children[0].nodeType); //返回1[元素节点nodeType==1]

 

【为了兼容IE8，div.firstChild.innerHTML必须先放在前边】
alert(div.firstChild.innerHTML || div.firstElementChild.innerHTML )

【firstElementChild这个方法在现代浏览器中兼容，但是在IE678中却没有这个方法

经测试children方法在所有主流浏览器中都兼容，包括IE678，并且它也能实现firstElementChild的功能】

 

 

parentElement/children/firstElementChild/lastElementChild/nextElementSibling/previousElementSibling【推荐使用】【野孩子适应能力强】

【childNodes[偶数]firstChild/lastChild/nextSibling/previousSibling都是空格文本节点】【标准】【IE8+】

parentNode/childNodes/firstChild/lastChild【父子关系】nextSibling/previousSibling【兄弟关系】【为了便于记忆，简称父子兄弟】

事件：

鼠标事件

onmousedown事件和onmouseup事件构成了onclick事件

onclick 当用户单击鼠标左键时
ondblclick 当用户双击鼠标左键时
oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发
onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
onmouseenter 当鼠标指针移动到元素上时触发。
onmouseleave 当鼠标指针移出元素时触发
onmousemove 鼠标被移动。

 

mouseover与mouseenter
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
mouseout与mouseleave
不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

 

键盘事件
onkeydown 某个键盘按键被按下
onkeyup 某个键盘按键被松开
onkeypress 某个键盘按键按下并松开

onresize 事件会在窗口或框架被调整大小时发生。
onscroll 事件在元素滚动条在滚动时触发。
提示： 使用 CSS overflow 样式属性来创建元素的滚动条。

表单事件
onfocus 获取焦点时触发事件
onblur 失去焦点时触发事件
onfocusin 元素即将获取焦点时触发
onfocusout 元素即将失去焦点时触发
onchange 改变内容时触发( <input>, <keygen>, <select>, 和 <textarea>)
oninput 事件在用户输入时触发。
onreset 事件在表单被重置后触发。
onselect 事件会在文本框中的文本被选中时发生。
onsubmit 事件在表单提交时触发。 支持的 HTML 标签<form>, <keygen>

 

oncopy 事件在用户拷贝元素上的内容时触发。
oncut 事件在用户剪切元素的内容时触发。
onpaste 事件在用户向元素中粘贴文本时触发。

鼠标/键盘事件对象
属性
clientX 返回当事件被触发时，鼠标指针相对于浏览器页面的水平坐标。
clientY 返回当事件被触发时，鼠标指针相对于浏览器页面的垂直坐标。
screenX 返回当某个事件被触发时，鼠标指针的水平坐标。
screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。

ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。
altKey 返回当事件被触发时，"ALT" 是否被按下。
shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。
button 返回当事件被触发时，哪个鼠标按钮被点击。

Location 返回按键在设备上的位置
charCode 返回onkeypress事件触发键值的字母代码。
key 在按下按键时返回按键的标识符。
keyCode 返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。
which 返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。
metaKey 返回当事件被触发时，"meta" 键是否被按下。
relatedTarget 返回与事件的目标节点相关的节点。