JavaScript_DOM-03

于 2025-05-19 08:51:30 发布
阅读量118 收藏
点赞数 1
文章标签： javascript 开发语言 ecmascript css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_75134325/article/details/148054711
版权

DOM_ID值获取：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

       /* 我们之前就是通过 .box-1去修改样式 那么js也一样的 */


    </style>
</head>
<body>

    <div class="box-1">1</div>
    <div class="box-1">1</div>
   
    <span>文本</span>
    <button id="btn">登录</button>

    <div class="father">
        <div class="child"></div>
    </div>





    
</body>

<script>
    // JS配合浏览器  DOM在开发中主要是用于操作元素（标签） JS实时动态变化，配合css修改样式。特别是一些点击事件效果
    // 帮用户解决视觉效果
    // 1.我如果想修改某个目标的元素样式等，我是不是必须得想办法拿到这个目标
    // 获取dom
    // DOM对象都是基于document对象（属于浏览器的内置对象，JS代码写完生效）
    // 标签被映射到JS里面的dom对象类型
    

    // 通过class获取 因为上面的div以div命名 
    var divDom=document.getElementsByClassName('box-1');
    // 那么我们打印一下 我们发现 得到伪数组 那么可以拥有这个伪数组的内置方法 但是不能被forEarch（带有s复数形式 可以获取到单个或多个）
    console.log(divDom);
    console.log(divDom.length);


    // 通过ID获取 得到的是button对象#ID（得到指定DOM对象） 单独的
    var loginBtn=document.getElementById('btn')
    console.log(loginBtn);

    // 元素获取 
    var spanDom=document.getElementsByTagName('span')
    console.log(spanDom);
    console.log('-------------');
    


    // 但是以上三种不怎么用，现在用这种书写形式 和 css选择的时候一样 也有父子级
    // css选择器 只返回匹配到的第一个元素
    var divOne=document.querySelector('.box-1')
    console.log(divList);
    // querySelectorAll: 节点列表（更贴近数组 可以forEarch）
    var divList=document.querySelectorAll('.box-1')
    console.log(divList);
    // 函数参数没有传实参得到的是undefined值 每一个dom对象都被我遍历出来
    console.log(divList.forEach(function (emelement) {
        
        console.log(emelement);
        
    }));
    // 区分：看是否要拿到一个还是多个


    // 现在一个div里面嵌套另一个div 现在要获取子级
    console.log(document.querySelector('.father .child'));
</script>
</html>

DOM_修改属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box
        {
            width: 100px;
            height: 100px;
            background-color: aqua;
            
        }
        .active
        {
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            border: 1px solid black;
        }
    </style>
</head>
<body>


    <div class="box"></div>
    




</body>
<script>

// 重点   在Dom中，标签都被理解成为一个对象（Object），拥有各种属性和方法，可以通过Js获取、修改，包括事件也可以看成是对标签属性赋值。
// 别忘记小数点
   var getBox=document.querySelector('.box')
   console.log(getBox);
//    表示标签又多了一个属性名 id有值也会被修改
   getBox.id='box-another-name'

//    同等的，我们也可以修改这个box属性名通过.classname .class是关键字 记住这个class名字变了那么之前的样式就可能发生改变 消失不见也有可能
   getBox.className='box-1'
//    换成我们定义好的active名称，实时根据类名自动捆绑上去
   getBox.className='active'
   

</script>
</html>

DOM_修改样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box
        {
            width: 100px;
            height: 100px;
            background-color: aqua;
            
        }
        .active
        {
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            border: 1px solid black;
        }
    </style>
</head>
<body>


    <div class="box"></div>
    




</body>
<script>

// 重点   在Dom中，标签都被理解成为一个对象（Object），拥有各种属性和方法，可以通过Js获取、修改，包括事件也可以看成是对标签属性赋值。
// 别忘记小数点
   var getBox=document.querySelector('.box')
   console.log(getBox);
//    表示标签又多了一个属性名 id有值也会被修改
   getBox.id='box-another-name'

//    同等的，我们也可以修改这个box属性名通过.classname .class是关键字 记住这个class名字变了那么之前的样式就可能发生改变 消失不见也有可能
   getBox.className='box-1'
//    换成我们定义好的active名称，实时根据类名自动捆绑上去
   getBox.className='active'
   

</script>
</html>

DOM_操作元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>





    </style>
</head>
<body>
    
    <div class="con">47932939232</div>

    <input type="text" value="请输入您的文本内容" aria-checked="">

</body>
<script>
    
    // 现在是一个对象 标签的所有信息都对应到这个JS里的对象里，都有自己的属性 现在是对象的键值对
    var updateDom=document.querySelector('.con')
    // 先打印看是否有拿到该标签
    // console.log(updateDom);
    // console.log([updateDom]);

    // innnerText:修改内容
    updateDom.innerText='被我黑掉了'
    // innnerHtml也可以修改内容（可修改节点内容，我们所有的标签其实就是一个节点，每个标签有两个节点，一个文本节点，另一个为元素节点（子标签）。
    // innerText只会改文本，都当作文本。
    // innerHTML:会把文字放到文本节点，如果有这种button节点（标签代码）会被挂到元素节点，并且会渲染成对应的标签
    // ）
    updateDom.innerHTML='dnsdskdms'
    // 这两者的区别就是 innnerHTML字符串里面有标签文本会把它变成标签渲染出来
    // 拿到的是标签里面的内容
    updateDom.innerHTML='被我攻ji了请点击<button>解开吧</button>'


    // 修改文本标签的输入值
    var inputDom=document.querySelector('input')
    console.log(inputDom);
    
    // 获取值 属性-值（直接访问属性）
    // 总结:所以标签的很多属性和效果在js里面也能够有对应的办法获取到
    console.log(inputDom.value);
    // 修改值
    inputDom.value='hnsdksmdsdsd'
</script>
</html>

数组array内置对象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // 声明一个数组，在JS引擎都是对象
    var arr=[1,2,34,54,3]

    // push 末尾插入(直接修改数组) 并返回最新长度值
    arr.push(199)
    console.log(arr.push(199));
    

    console.log(arr);

    // 末尾删掉 需要用新的变量接受 返回被删的元素
    var newarr=arr.pop()
    
    console.log(arr);
    
    console.log(newarr);

    // reverse 倒序
    var re=arr.reverse()
 
    console.log(re);

    // sort 排序 定义func规则 返回的是排序后的数组
    var so=arr.sort(function (a,b) {
         
        // 规则从小到大排序 b-a从小到大排序
        return a-b
    })
    

    console.log(arr);
    console.log(so);

    var stuList=[{name:'zs',age:12},{name:'ls',age:13},{name:'ww',age:14},{name:'zl',age:15}]
    
    console.log(stuList.sort(function (a,b) {
        // a b 拿到每一个数组的元素

        console.log(a);
        console.log(b);
        
        
        // 按年龄从小到大排序
        return a.age-b.age
    }));
    
    // indexof 查询是否存在哪一个元素 存在就返回该下标 与String有区别

    // JOIN 把每一个元素拼接成一个字符串 默认为，隔开
    // console.log(arr);
    // console.log(arr.join());
    // console.log(arr.join('-'));

    // forEarch 可以用来遍历数组 该匿名函数有三个形参 三个值为固定顺序（严格按照顺序）
    // 不是for循环 所以break 和continue无效  只能使用return和continue同等效果
    // 该函数称为回调函数（匿名函数的使用场景）
    arr.forEach(function (element,index,arr) {

        console.log('=======================');
        // 当前遍历项
        console.log(element);
        // 当前下标
        console.log(index);
        // 原数组
        console.log(arr);
        
    })

    // 只用到遍历项，以及下标
        arr.forEach(function (element,index) {

        console.log('-------------------------------');
        // 当前遍历项
        console.log(element);
        // 当前下标
        console.log(index);
      
    })
    // 记住前端的函数的形参严格按照顺序区分 而不是形参的名称
            arr.forEach(function (element,index) {

        if(index>2)
        return;        
        console.log('*************************');
        // 当前遍历项
        console.log(element);
        // 当前下标
        console.log(index);
      
    })


    // arr:splice的方法 帮我们删除元素(下标,删除个数(超出不报错)) 包括该下标
    // 返回被删除的数组
    // var spliceArr=arr.splice(2,3)
    // 
    console.log(spliceArr);
    // 三个参数以上先删后加 先删掉一个元素，然后加上10000 20000 30000
    var spliceArr=arr.splice(2,1,1000,2000,3000)
    console.log(spliceArr);
    
    console.log(arr);
</script>
</html>

String内置方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>

<script>

//   在js引擎里面 都是一个String对象
// 
   var names= " zsnjnjj nj "
   console.log(names.length);
//    可以用来遍历字符串取出每一位字符
   console.log(names.charAt(2));
//    从开头开始匹配是否含有zs组合在一起的字符 -1表示没有找到 n:表示z的位置索引 (第一次)
   console.log(names.indexOf('zm'));
//    从后往前找
   console.log(names.lastIndexOf('s'));

// 是否包含 返回true 或者false
   console.log(names.includes('zs'));

//    常用在需要对一堆字符串替换或删掉 并且替换掉后需要一个变量接收，否则不起作用
    var re=names.replace('zs','ls')
   console.log(re);
   console.log(names);

//    生成的是数组形式
   var split=names.split('n')
   console.log(split);
//    每个字母都被拎出来 代码层面上这个也可以拆分
   var split=names.split('')
   console.log(split);

// trim 去除头尾空白 常用用户输入空格
   var trim=names.trim()
console.log(trim);

暖苏
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值