DOM初探（4）——DOM定义与基本操作（查）

DOM

DOM（document object model）
DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。也用人称DOM是对HTML以及XML的标准编程接口。

补充：

什么东西都操作不了CSS！！(只是改变不了CSS样式表，但是可以给某个元素添加行间样式——通过操作HTML间接的操作css)

HTML和XML本质上是一个东西，但是，他俩也有很大的区别：

XML是HTML最早期的一个版本，XML里面的标签可以是自定义的，这是他俩最大的区别。

DOM的基本操作：

对节点的增删改查

查看元素节点

document(是一个对象，上面有很多属性方法)（单独写document代表整个文档的js显示形式）

document.getElementById()//元素id在IE8以上的浏览器，不区分id大小写，而且返回匹配name属性的元素

document.getElementsByTagName()//标签名

document.getElementsByName()//需注意，只有部分标签name可生效(表单，表格元素，img，iframe)

document.getElementsByClassName()//类名->IE8和以上的IE版本中没有，可以多个class一起

document.querySelector()//css选择器，在IE7及以下的版本中没有

document.querySelectorAll()//css选择器在IE7及以下的版本中没有

document(是一个对象，上面有很多属性方法)（单独写document代表整个文档的js显示形式），现在咱们能看出来的是html可以包括所有的标签，但是，如果再给html标签外面套上一个标签的话，那就是document标签了，换句话说，html标签只是文档里面的根标签，只是文档里面最主要的标签，他还不能代表整个文档。

这个你也可以自己试试：

在控制台里面输入document，回车，然后把鼠标放在上面，整个页面就全部变色了，如下图：

所以说document才真正代表整个文档！！

查：

第一个方法：

<div id="only">123</div>
<script type="text/javascript">
    var div = document.getElementById('only');//通过id选出一个div
</script>

第二个方法：

<div id="only">123</div>
<script type="text/javascript">
    var div = document.getElementsByTagName("div");//把页面里面的所有的div都取出来，即使是一个                
                                      div，他也是一组，是类数组(既能当数组使用,也能够当对象使用)
    var div = document.getElementsByTagName('div')[0];//取出来第一个div
</script>

第三个方法：

<input name="book">
<script type="text/javascript">
   var div = document.getElementsByName("book");
   var div = document.getElementsByName("book")[0];
</script>

第三个方法有个局限，只有特定的标签，他才有name属性，部分标签是没有name属性的，所以你这样通过js方法就选不出来。

第四个方法：

<div>
            <strong></strong>
        </div>
        <div>
            <span>
                <strong class="demo">123</strong>
            </span>
        </div>
        <script type="text/javascript">
            var div = document.querySelector("div > span strong.demo");
            var strong = document.querySelectorAll("div > span strong.demo");//选出来的是一
                                                                                        组

css怎么选择html的，括号里面就怎么写！！

所以，最后总结出来就是query比get更方便，然而，query并不用！！

现实总是这么残酷，query这么好的方法为什么不用呢？

这个query有个缺点，在ie7及以下，并没有Selectot方法，但是ie7的以下版本现在已经不用了，也就是说这个缺点对咱们来说并没有什么影响，

第二个缺点要命了：实时性的问题，这个querySelector和querySelectorAll选出来的元素不是实时的。

举个栗子：

这个实时性什么意思：

就比如：现在这个班的全部男生都起立，全部的男生都站起来了，过了一会，又来了一个男生，一看，所有的男生都起立了，他也站起来了。——这就是实时的意思。

不实时就是，现在这个班的全部男生都起立，全部的男生都站起来了，过了一会，又来了一个男生，他也没有管，就直接坐了下来。

<div></div>
<div class="demo"></div>
<div></div>
<script type="text/javascript">
    //现在我把这三个div全部选出来
    var div = document.getElementsByTagName("div");
    //然后，我再单独把第二个div选出来
    var demo = document.getElementsByClassName("demo")[0];
</script>

现在在控制台把demo干掉：

demo就消失了，消失之后这个组里面就剩下2个了

他会实时的进行更改。

然后我再创建一个新的div（newDiv），把它放到页面里面去，

        <div></div>
        <div class="demo"></div>
        <div></div>
        <script type="text/javascript">
            //现在我把这三个div全部选出来
            var div = document.getElementsByTagName("div");
            //然后，我再单独把第二个div选出来
            var demo = document.getElementsByClassName("demo")[0];
            var newDiv = document.createElement("div");
            document.body.appendChild(newDiv);
        </script>

保存，刷新，再看div：

有四个div了。

我是在创建新的div之前选的，我先把人家一组给圈出来了，后来创建的div还在圈的里面。

那个query就让人失望了：

现在，我用query选出来三个div

        <div></div>
        <div class="demo"></div>
        <div></div>
        <script type="text/javascript">
            //现在我把这三个div全部选出来
            var div = document.querySelectorAll("div");
            //然后，我再单独把第二个div选出来
            var demo = document.getElementsByClassName("demo")[0];
            var newDiv = document.createElement("div");
            document.body.appendChild(newDiv);
        </script>

然后把demo干掉

你在看现在的div还剩下几个

还有三个div，query选出来的div至始至终就是这三个div得副本了，换句话说，其他的再怎么修改，就跟这个组已经没有关系了。

上面这些都是选择元素方法类的操作，还有非方法类的操作：

DOM初探（4）——DOM定义与基本操作（查）

猜你喜欢