JS操作DOM对象——JS基础知识（四）

时间：2024-04-04 22:05:16

一、JavaScript的三个重要组成部分

（1）ECMAScript（欧洲计算机制造商协会）

　　制定JS的规范

（2）DOM（文档对象模型）重点学习对象

　　处理网页内容的方法和接口

（3）BOM（浏览器对象模型）  存在兼容性问题

　　与浏览器进行交互的方法和接口

1、DOM定义

　　为js操作html元素而制定的规范，DOM树如下图

JS操作DOM对象——JS基础知识（四）

2、节点

　　整个文档是一个文档节点

　　每一个标签是一个元素节点

　　标签中的文字是一个文字节点

　　标签中的属性是一个属性节点

3、访问节点的方法

　　getElementById();      获取id对应的元素节点  只有他是的返回值是唯一的，也就是说是一个变量，其余返回值全是数组，切记！

　　getElementsByTagName();  获取标签数组  例如 ：div   ul   a

　　getElementsByName();    获取name对应的元素节点数组

　　getElementsByClassName();获取class对应的元素节点数组    有兼容性问题，所以我们要自己封装一个获取class类的方法

　　getElementById().getElementsByClassName();  获取某个ID下的class数组

　　getElementById().getElementsByTagName();  获取某个id下的标签数组

4、封装自己的获取class类的方法

　　原理：其实就是遍历文档中的所有标签，从这些标签中找到与自己class类一样的类。

　　兼容性问题：就是getElementsByClassName();有兼容性问题，但是我们在高级浏览器中还是可以用的

　　代码：

function getClass(classname) {

    //如果浏览器支持这个方法，我们还是不要浪费他的高性能，尽量使用

    if (document.getElementsByClassName) {

        return document.getElementsByClassName(classname);

    }

    //如果不能支持

    var arr = [];

    var dom = document.getElementsByTagName("*");

    for (var i = 0; i < dom.length; i++) {

        var txt = [];

        txt = dom[i].className.split(" ");

        for (var j = 0; j < txt.length; j++) {

            if (txt[j] == classname) {

                arr.push(dom[i]);

            }

        }

    }

    return arr;

}

5、访问关系（这样的好处是能省去起名的痛苦）

JS操作DOM对象——JS基础知识（四）

　　（1）父亲点

<script>

    window.onload = function(){

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

        x.onclick = function(){

            this.parentNode.style.display = "none";

            //关掉的是他的 父亲   this.parentNode  这种方法还是比较厉害的，能节省一个盒子的id起名
  　　　　} 
　　} 
</script>

　　（2）兄弟节点　　

　　　　nextSibling  下一个亲兄弟    亲的       IE 678 认识

　　　　nextElementSibling   其他浏览器认识的

　　　　previousSibling   同理  上一个兄弟

　　　　previousElementSibling

　　 （3）子节点（这个容易报错  不怎么用）　　　　

　　　　firstChild    第一个孩子  ie678

　　　　firstElementChild  第一个孩子   正常浏览器

　　　　var one.firstElementChild || one.firstChild;

　　　　lastChild

　　　　lastElementChild

　　（4）孩子节点（这个比较常用，虽然有点小问题）

　　　　childNodes    选出全部的孩子——元素节点   文本节点   属性节点

　　　　childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点     （嫡出）

　　　　火狐 谷歌等高本版会把换行也看做是子节点

　　　　利用  nodeType == 1   时才是元素节点     来获取元素节点

　　　　

　　　　（重要）children   选取所有的孩子——只有元素节点；这个更好 跟喜欢它  。 （庶出）   但是ie 678  包含 注释节点     这个要避免开。

6、DOM节点操作部分（非常重要）

　　创建节点   插入节点   删除节点  克隆节点

　　           谁要添加   谁要删除  谁要克隆

　　（1）创建节点（是插入的根基）

　　　　document.createElement(类型);

　　　　举例：var div = document.creatElement(“li”);   生成一个新的  li 标签

　　（2）插入节点

　　　　①appendChild()  默认插入到最后面

　　　　　　

　　　　②insertBefore(插入节点，参照节点)

　　　　　　如果第二个参数不为空，则将插入节点放到参照节点的前面；如果第二个参数  为 null  则 默认这新生成的盒子放到最后面。

　　（3）删除节点

　　　　removeChild()

　　（4）克隆节点

　　　　cloneNode(bool);   参数为false，浅层复制，只复制父亲，不复制儿子；  参数为true时，深层复制，包括儿子一起复制。

相关文章