关于Web APIs中的DOM操作——获取元素、操作元素

最新推荐文章于 2024-06-21 08:52:31 发布

wutong_jun

最新推荐文章于 2024-06-21 08:52:31 发布

阅读量194

点赞数

分类专栏： JavaScript 文章标签： css js javascript

本文链接：https://blog.csdn.net/wutong_jun/article/details/107347494

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

获取元素

DOM在我们实际开发中主要用来操作元素。那么该如何来获取页面中的元素呢?
获取页面中的元素可以使用以下几种方式:

根据ID获取
根据标签名获取
通过HTML5新增的方法获取
特殊元素获取

根据ID获取

使用getElementById()方法可以获取带有ID的元素对象。
语法: var element = document.getElementById(id);

element是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.
ID是大小写敏感的字符串，代表了所要查找的元素的唯一ID.
返回一个匹配到 ID 的 DOM Element 对象。若在当前 Document 下没有找到，则返回null

<body>
<div id="get">获取带有ID的元素对象</div>
<script>
    var get = document.getElementById('get');
    get.style.color = 'red';
</script>
</body>

根据标签名获取

使用getElementsByTagName0方法可以返回带有指定标签名的对象的集合。
语法：document.getElementsByTagName ( '标签名');

<script>
    var lis = document.getElementsByTagName('li');
    for(var i = 0;i < lis.length;i++){
        console.log(lis[i]);
    }
</script>

注意:

因为得到的是一个对象的集合,所以想要操作里面的元素就需要遍历。
得到元素对象是动态的,如果 li 里面内容变化,获取来的内容也会跟着变化
如果页面中只有一个 li 返回的还是伪数组的形式
如果页面中没有这个元素返回的是空的伪数组的形式

还可以获取某个元素(父元素)内部所有指定标签名的子元素。element.getElementsByTagName ('标签名') ;

注意: 元素必须是单个对象(必须指明是哪一个元素对象).获取的时候不包括父元素自己。

<script>
    var ul = document.getElementsByTagName('ul');//得到一个伪数组
    console.log(ul.getElementsByTagName('li'));//报错，element必须是单个元素
    // 正确写法，给ul 添加一个ID名
    var ul = document.getElementById('get');
    console.log(ul.getElementsByTagName('li'));
</script>

通过HTML5新增的方法获取

根据类名返回元素对象集合
语法：var elements = document.getElementsByClassName(names) ;

names是一个字符串，表示要匹配的类名列表；类名通过空格分隔
getElementsByClassName 可以在任何元素上调用，不仅仅是document。调用这个方法的元素将作为本次查找的根元素.

返回指定选择器的第一个元素对象（常用方法）
语法：var element = document.querySelector(selectors);

selectors是一组用来匹配element 后代元素的选择器.
里面的选择器需要加符号，如".nav" 、"#nav"

返回指定选择器的所有元素对象
语法：var element = document.querySelectorAll(selectors);

特殊元素获取

获取body元素: doucument.body ; 返回body元素对象
获取html元素: document.documentElement; 返回html元素对象

操作元素

改变元素内容

element.innerText从起始位置到终止位置的内容但它去除html标签，同时空格和换行也会去掉
element.innerHTML起始位置到终止位置的全部内容,能识别html标签,同时保留空格和换行，W3C推荐标准

var sp = document.querySelector('span');
sp.innerHTML = '<strong>我是</strong>：   标签';
console.log(sp.innerText);
console.log(sp.innerHTML);

效果显示：

在这里插入图片描述

常用元素的属性操作

修改元素属性，如图片的src、链接的href、id、alt、title

<script >
        var btn = document.querySelector('button');
        var img = document.querySelector('img');
        //点击按钮  切换图片
        btn.addEventListener('click',function () {
            img.src = 'images/picture.png';
        })
</script>

表单元素的属性操作

利用DOM可以操作如下表单元素的属性: type、value、checked、 selected、 disabled 。不能用innerHTML，表单里面的值或者文字是通过value修改的

<script>
     var btn = document.querySelector('button');
     var inp = document.querySelector('input');
     btn.onclick = function () {
        inp.value = '内容已提交';
        this.disabled = true;//表单被禁用，不能再点击
        //this指向的是事件函数的调用者 btn
    }
 </script>

样式属性操作

我们可以通过JS修改元素的大小、颜色、位置等样式。

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

<script>
        var div = document.querySelector('div');
        div.addEventListener('click',function () {
	        div.style.backgroundColor = 'red';//给div添加背景颜色
	        div.className = 'nav'; //给div添加类名，之前的类名会被覆盖
        }
</script>

注意:

JS里面的样式采取驼峰命名法比如fontSize、backgroundColor
JS修改style样式操作,产生的是行内样式, Css权重比较高
如果样式修改较多,可以采取操作类名方式更改元素样式。
class因为是个保留字,因此使用className来操作元素类名属性
className会直接更改元素的类名,会覆盖原先的类名。
如果想要保留原来的样式,可以使用多类名选择器

排他思想

如果有同一组元素,我们想要某一个元素实现某种样式,需要用到循环的排他思想算法:

所有元素全部清除样式(干掉其他人)
给当前元素设置样式(留下我自己)

<script >
    var btns = document.getElementsByTagName('button');
    //btns得到的是一个伪数组  要循环给每一个按钮添加点击事件
    for(var i = 0;i < btns.length;i++){
        btns[i].addEventListener('click',function () {       
	        for (var j = 0;j <btns.length;j++){
	              btns[j].style.backgroundColor = '';// 循环先去掉所有按钮背景颜色
	        }
	        this.style.backgroundColor = 'red';//留下当前按钮背景颜色
        })
    }
    </script>

效果显示：
在这里插入图片描述

自定义属性的操作

获取属性值

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

设置属性值

element.属性= '值' 设置内置属性值。
element. setAttribute('属性'，'值');主要设置自定义的属性 ( 标准)

移除属性

element. removeAttribute(‘属性’) ;

<script >
    var div = document.querySelector('div');
    console.log(div.id);// element.属性 获取属性值
    console.log(div.getAttribute('index'));//element.getAttribute获取自定义属性
    div.id = 'test';//element.属性 = '值'  设置元素属性值
    div.setAttribute('index', 2);//element. setAttribute('属性'，'值');设置自定义属性
    div.removeAttribute('index');//移除属性
</script>

H5自定义属性

自定义属性目的: 为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。自定义属性获取是通过getAttribute(‘属性’)获取。但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性。所以H5规定自定义属性data开头做为属性名并且赋值

设置H5自定义属性
H5规定自定义属性data开头做为属性名并且赋值。
比如<div data-index=“1" > </div>或者使用JS设置element.setAttribute(‘data-index’, 2)
获取H5自定义属性

兼容性获取element.getAttribute( 'data-index' );
H5新增 element.dataset.index或者element.dataset[ 'index'] 但这个要 ie 11才开始支持

wutong_jun

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于Web APIs中的DOM操作——获取元素、操作元素

DOM主要用来操作元素。那么该如何来获取页面中的元素呢?可以使用以下几种方式:根据ID获取，根据标签名获取，通过HTML5新增的方法获取，特殊元素获取如何操作元素1.改变元素内容2. 常用元素的属性操作3.表单元素的属性操作4.样式属性操作5.H5自定义属性。如果有同一组元素,我们想要某一个元素实现某种样式,需要用到循环的排他思想算法:1. 所有元素全部清除样式(干掉其他人)2. 给当前元素设置样式(留下我自己)
复制链接

扫一扫