Web前端基础(6)浏览器对象模型DOM

JavaScript组成

JavaScript由三部分组成

  1. ECMAscript – 欧洲计算机制造商协会,描述了javascript的语法和基本对象。
  2. DOM – 文档对象模型,处理网页内容的方法和接口。
  3. BOM – 浏览器对象模型,与浏览器交互的方法和接口。

DOM的定义

DOM为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构,目的其实就是为了能让javascript操作html元素而定制的一个规范。

DOM树如下

由结构图中我们可以看到,整个文档就是一个文档节点。而每一个HMTL标签都是一个元素节点。

访问DOM节点的方法

  1. getElementById():通过id访问DOM节点

    <html>
    <body>
        <p id="p1">Hello World!</p>
        <script>
            document.getElementById("p1").innerHTML="New text!";
            //将上面的"Hello WOrld!"的文本改为"New text"
        </script>
    </body>
    </html>
    
  2. getElementsByTagName():通过标签名称访问DOM节点(结果是集合)

  3. getElementsByClassName():通过class类名访问DOM节点(有兼容性问题)

我们可以封装自己的class类来解决兼容性问题:取出所有盒子,利用遍历的方法找出className.

    window.onload = function(){
       //封装自己class类名
        function getClass(classname){
            //如果浏览器支持,则直接返回
            if(document.getElementsByClassName)
            {
                return document.getElementsByClassName(classname);
            }
            // 不支持的 浏览器
            var arr = []; // 用于存放满足的数组
            var dom = document.getElementsByTagName("*");
            //alert(dom.length);
            for(var i=0;i<dom.length;i++)
            {
                if(dom[i].className == classname)
                {
                    arr.push(dom[i]);
                }
            }
            return arr;
        }
        console.log(getClass("demo").length);
    }

DOM节点的访问关系

节点的访问关系,是以属性的方式存在的。DOM的节点并不是孤立的,因此可以通过DOM节点之间的相对关系对它们进行访问。

父节点

parentNode:调用者就是节点。一个节点只有一个父节点。调用方式就是节点.parentNode.

window.onload = function(){
    var x = document.getElementById("x");
    x.onclick = function(){
        this.parentNode.style.display = "none";
        // 关掉的是他的父亲节点
    }
}

兄弟节点

  • nextSibling:下一个节点(包括空文档和换行节点)。(注:IE678中指下一个元素节点(标签))
  • nextElementSibling:下一个元素节点。
  • previousSibling:前一个节点(包括空文档和换行节点)。(IE678中指前一个元素节点(标签))
  • previousElementSibling:前一个元素节点。

单个子节点

  • firstChild:调用者是父节点。第一个子节点(包括空文档和换行节点)。(IE678中指第一个子元素节点(标签))
  • firstElementChild:在火狐谷歌IE9都指的第一个元素节点。
  • lastChild:调用者是父节点。最后一个子节点(包括空文档和换行节点)。(IE678中指最后一个子元素节点(标签))
  • lastElementChild:最后一个元素节点。

所有子节点

  • childNodes:它是标准属性,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本节点。
    nodeType == 1 表示的是元素节点,元素就是标签 nodeType == 2 表示是属性节点 nodeType == 3 是文本节点

  • children:非标准属性,它返回指定元素的子元素集合。但它只返回HTML节点,甚至不返回文本节点,虽然不是标准的DOM属性,但它和innerHTML方法一样,得到了几乎所有浏览器的支持。

平常我们需要获取的只是元素节点,所以可以用children, children只获取元素节点,而且没有兼容性问题,但是在IE678中会包含注释节点,所以使用前要避免写注释。(通常使用children)

DOM节点的操作

创建节点

var div = document.creatElement(“li”);

插入节点

appendChild():后面追加节点 insertBefore(插入的节点, 参照节点):放到参照节点的前面,如果参照节点为null,默认放到最后。

<div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
</div>

<script>
    var para = document.createElement("p");
    var node = document.createTextNode("This is new.");
    para.appendChild(node);

    var element = document.getElementById("div1");
    var child = document.getElementById("p1");
    element.insertBefore(para, child);
</script>

删除节点

<div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
</div>

<script>
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.removeChild(child);
</script>

替换节点

<div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
</div>

<script>
    var para = document.createElement("p");
    var node = document.createTextNode("This is new.");
    para.appendChild(node);

    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.replaceChild(para, child);
</script>

克隆节点

cloneNode() 括号里面可以跟参数,如果是true深层复制,除了复制盒子本身外还复制子节点,如果为false只复制本节点。

设置节点属性

获取节点属性 getAttribute

alert(demo.getAttribute("title"));

设置节点属性 setAttribute(“属性”, “值”)

div.setAttribute(“class”,”demo”);

document.getElementById("p2").style.color = "blue";

删除某个属性 removeAttribute(“属性”)

DOM事件

HTML DOM 允许 JavaScript 对 HTML 事件作出响应。

onclick事件

<h1 onclick="this.innerHTML='hello!'">请点击这段文本!</h1>

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

<body onload="checkCookies()">

onchange 事件

onchange 事件常结合对输入字段的验证来使用。

<script>
	function upperCase(){
        var x = document.getElementById("testfname");
        x.value = x.value.toUpperCase();
	}
</script>

<input type="text" id="testfname" onchange="upperCase()">

onmouseover 和 onmouseout 事件

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

<script>
    function mOver(obj)
    {
        obj.innerHTML="谢谢"
    }

    function mOut(obj)
    {
        obj.innerHTML="把鼠标移到上面"
    }
</script>

onmousedown、onmouseup事件

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}

function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>