JavaScript核心技术学习笔记（1）——DOM基础（1）

DOM基础（1）

一、DOM是什么

　　Document object Model，文档对象模型，是由W3C定义的一个标准。简单来说，DOM里面有很多方法，我们通过它提供的方法来操作一个页面中的某个元素，例如改变这个元素的颜色、点击这个元素实现某些效果、直接把这个元素删除等。

　　一句话总结：DOM操作，可以简单理解成“元素操作”。

　　为方便理解，我们可以这样思考：每一个元素就是一个节点，而每一个节点就是一个对象。也就是说，我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作（这句话非常重要）。

二、节点类型

　　在JS中，节点也是分为很多类型的。DOM节点共有12中类型，不过常见的只有3种，分别是：

• 元素节点

• 属性节点

• 文本节点

　　如下面这段代码：

<div id="wrapper">xff贼帅</div>

　　元素节点是整段话，属性节点是id="wrapper"，文本节点是xff贼帅。

三、获取元素

　　获取元素，准确来说，就是获取元素节点（注意不是属性节点或文本节点）。对于一个页面，我们想要对某个元素进行操作，就必须通过一定的方式来获取该元素，只有获取到了才能对其进行相应的操作。

　　在JS中，我们可以通过以下六种方式来获取指定元素：

• getElementById()

• getElementsByTagName()

• getElementsByClassName()

• querySelector()和querySelectorAll()

• getElementsByName()——仅限表单元素

• document.title和document.body

1. getElementById()

此方式为通过id来选中元素。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script>
        window.onload = function()
        {
            var oDiv = document.getElementById("div1");
            oDiv.style.color = "red";
        }
    </script>
</head>
<body>
    <div id="div1">xff贼帅</div>
</body>
</html>

注：我们都知道，浏览器是从上到下解析一个页面的。这个例子的JS代码在HTML代码的上面，如果没有window.onload，浏览器解析到document.getElementById(“div1”)就会报错，因为它不知道div1究竟是谁，所以我们必须使用window.onload，等到浏览器把整个页面解析完了再去解析window.onload内部的代码，这样就不会报错了。

2. getElementsByTagName()

此方式为通过标签名来选中元素。

　　getElementsByTagName()例子：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script>
        window.onload = function()
        {
            document.body.innerHTML = "<input type='button' value='按钮'/><input type='button' value='按钮'/><input type='button' value='按钮'/>"
            var oBtn = document.getElementsByTagName("input");
            oBtn[0].onclick = function()
            {
                alert("表单元素共有："+oBtn.length+"个");
            }
        }
    </script>
</head>
<body>
</body>
</html>

　　getElementById()例子：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script>
        window.onload = function()
        {
            document.body.innerHTML = "<input id='btn' type='button' value='按钮'/><input type='button' value='按钮'/><input type='button' value='按钮'/>"
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function()
            {
                alert("表单元素共有："+oBtn.length+"个");
            }
        }
    </script>
</head>
<body>
</body>
</html>

注：对比以上2.1.两种方式可以发现，1.无法实现操作动态创建的DOM元素，而2.可以操作动态创建的DOM元素。

着重看第一个例子我们可以发现，该方法获取的是一堆元素。准确地说，getElementsByTagName()获取的是一个“类数组”（也叫伪数组），也就是说这不是真正意义上的数组。

那么总结一下类数组的特点，能用的只有两点：1. length属性 2.下标形式 ，除此之外的如push()等方法是不能使用的。

至于方法3.4.5.6.，与1.2.类似，具体不多做赘述，有兴趣朋友可以自行查阅。

四、创建元素

在JS中，我们可以使用createElement()来创建一个元素节点，也可以使用createTextNode()来创建一个文本节点，然后可以将上述两种节点组装成“有文本内容的元素”。

这种操作又被称为“动态DOM操作”。所谓的“动态DOM”，指的是使用JS创建的元素，这个元素一开始是不存在于HTML中的。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script>
        window.onload = function()
        {
            var oDiv = document.getElementById("content");
            var oStrong = document.createElement("strong");
            var oTxt = document.createTextNode("xff贼帅");
            
            //将文本节点插入strong元素
            oStrong.appendchild(oTxt);
            //将strong元素插入div元素
            oDiv.appendchild(oStrong);
        }
    </script>
</head>
<body>
    <div id="content"></div>
</body>
</html>

上面代码所实现的功能和下面这句html等价：

<div id="content"><strong>xff贼帅</strong></div>

那么有的小伙伴可能就会奇怪了，添加一个元素有必要这么麻烦吗？明明一句话就能解决的事情。

其实会有这个疑问，是因为小伙伴们还没有真正理解动态创建DOM的意义。在html中直接添加元素，是静态方法；而使用JS添加元素，是动态方法。例如我要做一个雪花飘落的效果，这些雪花是动态创建的img元素，雪花会不断生成、消失，也就是我要实现img元素的不断创建、删除。那我总不可能手动中html中添加删除元素吧，那么正确的方法就是使用动态DOM，使用JS来不断地创建和删除元素。

小总结

创建动态元素有以下三种方式：

第一种：

Document.write():

<body>
<input type="button" id="btn" value="生成元素" onclick="f1()"/>
<input type="text" value=""/>
<script>
        document.write("这是新添加的内容");
</script>
<div id="d">
    <script>
        document.write("<input type='text' value='123'/>");
    </script>
</div>
<script>
    function f1(){
        document.write("<input type='text' value='456'/>");
    }
    f1();
</script>

注：使用上述方法动态创建时会遇到一个问题——浏览器是从上到下进行加载的，这样会形成一个文档流，可等到执行完毕时，文档流会关闭，会将之前生成的元素全部冲刷掉，所以不建议使用。

第二种：

使用innerHTML创建元素：

<body>
<div id="d"></div>
<input type="button" value="生成" id="btn"/>
<script>
    var txt=document.getElementById("txt");
    var d=document.getElementById("d");
    var btn=document.getElementById("btn");
    //此方法字符串具有不可变性，频繁的操作字符串会造成内存的浪费。
//    btn.onclick=function(){
//        for(var i=0;i<10;i++){
//            d.innerHTML+="<input type='text'><br />";
//        }
//    }
    //因此我们可以先定义一个数组，将字符串存储在数组当中，最后在将数组转化为字符串。
    var arr=[];
    btn.onclick=function(){
        for(var i=0;i<10;i++){
            arr.push("<input type='text'><br />");
        }
        d.innerHTML=arr.join("");
    }
</script>
</body>

注：此方法会整个重写该元素内的所有HTML代码，也就是说之前写的都会被覆盖。所以推荐在元素内没有内容时使用。

第三种：

CreateElement():

<body>
<div id="d"></div>
<script>
    var d = document.getElementById("d"); //获取div的id
    var ul = document.createElement("ul");// 在这里创建一个ul标签
    d.appendChild(ul);         //将存储在内存中ul标签剪切到div之中 
    var li = document.createElement("li");//因为都是字符串，所以需要加""是创建出来的一对标签
    ul.appendChild(li);    //将存储在内存中的li标签剪切到ul之中
    li.innerHTML ="1231321";
    li.id = "abc";
    ul.removeChild(li);  //使用removeChild()可以删除ul里面的li标签
</script>
</body>

注：appendChild()会将新元素插入并成为指定父元素的最后一个子元素

最后说一下createElement()方法创建DOM元素的步骤：

• 创建元素节点：createElement()

• 创建文本节点：createTextNode()

• 将文本节点插入元素节点：appendChild()

• 将上一步组装好的元素插入已有元素中：appendChild()

posted @ 2018-09-21 20:58 staticxff 阅读(598) 评论(0) 收藏举报

刷新页面返回顶部

staticxff

JavaScript核心技术学习笔记（1）——DOM基础（1）

公告