【原创】js原生dom接口

文档对象模型 (DOM) 

将 web 页面与到脚本或编程语言连接起来。通常是指  JavaScript，但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点(node)，每个节点都包含着对象(objects)。DOM的方法(methods)让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。

继承关系

EventTarget——Node——Element——HTMLElement

window对象

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Window

screen
screenX/screenY
scrollX/scrollY

innerWidth/innerHeight
outerWidth/outerHeight

//方法
getComputedStyle(element, [pseudoElt])

getSelection()//光标选中的内容
moveTo()
moveBy()
resizeTo()
resizeBy()
scrollTo()
scrollBy()
requestAnimationFrame()/cancelAnimationFrame()
print() //弹出窗口，打印当前文档

 

Node对象

https://developer.mozilla.org/zh-CN/docs/Web/API/Node

各种类型的 DOM API 对象会从这个接口继承。

//主要属性：
childNodes
firstChild
lastChild
parentNode
nextSibling
previousSibling

nodeName
nodeTyle
textContent

//主要方法：
appendChild(node)
cloneNode(deep)//deep,是否深度克隆
insertBefore()//结合nextSibling可以实现insertAfter()相同的功能
removeChild(child)
replaceChild(newChild,oldChild)
contains(otherNode)
hasChildNodes()

 

Document对象

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Document 

继承自Node和EventTarget

//主要属性：
links
scripts
forms
images
head
body
children
contentType
URL
其他事件属性
...

defaultView//返回window对象

//主要方法:
createElement()
createTextNode()
createAttribute(name)

getElementById(id)
getElementsByName(name) //dom的name属性值
getElementsByTagName()
querySelector()
querySelectorAll()

write()
evaluate()//传入XPath表达式

 

Element对象

https://developer.mozilla.org/zh-CN/docs/Web/API/Element

Event是一个通用性非常强的基类，所有 Document 对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。一些接口继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。例如， HTMLElement 接口是所有 HTML 元素的基本接口，而 SVGElement 接口是所有 SVG 元素的基础。继承自Node

//主要属性方法：
tagName
className
id
name
innerHTML
outerHTML
attributes
children
firstElementChild
lastElementChild

scrollWidth/scrollHeight
scrollLeft/scrollTop
clientWidth/clientHeight

closet()//最近的祖先元素

getAttribute()
getAttributeNames()
setAttribute()
toggleAtrribute()
hasAttribute(attrname)

scrollTo()
scrollBy()

 

HTMLElement对象

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement

HTMLElement 接口表示所有的 HTML 元素。一些HTML元素直接实现了HTMLElement接口，其它的间接实现HTMLElement接口；继承自Element，Node

//主要属性：
innerText //没有outerText
offsetWidth/offsetHeight
offsetLeft/offsetTop//只读，当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界/上边界 偏移的像素值。
offsetParent
style
title
//无新的方法

Element.style 样式对象

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference （所有css属性）

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/style

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference （css属性在js中的写法列表）

//获取一个元素的所有样式：
var element = document.getElementById("myElement");
var out = "";
var elementStyle = element.style;
var computedStyle = window.getComputedStyle(element, null);

for (prop in elementStyle) {
  if (elementStyle.hasOwnProperty(prop)) {
    out += "  " + prop + " = '" + elementStyle[prop] + "' > '" + computedStyle[prop] + "'\n";
  }
}
console.log(out)

event 事件

参考：

https://developer.mozilla.org/zh-CN/docs/Web/API/Event

https://developer.mozilla.org/zh-CN/docs/Web/Events

//主要属性：
bubbles //bool,只读，是否可以冒泡
cancelBubble //可读写,设置是否继续冒泡
defaultPrevented//只读
target //事件触发的元素
currentTarget//总是指向事件绑定的元素，将相同的事件处理程序附加到多个元素时

//主要方法：
preventDefault()//阻止默认事件的侦听器
stopPropagation()//阻止捕获和冒泡阶段中当前事件的进一步传播

 

location

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Location

// Create anchor element and use href property for the purpose of this example
// A more correct alternative is to browse to the URL and use document.location or window.location
var url = document.createElement('a');
url.href = 'https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container';
console.log(url.href);      // https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container
console.log(url.protocol);  // https:
console.log(url.host);      // developer.mozilla.org
console.log(url.hostname);  // developer.mozilla.org
console.log(url.port);      // (blank - https assumes port 443)
console.log(url.pathname);  // /en-US/search
console.log(url.search);    // ?q=URL
console.log(url.hash);      // #search-results-close-container
console.log(url.origin);    // https://developer.mozilla.org

history

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/History

back()
forward()
go()
pushState()
replaceState()