[js]js原型链继承小结

js

DOM节点层次图

Dom并非一种编程语言，Dom只是提供了一系列的接口，利用Dom的这些接口可以很方便的读取，修改，删除Html和XML文件中的标签元素和文本内容．在这里我们侧重于讲解Dom对Html文件的操作．

那么Dom是如何读取和管理Html文件的呢？首先你必须要了解html的源码结构

div       > HTMLDivElement > HTMLElement > Element > Node > EventTarget
document -> HTMLDocument   > Document    >           Node > EventTarget

参考: DOM, DOCUMENT, BOM, WINDOW 有什么区别?

https://www.zhihu.com/question/33453164

document.title = 'how to make love';

document.body;
document.getElementById('xxx');

DOM 是为了操作文档出现的 API，document 是其的一个对象；

BOM 是为了操作浏览器出现的 API，window 是其的一个对象。

div       > HTMLDivElement > HTMLElement > Element > Node > EventTarget
document -> HTMLDocument   > Document    >           Node > EventTarget

参考: http://huang-jerryc.com/2016/06/28/JavaScript%E5%8E%9F%E5%9E%8B%E4%B8%AD%E7%9A%84%E5%93%B2%E5%AD%A6%E6%80%9D%E6%83%B3/



参考: 从原型链看DOM－－Node类型

http://www.cnblogs.com/venoral/p/5293575.html



参考:http://www.th7.cn/web/js/201609/188644.shtml



参考:http://www.cnblogs.com/mominger/p/3822775.html

dom操作

回顾dom

参考:

http://www.bijishequ.com/detail/413949?p=11-54-70

http://www.bijishequ.com/detail/421975?p=

这篇很经典

http://www.cnblogs.com/jscode/archive/2012/09/04/2670819.html

这篇图解还没怎么理解

http://developer.51cto.com/art/201009/228137_all.htm

div#div1
HTMLDivElement
HTMLElement
Element
Node
EventTarget
Object

div       > HTMLDivElement > HTMLElement > Element > Node > EventTarget
document -> HTMLDocument   > Document    >           Node > EventTarget
oDiv instanceof Node        //true
oDiv instanceof Element     //true
##################################
# 获取元素
##################################
document.
getElementById       得到类数组 获取选项/长度  遍历
getElementsByTagName
getElementsByName(button获取性别,先遍历checkbox,oSex[i].value)
getElementsByClassName

##################################
# 元素之间的关系
##################################
// 节点: 文字 标签 文字 注释都是节点  回车和空格算一个 text

//                    nodetype    nodename       nodevalue
// 元素节点: 标签        1           大写标签名    null
// 文本节点: text        3           #text        文档内容
// 注释节点:             8           #commnet     注释内容
// document              9           #document     null

console.log(oDiv.nodeType); //获取所有子节点的元素节点,判断nodetype
console.log(oDiv.nodeName);
console.log(oDiv.nodeValue);

console.log(oDiv.children);   //获取元素子节点
console.log(oDiv.parentNode);   //获取父亲节点
console.log(oDiv.previousElementSibling);//获取上一个哥哥节点
console.log(oDiv.nextSibling);           //获取下一个弟弟节点
console.log(oDiv.firstChild); //获取所有子节点中的第一个
console.log(oDiv.lastChild); //获取所有子节点中最后一个

##################################
# 增删改查元素
##################################
var layer = document.createElement("div");
layer.id = "div1";
layer.style.width = "300px";
layer.style.height = "200px";
layer.style.border = "5px solid red";

var btn = document.getElementById('btn');
btn.onclick = function () {
document.body.appendChild(layer);
};
layer.onclick = function () {
document.body.removeChild(layer);
};

oDiv.parentNode.removeChild(oDiv);
document.body.insertBefore(oP2, oP);
oDiv.parentNode.removeChild(oDiv);
var clop = oP.cloneNode();      //克隆当前
var clop2 = oP.cloneNode(true); //克隆子子孙孙

js操作的是行内样式.
oDiv.style.width //引用数据类型
oDiv.style.backgroundColor  //这种ok
var bgS = oDiv.style;                bgS.backgroundColor //这种ok
var bg = oDiv.style.backgroundColor; bg = "green" //这种不ok

constructor的事

默认类的prototype = constructor+proto

function Fn() {

};

console.log(Fn.prototype);

重新赋值后prototype = proto,没constructor了

function Fn() {

};
Fn.prototype= {
getX: function () {
}
};
console.log(Fn.prototype);

var f = new Fn();
console.log(f.__proto__);

原型链多级继承模拟

<script>
//    HTMLDivElement > HTMLElement > Element > Node > EventTarget > object
function myObject() {
};
myObject.prototype = {
hasOwnProperty: function () {
console.log("myObject");
}
};
function myEventTarget() {
};
myEventTarget.prototype = new myObject();
myEventTarget.prototype.sum = function () {
console.log('myEventTarget...')
};

var f = new myEventTarget;
console.dir(f);

</script>