dom中document类型常用的属性和方法

最新推荐文章于 2024-05-31 01:27:40 发布

丁叮顶迪d

最新推荐文章于 2024-05-31 01:27:40 发布

阅读量368

点赞数

文章标签： html html5 javascript

本文链接：https://blog.csdn.net/weixin_43800477/article/details/120268931

版权

Javascript通过使用Document类型表示文档。在浏览器中，document对象表示整个HTML页面。document对象是window对象的一个属性，因此可以直接调用。可以继承Node中所有的属性和方法

属性：

documentElement 始终指向HTML页面中的<html>元素。

body 直接指向<body>元素

doctype 访问<!DOCTYPE>, 浏览器支持不一致，很少使用

title 获取文档的标题

URL 取得完整的URL

domain 取得域名，并且可以进行设置，在跨域访问中经常会用到。服务器测

Referrer 取得来源页面的URL。

images 获取所有的img对象，返回类数组对象

forms 获取所有的form对象，返回类数组对象

links 获取文档中所有带href属性的<a>元素

查找元素

getElementById()

参数为要取得元素的ID，如果找到返回该元素，否则返回null。如果页面中多个元素的ID值相同，只返回文档中第一次出现的元素。如果某个表单元素的name值等于指定的ID，该元素也会被匹配。

getElementsByTagName()

参数为要取得元素的标签名，返回包含一个或者多个元素的NodeList。

getElementsByName()

参数为元素的name,返回符合条件的NodeList

getElementsByClassName()

当元素的class属性值包含指定的标识符时匹配。，返回一个类数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- document -->
    <p class="blue">今天天气好</p>
    <div>今天天气好</div>
    <b class="blue">今天天气好</b>
    <p>今天天气好</p>
    <ul>
        <li>今天天气好</li>
        <li id="red">今天天气好</li>
        <li>今天天气好</li>
    </ul>
    <script>
        //属性
        console.log(document.documentElement);//html
        console.log(document.body);//body
        console.log(document.doctype);//返回版本信息
        console.log(document.title);//标题
        console.log(document.URL);//网址
        console.log(document.domain);//域名
        console.log(document.referrer);//从哪个页面跳转过来
        console.log(document.images);//获取当前页面的image标签，返回一个类数组
        console.log(document.forms);//获取当前页面的表单元素
        console.log(document.links);//获取当前页面的所有a标签

        //方法
        var red = document.getElementById('red');//获取id值为red的标签
        red.style.backgroundColor = 'red';

        var ps = document.getElementsByTagName('p');//获取所有标签名为p的标签，返回一个类数组
        var ps_length = ps.length;
        for (var i=0;i<ps_length;i++){
            ps[i].style.fontSize = '24px';//遍历，将所有p标签的字号改为24px
        }

        var blues = document.getElementsByClassName('blue');//通过类名获取标签
        var blues_length = blues.length;
        for(var i=0;i<blues_length;i++){
            blues[i].style.color = 'blue';
        }
        //document.getElementsByName() 获取到所有的name相同的元素（适用于表单元素）
    </script>
</body>
</html>

丁叮顶迪d

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dom中document类型常用的属性和方法

Javascript通过使用Document类型表示文档。在浏览器中，document对象表示整个HTML页面。document对象是window对象的一个属性，因此可以直接调用。可以继承Node中所有的属性和方法属性：documentElement 始终指向HTML页面中的<html>元素。body 直接指向<body>元素doctype 访问<!DOCTYPE>, 浏览器支持不一致，很少使用title 获取文档的标题URL 取得...
复制链接

扫一扫