欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS核心之DOM操作 下

程序员文章站 2022-08-08 18:22:33
目录: 1、节点类型之Document类型 2、节点类型之Element类型 3、节点类型之Text类型 4、综合小示例 -- 动态添加外部样式文件 5、查找元素的扩展方法 接上篇,我们先来看常用的三种节点类型。 Document 类型 js通过Document类型表示文档。 在浏览器中,docum ......

 

目录:

1、节点类型之document类型

2、节点类型之element类型

3、节点类型之text类型

4、综合小示例 -- 动态添加外部样式文件

5、查找元素的扩展方法

 

接上篇,我们先来看常用的三种节点类型。

document 类型

js通过document类型表示文档。

在浏览器中,document对象是htmldocument(继承自document类型) 的一个实例,表示整个html页面。

而且,document对象是window对象的一个属性,可以将其作为全局对象来访问。

1、访问子节点

有两个内置的访问其子节点的快捷方式,documentelement和childnodes

例子:

<html>
<head>
    <title>sample page</title>
</head>
<body>
    <p>hello world!</p>
</body>
</html>

 

这个页面经过浏览器解析后,其文档只包含一个子节点,即<html>元素。

        // 访问文档子节点 documentelement 和 childnodes

        var html = document.documentelement;    // 取得对 <html>的引用

        alert(html === document.childnodes[0]); // true

        alert(html === document.firstchild);    // true

 

另外还有个 body 属性,直接指向 <body>元素

        var body=document.body;

 

 

2、访问文档信息

作为htmldocument的一个实例,document对象还有一些标准的document对象没有的属性。这些属性提供了document对象所表现的网页的一些信息:title, url, domain, referrer

        // 文档信息: title, url, domain, referrer
        var originaltitle = document.title;
        var url = document.url;
        var domain = document.domain;
        var referrer = document.referrer;

 

3、查找元素

document类型提供了两个方法 getelementbyid()getelementbytagname()

根据id取得元素 : getelementbyid(id)

 

假设有div片段

<div id="mydiv">some text</div>

 

可以用如下代码取得这个元素

var div = document.getelementbyid("mydiv"); // 取得 <div> 元素的引用

 

注意:

1、上面的参数大小写必须严格匹配。

2、如果页面中多个元素的id值相同,getelementbyid()只返回文档中第一次出现的元素。

 

根据标签名取得元素 getelementsbytagname(标签名)

返回值:包含0或多个元素的nodelist,在html文档中,这个方法会返回一个htmlcollection对象,作为一个“动态”集合,该对象与nodelist非常类似。

示例:取得页面中所有的<img>元素

        // 取得页面中所有的 <img> 元素

        var images = document.getelementsbytagname("img");


        alert(images.length);  //输出图像数量
        alert(images[0].src);  //输出第一个图像的 src 特性
        alert(images.item(0).src);  //输出第一个图像的 src 特性

 

element 类型

这是我们最常接触的类型,html主体结构中所有标签都是这个类型。

要访问元素的标签名,可以使用nodename属性,也可以使用tagname属性;这两个属性会返回相同的值。例子:

    <div id="mydiv">some text</div>

 

可以像下面这样取得这个元素及其标签名:

        alert(div.tagname); //"div"
        alert(div.tagname == div.nodename); //true

 

div.tagname输出的是 div 而非 div , 在html中,标签名始终以全部大写表示。

 

1、html元素

所有html元素都由htmlelement类型表示,不是直接通过这个类型,也是通过它的子类型来表示。

htmlelement类型直接继承自element并添加了一些属性。

每个html元素都存在着下列标准特性。

id,元素在文档中的唯一标识符

title, 有关元素的附加说明信息,一般通过工具提示条显示出来

lang, 元素内容的语言代码,很少使用

dir, 语言的方向,值为 ltr 或 rtl ( l:left, t:to, r:right ),  很少使用

classname, 与元素的class特性对应,即为元素指定的css类

例子:

<div id="mydiv" class="bd" title="body text" lang="en" dir="ltr">some text</div>

 

示例:通过js 取得标准特性值

        var div = document.getelementbyid("mydiv");
        alert(div.id);  //"mydiv"
        alert(div.classname);  //"bd"

 

其他title, lang, dir取得方法类似

 

2、取得特性值

每个元素都有一或多个特性,这些特性的用途是给出相应元素或其内容的附加信息。

操作特性的dom方法主要有三个,分别是getattribute()、setattribute()和removeattribute()。

接上面例子,获取特性值。

        alert(div.getattribute("id")); //"mydiv"

        alert(div.getattribute("class")); //"bd"

 

通过getattribute()方法也可以取得自定义特性

    <div id="mydiv" data-geo="china">hello world!</div>

 

取得自定义值:

    var geo = div.getattribute("data-geo");

 

原生的元素特性,可以通过dom元素本身的属性来访问, 例如 div.id ,

自定义的只能通过getattribute()来访问。

一般使用对象的属性,只有取得自定义特性的情况下才用getattribute()方法。

 

3、设置特性值

通过 setattribute() 方法既可以操作html特性也可以操作自定义特性。

通过这个方法设置的特性名会统一转成小写。

如果特性不存在会创建该属性并设置相应的值。

        div.setattribute("id", "someotherid");
        div.setattribute("class", "someotherclass");
        div.setattribute("data-date", "2019-9-1");

 

 

原生的特性也可以通过属性赋值的方法设置。

        div.align = "left";

 

使用removeattribute()方法彻底删除元素的特性,如

        div.removeattribute("class");

 

综合示例:创建元素

使用document.createelement()方法可以创建新元素,例子:

        //1、创建一个 <div> 元素
        var div = document.createelement("div");

        // 2、添加特性
        div.id = "mynewdiv";
        div.classname = "box";

        // 3、加到文档树中
        document.body.appendchild(div);

 

 

text 类型

这个类型比较简单,介绍一个创建文本节点的方法, createtextnode(),例子

        var element = document.createelement("div");
        element.classname = "message";


        var textnode = document.createtextnode("hello world!");
        element.appendchild(textnode)


        var anothertextnode = document.createtextnode("yippee!");
        element.appendchild(anothertextnode);
        document.body.appendchild(element);

 

dom操作综合例子 – 添加外部样式文件

以引入样式文件为例

    <link rel="stylesheet" type="text/css" href="styles.css" />

使用js构建这个引用

        var link = document.createelement("link");
        link.rel = "stylesheet";
        link.type = "text/css";
        link.href = "style.css";
        var head = document.getelementsbytagname("head")[0];
        head.appendchild(link);

 

用函数来封装一下

        function loadstyles(url) {
            var link = document.createelement("link");
            link.rel = "stylesheet";
            link.type = "text/css";
            link.href = url;
            var head = document.getelementsbytagname("head")[0];
            head.appendchild(link);
        }

 

调用该函数:

loadstyles("styles.css");

 

常用的动态加载js文件,也可采用类似做法。

 

查找元素的扩展方法

选择符 api

document类型中我们介绍了通过 getelementbyid()和getelementsbytagname()来查找元素,不过这两种方法对一些更加个性化的查询就有点力不从心了。

selectors api可以让浏览器原生支持css查询。

通过dom扩展方法可以通过css选择符来查询,核心的两个方法:queryselector()和queryselectorall()

queryselector()方法接收一个css选择符,返回与该模式匹配的第一个元素,如果没有,返回null

示例:

获取文档中第一个 <p> 元素:

document.queryselector("p");

 

获取文档中 class="example" 的第一个元素:

document.queryselector(".example");

 

获取文档中 class="example" 的第一个 <p> 元素:

document.queryselector("p.example");

 

获取文档中有 "target" 属性的第一个 <a> 元素:

document.queryselector("a[target]");

 

queryselectorall()返回的是一个nodelist的实例。

只要传给queryselectorall()方法的css选择符有效,该方法都会返回一个nodelist对象,而不管找到多少匹配的元素。如果没找到匹配的元素,nodelist就是空的。

        // 获取文档中所有的 <p> 元素

        var x = document.queryselectorall("p");

        // 设置第一个 <p> 元素的背景颜色

        x[0].style.backgroundcolor = "red";

 

插入标记技术innerhtml和outhtml

获取修改html时,直接使用插入标记技术更加方便。

innerhtml和outhtml这两个dom扩展已经纳入了html5规范。

1、innerhtml属性

    <div id="content">

        <p>

            hello world!

        </p>

    </div>

对应上面的<div>元素来说,它的 innerhtml属性会返回如下字符串

        <p>

            hello world!

        </p>

2、outhtml属性

    <div id="content">

        <p>

            hello world!

        </p>

    </div>

对应上面的<div>元素来说,它的 outerhtml属性会返回与上面相同的代码,包括<div>本身。

同样也可以设置值,如

        var div = document.getelementbyid("content");

        div.outerhtml = '<p>remove div</p>';

 

总结

我们介绍了dom1级常用的操作,dom1 级主要定义的是html和xml文档的底层结构。

dom2和dom3级则是在这个结构的基础上引入了更多的交互能力,也支持了更高级的xml特性,一个常用的功能就是用来设置样式:

任何支持style特性的html元素在javascript中都有一个对应的style属性,我们可以通过这个属性设置样式,如

        var div = document.getelementbyid("content");

        div.style.backgroundcolor = "red";

        div.style.border = "1px solid black";

 JS核心之DOM操作 下

也可以使用csstext, 一次设置多个样式属性,推荐使用。

div.style.csstext = "background-color:green; border:3px solid red;";

JS核心之DOM操作 下


理解dom的关键,就是理解dom对性能的影响。

dom操作往往是js中开销最大的部分,应尽量减少dom操作。

(通过合并操作减小操作的次数)

 

祝编程开心 :)

JS核心之DOM操作 下