dom认识

作者: solfKwolf | 来源:发表于2017-10-11 01:19 被阅读11次

什么是dom?

DOM（文本对象模型）是表示和操作HTML和XML文档内容的基础API。

文档DOM表示的数状图：

image.png

类似于家谱图，在之下的一个节点之上是父节点，在下一层的节点是子节点，在同一层为兄弟节点。在一个节点之下的所有层数的节点是其子代节点，一个节点的任何父节点、祖父节点和其上层的节点是祖先节点。
文档的每一个节点都表示一个Node对象。树形根节点为Document节点，它代表整个文档。代表HTML元素的节点是Element节点。代表文本的是Text节点，Document和Element，Text都为Element的子类。attribute(上图中打错。。)代表XML或HTML属性，几乎不使用？

如何选取文档对象？

用指定的id属性
用指定的name属性
用指定的标签属性
用指定的CSS类
匹配指定的CSS选择器

1.用指定的id属性
文档中id有唯一性：

var box = document.getElementById("box");

通过Id查找多个元素

 function getElements(){
                var elements = {};
                for(var i = 0;i < arguments.length;i++ ){
                    var id = arguments[i];
                    var elt = document.getElementById(id);
                    if(elt == null)
                        throw new Error("No element width id:"+ id);
                    elements[id] = elt;
                }
                return elements;
            }

//getElement("param",...)  参数为字符串

用指定的name属性

HTML的name属性为表单元素分配名字，适用于表单，表单元素，iframe,img

var dadiuobutton = document.getElementsByName("button1");

返回一个NodeList对象，类似于一个包含若干Element对象的只读数组。

用指定的标签属性

Document的getElementsByTageName()类似于上面的name获取方法，返回的也是NodeList对象。

获取文档所有span元素

var spanDoms  =  document.getElementsById("span");

获取文档的第一个span元素

var spanDom = document.getElementByIs("span")[0];

用指定的CSS类

var dom = document.getElementsByClassName("note");

匹配指定的CSS选择器

querySelectorAll(); //返回NodeList对象
querySelector(); //返回匹配的第一个对象

文档结构和遍历

parentNode 父节点，null没有父节点
childNode. 
firstChild,lastChild
nextSubling,previousSibling
该节点的兄弟节点的上一个或后一个。

节点属性：
通过对象·访问

节点类型	节点内容	节点内容
1	元素的名称	null
2	属性的名称	属性值
3	#text	文本内容

补充:9代表Document节点，8代表Comment节点，11代表DocumentFragment节点
children 所有子节点(包含元素节点)
childNodes 所有子节点(包含其他我们不想要的节点)

下面每行上方没有Element为Noded定义的属性

        parentNode          父节点(儿子找爸爸)
        parentElement       父节点

        firstChild          第一个子节点 (拿到其他的节点)
        firstElementChild   IE678没有    (只拿到元素节点)

        lastChild           最后一个节点
        lastElementChild    IE678没有

        nextSibling         下一个节点(找弟弟)
        nextElementSibling  IE678没有

        previousSibling     上一个节点(找哥哥)
        previousElementSibling IE678没有

        offsetLeft          元素到定位父级的left值
        offsetTop           元素到定位父级的top值
        offsetParent        定位父级

        offsetWidth         获取元素的宽高 widht+border+padding
        offsetHeight               
        clientWidth          width+padding
        clientHeight
        scrollWidth          width+padding+溢出长度
        scrollHeight

        可视区域
        window.innerWidth / innerHeight
        document.documentElement.clientWidth / clientHeight
        
        滚动
        document.body.scrolTop              谷歌有值 其它0
        document.documentElement.scrollTop  谷歌0    其它有值

        节点方法(w3c)
        元素对象.方法
        setAttribute()      设置标签属性
        getAttribute()      获取标签属性
        removeAttribute()   移除标签属性


        appendChild()       追加子节点
        removeChild()       删除节点(不能自己删自己,只能通过找到你父节点把自己干掉)
        insertBefore()      在已知节点的子节点中插入一个节点(前)
        createElement()     创建节点

        createTextNode()    创建文本节点
        父节点.replaceChild()      替换节点
        hasChildNodes()     判断有没有子节点(其他节点也会被判断)
        cloneNode()         克隆节点

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>children&&childNodes</title>
</head>
<body>
    <div id="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <script type="text/javascript">
        var boxDoms = document.getElementById("box");
        alert(boxDoms.getElementsByTagName("div").length);      //4
        alert(boxDoms.children.length);               //4
        alert(boxDoms.childNodes.length);         //9
    </script>
</body>
</html>

firstChild && firstElementChild

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>children&&childNodes</title>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <script type="text/javascript">
        var boxDoms = document.getElementById("box");
        boxDoms.firstElementChild.style.color = 'red';


    </script>
</body>
</html>

//等价于
<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>children&&childNodes</title>
</head>
<body>
    <div id="box"><div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <script type="text/javascript">
        var boxDoms = document.getElementById("box");
        // boxDoms.firstElementChild.style.color = 'red';

        boxDoms.firstChild.style.color = 'red';




    </script>
</body>
</html>

firstChild 会找到其他节点，firstElementChild只会找到元素节点，IE678没有！
如何兼容：

if(boxDom.firstElementChild){
    boxDom.firstElementChild.style.color = 'red';
}else{
    var elt = boxDom.firstChild; 
    while(elt){
        if( elt.nodeType == 1){
             elt.style.color = 'red'; 
              break;
    }
    elt = elt.nextSibling;
    
}
    }

类似的原理推及到其他的属性！

写一个获取nextSibling函数

 function nxtSibling(ele){
            if(ele.nextElementSibling){
                return ele.nextElementSibling;
            }else{
                var nxt = ele.nextSibling;
                while(nxt.nodeType != 1){
                    nxt = nxt.nextSibling;
                    break;
                };
                return nxt;
            };
        };

offsetLeft && offsetTop && offsetParent

还是看上面注释，获取父级的left和top值，和父级

获某个元素的位置

//ele获取元素节点
function offset(elt){
            var cLeft = 0,cTop = 0;
            while(elt){
                cLeft += elt.offsetLeft;
                cTop += elt.offsetTop;
                elt = elt.offsetParent;
            };
            return {left:cLeft,top:cTop};

        }

获取和设置非标准HTML属性

getAttribute() 和 setAttribute()
必须是HTML元素，css选择器不行。

元素内容html和纯文本元素内容

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>children&&childNodes</title>
    <style type="text/css">
        *{padding: 0;margin: 0 }
        
    </style>
</head>
<body>

        <p id="he">Hello world</p>


    <script type="text/javascript">
        var pDom = document.getElementById("he");
        pDom.textContent = "hehehehe"; //ie8及以下不支持
        pDom.innerText = "hehehehe"; // 除了Firefox都支持




    </script>
</body>
</html>

innerHTML和outerHTML和innerText的区别

image.png

DOM事件

2种事件模型：1.冒泡型事件和2.捕获事件

冒泡事件
事件按照从最特定的是将目标到最不特定的事件目标顺序触发

<body onclick="handleonclick">
    <div onclick="handleonclick">Click Me</div> 
</body>

捕获事件顺序：div、body、html、document、window。
捕获型事件：与冒泡事件相反的过程，从不精准到精准。
DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。

创建插入和删除节点

创建节点

var newnode = document.creatTextNode("text node content");

另一种方法，复制已存在的节点cloneNode()了解

插入节点
appendChild() 和 insertBefore()将他插入到文档中。

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>children和childNodes</title>
    <style type="text/css">


    </style>
</head>
<body>
    <script type="text/javascript">
        var divDom = document.createElement("div");
        var text = document.createTextNode("少了一个人");
        divDom.appendChild(text);
        document.body.appendChild(divDom);
    </script>
</body>
</html>

function insertAt(parent,child,n){
    if(n<0 || n>parent.childNodes.length) throw new Error("invalid index");
    else if(n == parent.childNodes.length) parent.appendChild(child);
    else parent.insetBefore(child,parent.childNodes[n]);
}

删除和替换节点
removeChild()方法，是在其父节点上调用的。


n.parentNode.removeChild(n);
//replaceChild()方法删除一个子节点并用一个新节点代替，
n.parentNode.replaceChild(document.creatTextNode("[REDACTED]"),n)

使用DocumentFragement

function reverse(){
    var f = document.Fragement();
    while(n.lastChild) f.appendChild(n.lastChild);

    n.appendChild(f);
}

事件监听

 一般事件:
onClick HTML: 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击
onDblClick HTML: 鼠标双击事件
onMouseDown HTML: 鼠标上的按钮被按下了
onMouseUp HTML: 鼠标按下后，松开时激发的事件
onMouseOver HTML: 当鼠标移动到某对象范围的上方时触发的事件
onMouseMove HTML: 鼠标移动时触发的事件
onMouseOut HTML: 当鼠标离开某对象范围时触发的事件
onKeyPress HTML: 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]
onKeyDown HTML: 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]
onKeyUp HTML: 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]

页面相关事件:
onAbort HTML: 图片在下载时被用户中断
onBeforeUnload HTML: 当前页面的内容将要被改变时触发的事件
onError HTML: 捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误
onLoad HTML: 页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成
onMove HTML: 浏览器的窗口被移动时触发的事件
onResize HTML: 当浏览器的窗口大小被改变时触发的事件
onScroll HTML: 浏览器的滚动条位置发生变化时触发的事件
onStop HTML: 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断
onUnload HTML: 当前页面将被改变时触发的事件

表单相关事件:
onBlur HTML: 当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]
onChange HTML: 当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]
onFocus HTML: 当某个元素获得焦点时触发的事件
onReset HTML: 当表单中RESET的属性被激发时触发的事件
onSubmit HTML: 一个表单被递交时触发的事件

滚动字幕事件:
onBounce HTML: 在Marquee内的内容移动至Marquee显示范围之外时触发的事件
onFinish HTML: 当Marquee元素完成需要显示的内容后触发的事件
onStart HTML: 当Marquee元素开始显示内容时触发的事件

编辑事件:
onBeforeCopy HTML:当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件
onBeforeCut HTML: 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件
onBeforeEditFocus HTML: 当前元素将要进入编辑状态
onBeforePaste HTML: 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件
onBeforeUpdate HTML: 当浏览者粘贴系统剪贴板中的内容时通知目标对象
onContextMenu HTML: 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的中加入onContentMenu="return false"就可禁止使用鼠标右键了]
onCopy HTML: 当页面当前的被选择内容被复制后触发的事件
onCut HTML: 当页面当前的被选择内容被剪切时触发的事件
onDrag HTML: 当某个对象被拖动时触发的事件 [活动事件]
onDragDrop HTML: 一个外部对象被鼠标拖进当前窗口或者帧
onDragEnd HTML:当鼠标拖动结束时触发的事件，即鼠标的按钮被释放了
onDragEnter HTML: 当对象被鼠标拖动的对象进入其容器范围内时触发的事件
onDragLeave HTML: 当对象被鼠标拖动的对象离开其容器范围内时触发的事件
onDragOver HTML: 当某被拖动的对象在另一对象容器范围内拖动时触发的事件 [活动事件]
onDragStart HTML: 当某对象将被拖动时触发的事件
onDrop HTML: 在一个拖动过程中，释放鼠标键时触发的事件
onLoseCapture HTML: 当元素失去鼠标移动所形成的选择焦点时触发的事件
onPaste HTML: 当内容被粘贴时触发的事件
onSelect HTML: 当文本内容被选择时的事件
onSelectStart HTML当文本内容选择将开始发生时触发的事件

数据绑定:
onAfterUpdate HTML: 当数据完成由数据源到对象的传送时触发的事件
onCellChange HTML:当数据来源发生变化时
onDataAvailable HTML: 当数据接收完成时触发事件
onDatasetChanged HTML: 数据在数据源发生变化时触发的事件
onDatasetComplete HTML: 当来子数据源的全部有效数据读取完毕时触发的事件
onErrorUpdate HTML: 当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件
onRowEnter HTML:当前数据源的数据发生变化并且有新的有效数据时触发的事件
onRowExit HTML:当前数据源的数据将要发生变化时触发的事件
onRowsDelete HTML: 当前数据记录将被删除时触发的事件
onRowsInserted HTML: 当前数据源将要插入新数据记录时触发的事件

外部事件:
onAfterPrint HTML: 当文档被打印后触发的事件
onBeforePrint HTML: 当文档即将打印时触发的事件
onFilterChange HTML: 当某个对象的滤镜效果发生变化时触发的事件
onHelp HTML: 当浏览者按下F1或者浏览器的帮助选择时触发的事件
onPropertyChange HTML: 当对象的属性之一发生变化时触发的事件
onReadyStateChange HTML: 当对象的初始化属性值发生变化时触发的事件