DOM获取页面中标签的方式 DOM操作之设定标签属性 DOM循环问题 DOM操作之标签的样式特殊标签的获取获取元素占位

最新推荐文章于 2024-06-11 16:06:12 发布

Allen·赵

最新推荐文章于 2024-06-11 16:06:12 发布

阅读量541

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/zqlbanzhuan/article/details/108920869

版权

js 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

本文详述了DOM操作中的标签获取方法（ID、Class、标签名、属性值），并介绍了如何设定和获取标签属性，处理循环问题，以及操作标签样式。涵盖了querySelector和querySelectorAll的使用，以及针对不同浏览器的兼容性处理。

摘要由CSDN通过智能技术生成

DOM操作

<div id="div1">我是div1</div>

<div class="div2">我是div2</div>

<span name="s">我是span1</span>
<span name="s">我是span2</span>
<span name="s">我是span3</span>
<span name="s">我是span4</span>

<br>
<input type="text">
<input type="text">
<input type="text">
<input type="text">

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<script>
    // DOM操作    文档对象模型
    // 操作HTML文档

// 获取页面中标签的方式

    // (1)  通过 id属性值获取 标签对象
    // document.getElementById('id属性值') 
    // 执行结果,只能获取一个标签对象
    // 注意,id属性值,一定要有引号
    //      HTML中,id属性值一定不能重复设定

    // var oDiv1 = document.getElementById('div1');
    // console.log(oDiv1);


    // (2)  通过 class属性值 获取标签对象
    // document.getElementsByClassName('class属性值')
    // Elements 之后有一个s表示复数
    // class属性,在JavaScript中,一律定义为 className
    // class关键词用在其他功能上
    // 执行结果,获取到的是,一个伪数组
    // 即时只有一个符合条件的标签,获取到也是一个数组
    // 数组的单元,是符合条件的标签
    // 可以通过索引下标,来获取魔某一个标签对象
    // 不能被 forEach() 循环遍历

    // var oDiv2 = document.getElementsByClassName('div2');
    // console.log(oDiv2);
    // console.log(oDiv2[0]);

    // 不能被forEach()循环
    // oDiv2.forEach(function(v){
    //     console.log(v);
    // })

    // (3) 通过 标签名称 获取标签对象
    // document.getElementsByTagName('标签名称');
    // 获取到是一个伪数组
    // 数组的单元是符合条件的标签
    // 不能被forEach()循环遍历

    // var oDiv3 = document.getElementsByTagName('div');
    // console.log(oDiv3);

    // oDiv3.forEach(function(v){
    //     console.log(v);
    // })

    // (4) 通过 标签name属性的属性值 获取标签对象
    // document.getElementsByName('标签name属性的属性值')
    // 获取到的结果是一个伪数组
    // 数组内容是符合条件的标签
    // 可以被forEach()循环遍历

    // var oSpan = document.getElementsByName('s');
    // console.log(oSpan);

    // oSpan.forEach(function(v){
    //     console.log(v);
    // })

    // 推荐方法
    // (5) 通过 只要是符合语法规范的方式 就能获取到标签对象
    // document.querySelector()     获取符合条件的第一个标签
    // document.querySelectorAll()  获取符合条件的所有标签
    // 所有标签是一个数组,可以被forEach() 循环遍历

    // 低版本ie不兼容这两种方式

    // 通过标签的id属性值来获取,要记得写 # 号
    var oQuery1 = document.querySelector('#div1');
    console.log(oQuery1);

    // 通过标签的class属性值来获取,要记得写 . 号
    var oQuery2 = document.querySelector('.div2');
    console.log(oQuery2);

    // 通过标签的标签名称来获取
    // 只获取第一个div标签
    var oQuery3 = document.querySelector('div');
    console.log(oQuery3);
    // 获取所有div标签
    var oQuery4 = document.querySelectorAll('div');
    console.log(oQuery4);

    // 通过属性和属性值获取
    // 语法 : ('[属性="属性值"]') 

    // 获取name属性值是s的标签
    var oQuery5 = document.querySelectorAll('[name="s"]');
    console.log(oQuery5);

    // 获取type属性值是text的标签
    var oQuery6 = document.querySelectorAll('[type="text"]');
    console.log(oQuery6);
    
    // 还可以通过标签结构,获取
    // ul标签中,子级li标签
    // 只要是css语法支持的选择器语法都行
    // 父子,后代,兄弟....都支持
    var oQuery7 = document.querySelectorAll('ul>li');
    console.log(oQuery7);
</script>

DOM操作之设定标签属性

<body>
<div>我是div</div>

<script>
    // 给标签添加属性   
    // 标签对象.setAttribute('属性名称' , 属性值);
    // 一次只能定义一个属性,如果要定义多个属性,要执行多次

    // 获取标签属性的属性值
    // 标签对象.getAttribute('属性名称');
    // 获取到的结果,都是字符串类型

    var oDiv = document.querySelector('div');

    // 给 div 标签,添加属性index 属性值是0
    oDiv.setAttribute('index' , 0);
    oDiv.setAttribute('key' , '第一个div');

    // 获取标签属性的属性值
    console.log( oDiv.getAttribute('index') ); 


    // 几个特殊的属性设定方式
    // id属性  class属性  直接定义在标签对象上的方法
    // 可以直接定义或者获取,不同通过 get ,set
    console.dir(oDiv)

    // 标签对象.id = 属性值   设定id属性的属性值
    oDiv.id = 'div1';

    // 标签对象.className = 属性值   设定class属性的属性值
    oDiv.className = 'div2';

    // 标签对象.id   获取标签对象,id属性值
    console.log( oDiv.id )

    // 标签对象.className   获取标签对象,class属性值
    console.log( oDiv.className )

    // 直接操作name属性, 并不是所有的浏览器都支持的
    // 使用set,get最安全 
    oDiv.name = '张三';
    console.log(oDiv.name);

    // 总结
    // 1,可以通过 setAttribute() 设定标签所有的属性 包括 id , class
    //   可以通过 getAttribute() 所有标签所有的属性的属性值 包括 id , class
    //   所有的属性,设定或者获取,都建议,通过set,get完成

    // 2,id和class属性可以直接通过 标签对象.id和标签对象.className
    //   来设定或者获取

    // 3,根据不同版本的浏览器,有一些不在标签对象本身属性上的,也可以直接设定
    //   例如 name , titile
    //   但是因为浏览器兼容问题,推荐还是使用set,get  

    // 4,这里属性值的设定,是替换操作,会覆盖之前的设定属性
    //   而不是新增添加属性操作      

</script>

DOM循环问题

<div>我是div</div>

<ul>
    <li index="1">我是第一个</li>
    <li index="2">我是第二个</li>
    <li index="3">我是第三个</li>
    <li index="4">我是第四个</li>
</ul>

<script>
    // 解决demo中的一些问题

    // 1, onclick 中 关于this的问题

    // 给所有的li标签,添加点击事件
    // 输出不同的具体内容

    var oLis = document.querySelectorAll('li');

    // 方法1 , forEach()循环
    // forEach 是一个特殊的循环
    // 每次都建立一个不同的,特殊的变量,存储的是相互不影响的,独立的数据
    // 因此,item变量,可以在点击事件中直接使用
    // item.getAttribute('index')   this.getAttribute('index')

    // oLis.forEach(function(item){
    //     item.onclick = function(){
    //         // 事件中
    //         // itme可以直接使用,获取触发点击事件的标签的属性
    //         console.log( item.getAttribute('index') );
    //     }
    // })

    // 法法2 , for循环  for...in
    // for循环只有一个变量,存储数据是重复赋值
    // 最终调用的是 循环变量的最终数据
    // 点击事件中,必须要使用this  this.getAttribute('index')
    // 如果使用 oLis[i].getAttribute('index') 会报错
    // 

    // for(var i = 0 ; i <= oLis.length-1 ; i++){
    //     oLis[i].onclick = function(){
    //         // 事件中
    //         console.log( this.getAttribute('index') );
    //     }
    // }

    // 总结
    // 在循环遍历中,因为 forEach  和  for / for...in
    // 在存储变量上的区别
    // 给伪数组中的标签对象添加事件时

    // 在事件中:  forEach      可以使用 参数1 , 也可以使用this

    //          for/for...in  只能使用this方法,不能使用 伪数组[下标]

    // 问题2:
    //    不使用标签本身定义的属性值,就使用索引下标是不是可行?

    // 咱们现在的demo还比较简单,数据都是我们本地设定的数据
    // 而不是数据库的数据
    // 今后数据库的数据,比较复杂,在标签中定义的也不是索引下标
    // 会是数据库中,数据的一些,其他属性
    // 这个属性与索引下标就没有关系了,就不能使用索引下标替换


    // oLis.forEach(function(item,key){
    //     item.onclick = function(){
    //         // 没有使用标签本身定义的属性的属性值
    //         // 使用的是索引下标
    //         console.log(key+1);
    //     }
    // })
            
    // 给同一个标签,添加多个类型相同的事件,
    // 只会执行最后一个事件
    // 原理:后定义的事件会覆盖,先定义的事件
    // 如果非要定义多个类型相同的事件
    // 咱们之后讲

    var oDiv = document.querySelector('div');

    // oDiv.onclick = function(){
    //     console.log('我是第一个点击事件触发的程序');
    // }

    // oDiv.onclick = function(){
    //     console.log('我是第二个点击事件触发的程序');
    // }

    // 之后会详细讲
    oDiv.addEventListener('click' , function(){
        console.log('我是第一个')
    })

    oDiv.addEventListener('click' , function(){
        console.log('我是第二个')
    })
</script>

DOM操作之标签的样式

   <style>
    div{
        font-size: 50px;
        color: green;
    }
</style>

北京

<script>
    // DOM操作之标签的样式

    // 1,给标签设定样式
    // 标签对象.style.属性 = 属性值

    // 2,获取标签设定的样式
    // 标签对象.style.属性


    var oDiv = document.querySelector('div');
    // 通过 标签对象.style.属性 = '属性值'
    // 设定的是标签的行内样式
    // oDiv.style.color = 'red';

    // 获取样式

    // 行内样式,正确获取
    console.log( oDiv.style.color );
    console.log( oDiv.style.background );
    // 非行内样式,获取的结果是空字符串
    console.log( oDiv.style.fontSize );


    // 获取标签执行的样式属性
    // 不管行内还是非行内,获取的是,最终执行的样式属性值
    // 例如: 外部样式,被行内样式优先级 覆盖, 
    // 获取的结果,就是最终执行的 行内样式

    // 一般浏览器 值得是 非低版本IE浏览器
    // window.getComputedStyle(标签对象).属性

    // 低版本IE浏览器方法
    // 标签对象.currentStyle.属性
    
    // 获取的是标签最终执行的样式的属性值
    // 如果是颜色,获取的是 rgb() 的形式

    // console.log(window.getComputedStyle(oDiv).fontSize);
    // console.log(window.getComputedStyle(oDiv).color);

    // console.log(oDiv.currentStyle.fontSize);

    // 兼容处理方案
    // 不能像之前,做 || 逻辑赋值
    // 因为此时是JavaScript报错,会终止之后程序的执行
    // 兼容处理方法是 使用 if判断
    // 如果 window.getComputedStyle 这种方法没有,执行结果是 undefined  没有这个方法
    // 如果 window.getComputedStyle 这种方法有,就会有一个返回值
    
    // if( window.getComputedStyle )

    //   如果 window.getComputedStyle 没有 结果是 undefined 
    //       if( undefined )  --->  if( false )
    //       就调用  标签对象.currentStyle.属性
    //   如果 window.getComputedStyle  有  结果是 有内容的
    //       if( 有内容 ) --->  if( true )
    //       就调用 window.getComputedStyle 这个方法

    //   使用if判断,始终只会有一种方法被调用执行,
    //   是支持的,有的方法,会被执行
    //   没有的方法,不会执行,就不会报错

    // 不支持的浏览器会报错,影响之后的程序的执行
    // var res = window.getComputedStyle(oDiv).fontSize ||  oDiv.currentStyle.fontSize;
    
    // 使用if方法,只有支持的才会执行,不支持的不会执行,不会有报错

    if(window.getComputedStyle){
        // 支持 window.getComputedStyle 的会执行这里的代码
        // 一般浏览器会执行这里的代码
        var res = window.getComputedStyle(oDiv).fontSize;
    }else{
        // 不支持 window.getComputedStyle 的会执行这里的代码
        // 低本IE浏览器,会执行这里的代码
        var res = oDiv.currentStyle.fontSize;
    }

    console.log(123);

特殊标签的获取

    // 特殊标签的获取方式
    // 不是写在body内的标签

    // body标签
    // document.body
    console.log(document.body);

    // head标签
    // document.head
    console.log(document.head);

    // titile标签
    // document.title
    console.log(document.title);

    // html标签
    // document.documentElement
    console.log(document.documentElement);

获取元素占位符

<style>
    *{
        margin: 0;
        padding: 0;
    }

    div{
        width: 100px;
        height: 10px;
        margin: 20px;
        padding: 40px;
        border:1px solid black;
        /* box-sizing: border-box; */
    }
</style>
</head>
<body>
<div></div>

<script>
    // DOM操作之获取元素占位

    // 1,获取元素占位 --- css样式占位,盒子模型
    // 宽度,高度,marging,padding,border
    // 可以通过标签样式,来获取
    // 获取到的结果,是属性值,有px单位
    // 去除px单位的方法 ? 

    var oDiv = document.querySelector('div');
    console.log(window.getComputedStyle(oDiv).width);
    console.log(window.getComputedStyle(oDiv).height);

    // 2,其他方式
    // offsetHeight   offsetWidth
    // 高/宽 + padding + border

    // clientHeight   clientWidth
    // 高/宽 + padding

    // clientLeft   clientTop
    // 左/上 border

    // offsetLeft   offsetTop
    // 左/上 margin


    // 如果设定了  box-sizing: border-box;
    // 边框线,margin的数据是不受影响的

    // clientHeight   clientWidth 
    // 高/宽 + padding --->  width/height - border
    // 实际就是 定义 width/height - border


    // offsetHeight   offsetWidth
    // 高/宽 + padding + border ---> width / height
    // 实际就是 定义的 width / height 数值
     
    console.dir(oDiv)

    // 边框线和外边距不能设定,要通过style来设定

    // 也是不能设定的
    oDiv.offsetHeight = '300px';
    oDiv.clientHeight = '300px';

    // 不能设定
    oDiv.clientLeft = '100px';
    oDiv.offsetLeft = '100px';

    // style可以设定  boder 和 margin
    oDiv.style.borderLeft = '100px solid red';
    oDiv.style.marginLeft = '100px';

    // 如果非要设定,之后有方法解决
</script>

Allen·赵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM获取页面中标签的方式 DOM操作之设定标签属性 DOM循环问题 DOM操作之标签的样式特殊标签的获取获取元素占位

DOM操作<div id="div1">我是div1</div><div class="div2">我是div2</div><span name="s">我是span1</span><span name="s">我是span2</span><span name="s">我是span3</span><span name="s">我是span4</span&
复制链接

扫一扫