一、前言

网页->浏览器加载、解析->DOM文档对象
那网页中的节点对象都有哪些，及有哪些属性方法，以及是从哪里继承过来的呢？
节点有：
元素节点　　Node.ELEMENT_NODE(1)
属性节点　　Node.ATTRIBUTE_NODE(2)
文本节点　　Node.TEXT_NODE(3)
CDATA节点 Node.CDATA_SECTION_NODE(4)
实体引用名称节点　　 Node.ENTRY_REFERENCE_NODE(5)
实体名称节点　　Node.ENTITY_NODE(6)
处理指令节点　　Node.PROCESSING_INSTRUCTION_NODE(7)
注释节点　 Node.COMMENT_NODE(8)
文档节点　 Node.DOCUMENT_NODE(9)
文档类型节点　　Node.DOCUMENT_TYPE_NODE(10)
文档片段节点　　Node.DOCUMENT_FRAGMENT_NODE(11)
DTD声明节点 Node.NOTATION_NODE(12)

二、继承

节点有很多，我们从元素节点来分析

1.继承关系

元素节点对象.proto 说明：具体的HTML元素节点

->HTML某元素Element.prototype 继承于HTML某元素Element

->HTMLElement.prototype 继承于HTML元素

->Element.prototype 继承于元素

->Node.prototype 继承于节点

->EventTarget.prototype 继承于事件

->Object.prototype

2.说明

HTML某元素Element类：生成特定的元素节点，所以不同的元素节点有不同的属性
比如：
的继承：input节点对象.proto->HTMLInputElement.prototype
的继承：link节点对象.protp->HTMLLinkElement.prototype

节点对象的原型
//HTMLInputElement.prototype
["accept", "alt", "autocomplete", "autofocus", "defaultChecked", "checked", "dirName", "disabled",
"form", "files", "formAction", "formEnctype", "formMethod", "formNoValidate", "formTarget", 
"height", "indeterminate", "list", "max", "maxLength", "min", "minLength", "multiple", "name", 
"pattern", "placeholder", "readOnly", "required", "size", "src", "step", "type", "defaultValue",
"value", "valueAsDate", "valueAsNumber", "width", "willValidate", "validity", "validationMessage",
"labels", "selectionStart", "selectionEnd", "selectionDirection", "align", "useMap", "webkitdirectory", 
"incremental", "stepUp", "stepDown", "checkValidity", "reportValidity", "setCustomValidity", "select", 
"setRangeText", "setSelectionRange", "webkitEntries", "constructor"]

节点对象的原型
//HTMLLinkElement.prototype
["disabled", "href", "crossOrigin", "rel", "relList", "media", "hreflang", "type", "as",
"referrerPolicy", "sizes", "charset", "rev", "target", "sheet", "integrity", "import", "constructor"]

HTMLElement类：提供元素节点公有的属性方法事件，所以元素节点有公有的属性方法事件
HTMLElement节点因为是要渲染到页面上面去的，所以增加了渲染交互方面的属性方法事件

//HTMLElement.prototype
属性
["title", "lang", "translate", "dir", "dataset", "hidden", "tabIndex", "accessKey", "draggable", 
"autocapitalize", "contentEditable", "isContentEditable", "inputMode", "offsetParent", "offsetTop", 
"offsetLeft", "offsetWidth", "offsetHeight", "style", "innerText","outerText", "click","spellcheck", 

方法
"focus", "blur","hasFocus"

事件 
"onabort", "onblur", "oncancel", "oncanplay", "oncanplaythrough", "onchange", "onclick","onclose", 
"oncontextmenu", "oncuechange", "ondblclick", "ondrag", "ondragend", "ondragenter", "ondragleave", 
"ondragover", "ondragstart", "ondrop", "ondurationchange", "onemptied", "onended", "onerror", 
"onfocus", "oninput", "oninvalid", "onkeydown", "onkeypress", "onkeyup", "onload", "onloadeddata", 
"onloadedmetadata", "onloadstart", "onmousedown", "onmouseenter", "onmouseleave", 
"onmousemove", "onmouseout", "onmouseover", "onmouseup", "onmousewheel", 
"onpause", "onplay", "onplaying", "onprogress", "onratechange", "onreset", "onresize", "onscroll", 
"onseeked", "onseeking", "onselect", "onstalled", "onsubmit", "onsuspend", "ontimeupdate", 
"ontoggle", "onvolumechange", "onwaiting", "onwheel", "onauxclick", "ongotpointercapture", 
"onlostpointercapture", "onpointerdown", "onpointermove", "onpointerup", "onpointercancel", 
"onpointerover", "onpointerout", "onpointerenter", "onpointerleave", "nonce",, "constructor"]

知识补充：dataset属性的使用小程序就是使用dataset，来访问data-*
MDN:HTMLElement.dataset


1.通用方法：attributes或方法setAttribute/getAttribute
ele.getAttribute("data-x-y");
ele.setAttribute("data-x-y",'blue');

2.专门针对data-*的快捷属性入口:dataset
ele.dataset.xY=string;
string=ele.dataset.xY;

Element类：提供元素节点基本的属性方法事件
提供元素节点层级的属性方法事件

属性
["id", "className", "classList", "attributes"

元素节点信息
"tagName","innerHTML", "outerHTML", "scrollTop", "scrollLeft", "scrollWidth",
"scrollHeight", "clientTop", "clientLeft", "clientWidth", "clientHeight",

元素节点操作    //返回的是HTMLcollection对象 伪数组，内容为元素节点对象
"getElementsByTagName", "getElementsByTagNameNS", "getElementsByClassName", "querySelector", "querySelectorAll",

元素节点导航    //children返回的是HTMLcollection对象 伪数组，内容为元素节点对象
"previousElementSibling", "nextElementSibling", "children", "firstElementChild", "lastElementChild", >"childElementCount",

元素节点增删改查 
"before", "after", "replaceWith", "remove", "prepend", "append",

元素节点的属性节点操作 
"hasAttributes", "getAttributeNames", "getAttribute", "getAttributeNS", "setAttribute", "setAttributeNS", 
"removeAttribute", "removeAttributeNS", "hasAttribute", "hasAttributeNS", "toggleAttribute", 
"getAttributeNode", "getAttributeNodeNS", "setAttributeNode", "setAttributeNodeNS", "removeAttributeNode",

元素节点事件 
"onbeforecopy", "onbeforecut", "onbeforepaste", "oncopy", "oncut", "onpaste", "onsearch", "onselectstart",

元素节点其它 
"slot", "shadowRoot","animate", "computedStyleMap",   "scroll", "scrollTo", "scrollBy",  "constructor"]

知识补充：设置获取节点class的方法：【attributes、className、classList】

1.通用方法attributes或方法setAttribute/getAttribute
ele.attributes.class="class1 class2"
ele.setAttribute('class','class1 class2');
ele.getAttribute('class')

2.通过className:相当于setAttribute/getAttribute对class的快捷访问入口
ele.className="class1 class2"

3.classList专门处理class属性的方法 【方便  √】
ele.classList.add("class2");
ele.classList.remove("class2");

Node类：节点类，是所有节点的基类，包括元素节点
提供节点层级的属性方法

节点信息  
["nodeType", "nodeName", "nodeValue", "textContent"

节点导航    //childNodes返回的是NodeList对象 伪数组，内容为节点对象
"ownerDocument", "getRootNode","parentNode", "childNodes", 
"firstChild", "lastChild", "previousSibling", "nextSibling",  "hasChildNodes"

节点增删改查 
"insertBefore", "appendChild", "replaceChild", "removeChild"

节点其它操作 
"cloneNode", "isEqualNode", "isSameNode","contains",  "constructor"]

EventTarget事件类：所有节点都有事件，提供事件的操作
提供绑定事件、解除事件、分发事件的功能

["addEventListener", "removeEventListener", "dispatchEvent", "constructor"]

总结
html元素，继承了特定该元素类，html元素类，元素类，节点类，事件类
这5个类。具体解析html元素拥有的能力及继承关系

1.继承特定该元素类：拥有特有的属性方法事件

2. 继承html元素类：拥有渲染交互相关的属性方法事件

3.继承元素类：拥有元素节点的基本能力
基本属性：["id", "className", "classList", "attributes"
及元素节点的访问导航增删改查等操作

4.继承节点类：拥有节点的基本能力
标签属性:["nodeType", "nodeName", "nodeValue", "textContent"
及节点的访问导航增删改查等操作

5.继承事件：拥有事件能力

补充 html中三种集合(元素节点集合，属性节点集合，节点集合)

HTMLcollection类型：元素节点对象集合

HTMLcollection：元素数组对象  类数组                   
包括：getElementByXX()                                           动态
      querySelectorAll()                                         静态
      document.scripts/forms/images等集合                         动态
      element.children                                           动态

nodeList类型：节点对象集合

nodeList :节点数组对象  类数组 
包括：element.childNodes                                       动态

namedNodeMap类型：属性集合

无序！     类数组          动态
Element.attributes      
 Element.attributes   拥有元素对象的所有属性的引用
元素对象操作属性节点方法（回顾）
getAttributeNode(name)  //获取设置移除属性节点
setAttributeNode(属性节点对象)   
removeAttributeNode(name)

属性节点数组也有相关方法
attributes.item(index)    //另一种写法attributes[index]
attributes.length
attributes.getNamedItem(name)
attributes.setNamedItem(属性节点对象)
attributes.removeNamedItem(name)

3.融会贯通

css、html是文档的文档结构，但其实都会转化为JavaScript(DOM对象)
所以，js可以操作html及css
对比：小程序
小程序采用的自定义的xml。转化为WeiXin Script(DOM对象)，而js和wxs是隔离的
所以
小程序xml中不能直接执行js代码，但可以直接执行wxs代码；
js和xml通信其实就是js和wxs通信(js渲染到xml，或xml事件反应到js)，小程序有两个独立线程(逻辑层和渲染层)，并用Native来做中转。这就是小程序渲染或者事件延时较明显的原因

那为什么小程序需要两个线程？wxs存在的意义是什么？
因为： html文档结构，其实会转化为JavaScript(DOM对象)
为了打造xml，不得已打造精简版的js【wxs】，但又需要js的完整能力。所以开发了两个线程

wxs有什么用？
毕竟小程序xml是wxs对象。所以和页面交互是同步的，页面可以直接读取wxs中变量，wxs可以直接访问xml对象
但因为wxs和js通信是异步的，所以有意义的操作仅是对于页面的修改:
如过滤器、部分事件函数、动画、定时器
如：catch:tap="{{m1.chulihanshu}}"
小程序官方事件响应推荐用wxs入口

自定义元素标签

相关看好文章

javascript BOM方法

从继承角度解析html元素及知识关联

导航

一、前言

二、继承

1.继承关系

2.说明

3.融会贯通

你可能感兴趣的:(从继承角度解析html元素及知识关联)