JavaScript学习篇之DOM第一篇

最新推荐文章于 2024-08-02 08:30:00 发布

FaceToBook

最新推荐文章于 2024-08-02 08:30:00 发布

阅读量138

点赞数

分类专栏： web JavaScript 文章标签： web JavaScript

本文链接：https://blog.csdn.net/weixin_43629719/article/details/96031907

版权

web 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

JavaScript

9 篇文章 0 订阅

订阅专栏

Dom介绍

MDN网站给出的介绍：
文档对象模型 (DOM) 将 web 页面与到脚本或编程语言连接起来。通常是指 JavaScript，但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点(node)，每个节点都包含着对象(objects)。DOM的方法(methods)让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。【说白了就是操作文档的，一个页面就是一个文档。】

DOM中文档、节点、元素的关系

文档：一个html文件就是一个文档，这个文档也就是一个对象。页面中顶级元素就是文档 document.
元素：页面中每一个标签就是一个元素。当然也可以看成一个对象，标签里面可以嵌套标签，元素之内也可以含有元素。其中这里面的根元素就是 html 标签。
demo:<div><p>哈哈</p></div>
节点：页面中所有的内容都是节点。包括标签、属性、文本[包括文字、空格、换行]。
Dom树：从网上扒拉一个图来看。这里介绍的很详细。
在这里插入图片描述

Dom练习

1.实现以下效果。点击进行选项时，如果发生变化则对样式进行变换。

在这里插入图片描述
附上相关代码：


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>onchange事件</title>
    
    <script type="application/javascript">
        function setBodyAttr(attr,value){    //设置属性的函数
            if (document.body) eval('document.body.'+attr+'="'+value+'"'); 
            else notSupported();
        }
    </script>
    
</head>
<body>
<div style="margin: .5in; height: 400px;">
    <p><b><tt>text</tt>color</b></p>
    <form>
        <select onChange="setBodyAttr('text',    //注册 改变事件
        this.options[this.selectedIndex].value);">
            <option value="black">black
            <option value="darkblue">darkblue
        </select>
        <p><b><tt>bgColor</tt></b></p>
        <select onChange="setBodyAttr('bgColor',
        this.options[this.selectedIndex].value);">
            <option value="white">white
            <option value="lightgrey">gray
        </select>
        <p><b><tt>link</tt></b></p>
        <select onChange="setBodyAttr('link',
        this.options[this.selectedIndex].value);">
            <option value="blue">blue
            <option value="green">green
        </select>  <small>
        <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
            (sample link)</a></small><br>
    </form>
</div>
</body>
</html>