前端：JS/27/HTML DOM简介和新特性，HTML DOM访问HTML元素的方法，元素对象的属性（标准属性），noscroll事件，实例：书讯快递

最新推荐文章于 2024-11-11 14:10:18 发布

原创最新推荐文章于 2024-11-11 14:10:18 发布 · 312 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文介绍了HTMLDOM的基本概念及新特性，详细讲解了通过id查找节点、获取HTML标记对象等常用方法。并通过实例演示了如何利用onscroll事件实现书讯快递的滚动效果。

HTML DOM简介和新特性

1,HTML DOM简介

核心DOM中，提供的属性和方法，已经可以操作网页了，为什么还要HTML DOM？
如果在核心DOM中，网页中节点层级很深时，访问这个节点时将十分的麻烦。因此使用HTML DOM中提供的通过id直接找节点的方法，而不用再从HTML根节点开始。

2，每一个HTML标记，都对应一个元素对象，如：<img>对应一个图片对象；<table>对应一个表格对象，等等

HTML DOM访问HTML元素的方法（频繁使用）

1，getElementById(id);

功能：查找网页中指定id的元素对象；
语法：var obj =document.getElementById(“id”);
参数：id是指网页中标记的id属性的值；
返回值：返回一个元素对象
例：var imgObj =document.getElementById(“img”);

2，getElementsByTagName(tagName)

功能：查找指定的HTML标记，返回一个数组。
语法：var arrObj =parentNode.getElementsByTagName(tagName);
参数：tagName是要查找的标记名称，不带尖括号；
返回值：返回一个数组，如果只有一个节点也返回一个数组；
例：找到ulTag下的所有li标记

元素对象的属性（标准属性）

1，tagName :标签名称，与核心DOM中的nodeName一样；

2，className :CSS类的样式；效果相当于HTML标记中加入class =“className”

3，id :同HTML标记id属性一样；
4，title :同HTML标记的title属性一样；
5，style :同HTML标记的style属性一样；

6，innerHTML :指包含在HTML标记中所有的内容，包括其中的HTML标记；

7，offsetWidth :元素对象的宽度，不带px单位；
8，offsetHeight :元素对象的高度，不带px单位；
9，scrollWidth :元素对象的总宽度，包括滚动条中的内容，不带px单位；
10，scrollHeight :元素对象的总高度，包括滚动条中的内容，不带px单位；
11，scrollTop :元素对象向上滚动过去了多少距离（有滚动条时才有效），不带px单位；
12，scrollLeft :元素对象向左滚动过去了多少距离（有滚动条时才有效），不带px单位；
例：

onscroll事件（属性）：当拖动滚动条时，调用JS函数

实例：书讯快递

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS实例：书讯快递滚动效果</title>
    <style type="text/css">
        body,
        ul,
        li {
            margin: 0px;
            padding: 0px;
        }

        ul,
        li {
            list-style: none;
        }

        body {
            font-size: 12px;
        }

        #dome {
            width: 200px;
            height: 250px;
            margin: 50px auto;
            border: 1px solid #000;
            overflow: hidden;
            /* 溢出内容隐藏*/

        }

        #dome li {
            padding: 0px 5px;
            /* li的内填充 */
        }

        #dome1 {
            background-color: #00FFFF;
        }

        #dome2 {
            background-color: #FFFF00;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            //1,获取三个<div>的id对象
            var dome = document.getElementById("dome");
            var dome1 = document.getElementById("dome1");
            var dome2 = document.getElementById("dome2");

            //2,三个<div>的高度一样
            dome1.style.height = dome.offsetHeight + "px";//这里的style是属性又是一个style对象，代表CSS对象；
            //style对象代表行内样式
            dome2.style.height = dome.offsetHeight + "px";
            //3,将dome1中的内容复制到dome2中
            dome2.innerHTML = dome1.innerHTML;
            //4,dome的scrollTop属性来实现滚动
            window.setInterval("start(dome)", 40);//定时器使40毫秒向上滚动1px
        }
        function start(dome) {//实现dome的滚动
            if (dome.scrollTop == dome.offsetHeight) {
                dome.scrollTop = 0;
            } else {
                dome.scrollTop++;//向上滚动1px
            }

        }
    </script>
</head>

<body>
    <div id="dome">
        <div id="dome1">
            <ul>
                <li>走到今日并非理所当然</li>
                <li>顽风尚然强劲不挠</li>
                <li>确实之物比想象中的</li>
                <li>不要少吧</li>
                <li>是因为记忆被岁月模糊了吗</li>
                <li>还是说心灵被未曾见过的陌生人所烦扰了呢？</li>
                <li>其实是支配躯体的疼痛啊</li>
                <li>即使这样还是来到了这里</li>
                <li>心无旁骛地瞻望终点就好</li>
                <li>仅此唯一的理由</li>
                <li>便是得以撒入回归之土</li>
                <li>但那浅淡微薄的梦想</li>
                <li>如能秉持初心不曾改变</li>
                <li>未来也就不会无聊了吧......</li>
            </ul>
        </div>
        <div id="dome2"></div>
    </div>

</body>

</html>