【JavaScript】JavaScript开篇基础（4）

E绵绵

已于 2024-11-09 12:23:21 修改

阅读量1.1k

点赞数 10

分类专栏： JavaScript专栏文章标签： javascript 开发语言 ecmascript

于 2024-11-04 20:45:02 首次发布

本文链接：https://blog.youkuaiyun.com/Easonmax/article/details/143403015

版权

JavaScript专栏专栏收录该内容

7 篇文章

订阅专栏

1.❤️❤️前言~🥳🎉🎉🎉

Hello, Hello~ 亲爱的朋友们👋👋，这里是E绵绵呀✍️✍️。

如果你喜欢这篇文章，请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的内容感兴趣，记得关注我👀👀以便不错过每一篇精彩。

当然，如果在阅读中发现任何问题或疑问，我非常欢迎你在评论区留言指正🗨️🗨️。让我们共同努力，一起进步！

加油，一起CHIN UP！💪💪

🔗个人主页：E绵绵的博客
📚所属专栏：

1. JAVA知识点专栏

深入探索JAVA的核心概念与技术细节

2.JAVA题目练习

实战演练，巩固JAVA编程技能

3.c语言知识点专栏

揭示c语言的底层逻辑与高级特性

4.c语言题目练习

挑战自我，提升c语言编程能力

5.Mysql数据库专栏

了解Mysql知识点，提升数据库管理能力

6.html5知识点专栏

学习前端知识，更好的运用它

7. css3知识点专栏

在学习html5的基础上更加熟练运用前端

8.JavaScript专栏

在学习html5和css3的基础上使我们的前端使用更高级

📘 持续更新中，敬请期待❤️❤️

2.Dom简介

DOM（文档对象模型）是一个用于表示和操作 HTML 和 XML 文档的标准接口。它将文档视为一个树形结构，节点表示文档的各个部分，例如元素、属性和文本。

3.获取元素

1. document.getElementById('id')方法获取带有ID的元素对象 (参数必须是字符串)

2.根据标签名获取：document.getElementsByTagName()方法返回带有指定标签名对象的集合。
还可以获取某个元素(父元素)内部指定标签的子元素集合，父元素必须是指定的单个元素：element.getElementsByTagName('标签名');
获取的是一个伪数组,可以通过索引访问，但它没有数组的一些方法，例如 push、pop、map 等。


3.document.getElementsByClassName('类名'); //根据类名获取集合，也就是伪数组

4.document.querySelector('选择器');//获取指定选择器的第一个元素对象如.box #nav

5.document. querySelectorAll('选择器');//获取的是指定选择器的集合

6.获取特殊元素body，document.body;//获取body元素对象。

7.获取特殊元素html， document.documentElement;//获取html元素对象

4.事件基础

常用的事件:
鼠标事件:
onclick（鼠标点击）
onmouseover(鼠标经过),
onmouseout(鼠标离开),
onfocus(获得鼠标焦点),
onblur(失去鼠标焦点),
onmousemove(鼠标移动触发),
onmouseup(鼠标弹起触发),
onmousedown(鼠标按下触发)

事件的组成：
事件源：事件触发的对象,如按钮
事件类型：如何触发,什么事件，如鼠标点击(onclick)
事件处理程序：通过一个函数赋值的方式完成
 <button id="btn">唐伯虎点秋香</button>
                    <script>
                        //获取事件源
                        var btn=document.getElementById('btn');
                        //绑定事件
                        btn.οnclick=function(){
                            alert('点秋香');//添加事件处理程序
                        }

                    </script>

5.innerText和innerhtml

innerText 和 innerHTML 是用于操作 DOM 元素内容的两个重要属性。

元素.innerText 可以直接获取元素中的文本，但不带有任何内部标签。

元素.innerText = 值设置元素之间的文本，其中文本内不能有标签，因为它不会识别。

元素.innerHTML 获取元素之间HTML代码，包含标签

元素.innerHTML = 值设置元素之间的HTML代码，可以有标签，它会识别。

一般我们都用innerHTML，官方都推荐。

6.修改元素属性

有如下属性修改图片属性：

1.src(图片的路径)
img.src='...';(img是我们获取的图片对象)

2.title(鼠标放在图片上会显示的信息)
img.title='...';

（html中图片的属性在js中都可以被修改）

还可以修改html中表单的属性。

对于html中元素所带的基本属性，我们就如上文一样直接修改就行，而对于css中的样式，我们就要换种方式了。

当使用 JavaScript 的 DOM 操作修改元素的css样式时 , 有两种主要的方法 :

行内样式操作 element.style
类名样式操作 element.className

使用 element.style 可以直接在 JavaScript 中设置元素的行内样式 ;

行内样式会直接作用于该元素 , 它权重优先级比css内部样式优先级高 , 可以直接指定样式属性的值 ;
// 获取元素
var element = document.getElementById('myElement');

// 设置元素的背景颜色和宽度
element.style.backgroundColor = 'blue';
element.style.width = '200px';

element.className 是一个 JavaScript 属性，用于获取或设置 HTML 元素的类名（class）。这是在 DOM 操作中常用的方法之一。

因为可以设置类名，所以我们可以通过修改类名去修改元素属性。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Style Operation Example</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            margin: 20px auto;
            padding: 10px;
            text-align: center;
        }
        
        .box2 {
            width: 200px;
            height: 200px;
            /* 颜色改变 */
            background-color: #ffcc00;
            border-color: #e6b800;
            /* 字体大小由 默认 变为 24px */
            font-size: 24px;
            /* 旋转样式 */
            transform: rotate(20deg);
            border: 1px solid #ccc;
            margin: 20px auto;
            padding: 10px;
            text-align: center;
        }
        
        button {
            display: block;
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <div id="myBox" class="box">盒子模型元素</div>
    <br>
    <button id="changeButton">修改 style 属性</button>

    <script>
        // JavaScript 脚本
        // 获取按钮元素
        var changeButton = document.getElementById('changeButton');

        // 添加点击事件监听器
        changeButton.addEventListener('click', function() {
            var box = document.getElementById('myBox');

            // 切换类名以改变样式
            box.className = "box2";
        });
    </script>
</body>

</html>

7.自定义属性

自定义属性的命名必须遵循 data- 前缀规则，后面紧跟小写字母、数字或连字符。不要使用大写字母或其他特殊字符，以确保在所有浏览器中具有良好的兼容性。

获取自定义属性值：

element.属性获取内置属性值(元素本身自带的属性)
element.getAttribute(属性”); 主要获得自定义的属性(标准) 我们程序员自定义的属性

设置/移除自定义属性：

element.属性="值“ 设置内置属性值。
element.setattribute(”属性"，"值');

element .removeAttribute("属性");

8.节点操作

概念：网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示。

基本组成： nodeType(节点类型) 、nodeName(节点名称）、nodeValue(节点值)

元素节点nodeType为1
属性节点nodeType为2
文本节点nodeType为3（文本节点包含文字、空格、换行等)

节点操作（主要为元素节点）的目的： 获取元素

父节点：

node.parentNode
子节点：
node.children（非标准），返回子元素节点集合（各浏览器都支持，更常用）
node.firstElementChild，返回第一个子元素节点，IE9以上才支持
node.lastElementChild，返回最后一个子元素节点，IE9以上才支持
node.children[0]，返回第一个子元素节点，没有兼容性问题
node.children[ol.children.length - 1])，返回ol最后一个子元素节点，没有兼容性问题

兄弟节点：
node.nextElementSibling，返回元素下一个兄弟元素节点，找不到返回null，IE9以上才支持
node.previousElementSibling，返回元素上一个兄弟元素节点，找不到返回null，IE9以上才支持

创建节点
document.createElement('tagName')，由tagName指定的HTML元素创建。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

添加节点
node.appendChild(child);，将一个节点添加到指定父节点的子节点列表末尾，类似于CSS里面的after伪元素。
node.insertBefore(child，指定元素);将一个节点添加到指定父节点的指定子节点前面，类似于CSS里面的before伪元素。