JavaScript在web页面中的使用

最新推荐文章于 2024-08-03 21:16:42 发布

weixin_45987479

最新推荐文章于 2024-08-03 21:16:42 发布

阅读量702

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_45987479/article/details/125507900

版权

1.什么是JavaScript ？

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言

2.主要功能

嵌入动态文本于HTML页面。
对浏览器事件做出响应。
读写HTML元素。
在数据被提交到服务器之前验证数据。

3. js的组成

1.DoM-文档对象模型：（1）文档节点（2）查询获取元素方法（3）部分操作法

2.BOM-浏览器对象模型

4.运行模式

是一种解释性脚本语言（代码不进行预编译）
主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离
跨平台特性，绝大多数浏览器支持
JavaScript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。

5.语言优点

（1）脚本语言

（2）基于对象

（3）简单

（4）动态性与跨平台性。

6.代码演示

（1）DOM操作

<!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>

    <ul class="demo">
        <li>1</li>
        <!-- <li>2</li>
        <li>3</li> -->
    </ul>
    <div>222</div>
    <div></div>

    <script>
        // 1.DOM节点分类
        // DOM 即 Document Object Model
        // DOM 顶级对象为 document
        /**
         * 文档节点
         * 
         * 元素节点
         * 
         * 属性节点
         * 
         * 文本节点
         * 
         * */


        // 2.查询获取元素方法
        /**
         * getElementById
         * 通过id获取元素        单个
         * 
         * getElementsByTagName
         * 通过标签名称获取元素  多个
         * 
         * getElementsByClassName
         * 通过类名获取元素     多个
         * 
         * querySelector
         * 通过我们给定的名称获取第一个元素         单个
         * 
         * querySelectorAll
         * 通过我们给定的名称获取所有该名称的元素   多个
         * 
         *
         * */
        // 内置方法/函数，  就是研发人员给我们已经做好的函数，直接拿过来使用就行了。
        // var test = document.getElementById('demo');
        // querySelector可以通过 id、类名、标签名等方式 获取到我们的元素，但要加上相应的标识符。
        // var test = document.querySelector('ul');

        // 通过标签名、类名、querySelectorAll获取到的元素
        // 无论个数 都会被存放在数组内，我们要操作元素的时候需要用下标选择到某一元素
        var test = document.getElementsByTagName('li');
        console.log(test);

        var p = document.createElement('p');
        // console.log(document.createElement('p'));
        p.innerText = "你好,p标签";
        console.log(p);
        test[0].appendChild(p)



        // 3.部分操作方法
        /**
         * createElement  创建一个元素节点
         * 
         * appendChild    向一个元素节点的末尾添加一个元素节点
         * 
         * insertBefore   向一个元素节点前面添加一个元素节点
         * 
         * removeChild    移除一个元素节点下的某一个元素节点
         * 
         * replaceChild   将页面中的某一个节点替换掉
         */
    </script>
</body>

</html>

（2）DOM查询元素方法

<!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>
<script>
    window.onload = function () {
        // 1.id查找元素
        var first = document.getElementById('first');
        console.log(first);
        // 2.标签名查找元素
        var divs = document.getElementsByTagName('div');
        for (var index = 0; index < divs.length; index++) {

            console.log(divs[index]);
        }

        // 3.类名查找元素
        var divclass = document.getElementsByClassName('a');
        console.log(divclass);

        //4.querySelector选中元素
        var third = document.querySelector(".third");
        console.log('4:' + third);

        // 5.根据选择器返回所有对象集合
        var one=document.querySelectorAll("#one");
        console.log(one);

        // 6.获取body元素
        var body=document.body;
        console.log(body);
        // 7.获取html元素
        var html=document.documentElement
        console.log(html);


    }




</script>

<body>
    <div id="first">我是第一个元素</div>
    <div class="a">我是第二个元素</div>
    <div class="third">我是第三个元素</div>
    <div id="one">我是第四个元素</div>
    <div id="one">我是第五个元素</div>
    <div>我是第六个元素</div>
</body>

</html>

（3）DOM元素的其他操作

<!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>
<script>
    window.onload = function () {
        var father = document.querySelector(".father");
        // 1.创建一个元素
        var div = document.createElement("div");
        div.innerText = "我是小儿砸";
        // 2. 向一个元素节点的末尾追加一个节点
        // father.appendChild(div);

        // 3. 向某一个节点前插入一个节点
        father.insertBefore(div, father.childNodes[0]);

        // 4.移除某一节点下的某一个节点
        var span = document.querySelector(".outer")
        father.removeChild(span)

        
        // 5.   将页面中的某一个节点替换掉
        var box = document.querySelector('.box');
        var inner = document.querySelector('.inner');
        var p1 = document.createElement('p');
        p1.innerText = '我是干儿砸';

        box.replaceChild(p1, inner);


    }
</script>

<body>
    <div class="father">
        <div class="son">我是大儿砸</div>
        <div class="son">我是二儿砸</div>
        <div class="son">我是三儿砸</div>
        <div class="son">我是四儿砸</div>
        <span class="outer">我是外人</span>
        <div class="box">
            <p class="inner">我是亲戚</p>
        </div>

    </div>

</body>

</html>

weixin_45987479

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript在web页面中的使用

嵌入动态文本于HTML页面。对浏览器事件做出响应。读写HTML元素。在数据被提交到服务器之前验证数据。 1.DoM-文档对象模型：（1）文档节点（2）查询获取元素方法（3）部分操作法 2.BOM-浏览器对象模型是一种解释性脚本语言（代码不进行预编译）主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离跨平台特性，绝大多数浏览器支持JavaScript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运
复制链接

扫一扫