JavaScript（JS）获取元素、改变元素的内容、修改属性

淡淡的烟草味﹌ 2022-12-21 13:59 401阅读 0赞

# 文档对象模型DOM #

文档对象模型DOM是W3C组织推荐的处理可扩展标记语言的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

### 根据ID获取元素 ###

使用getElementByld()方法可以获取带有ID的元素对象。

<body>
        <div id="time">
            2020.11.15
        </div>
        <script>
        	var timer = document.getElementById('time');
            console.log(timer);
            console.log(typeof timer);
            console.dir(timer);
        </script>
    </body>

文档页面从上往下加载，所以的 得现有标签，因此script写在标签 下面。

get获得element元素by通过驼峰命名法

参数id是大小写敏感的字符串

返回的是一个元素对象

console.log 可以打印返回的元素对象，更好的查看里面的属性和方法。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]

### 根据标签名获取元素 ###

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。

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

返回一个对象的集合，可以返回其中某一个，也可以遍历得到全部。

如果页面中只有一个<li>,返回的还是一个伪数组，如果页面中没有这个标签，返回的是空的伪数组。

--------------------

可以定父元素来获取标签名

<body>
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
        <ol>
            <li>1111111111</li>
            <li>2222222222</li>
            <li>3333333333</li>
        </ol>
        <script>
        	var ol = document.getElementsByTagName('ol');
            console.log(ol[0].getElementsByTagName('li'));
        </script>
    </body>

### HTML5新增获取元素的方式 ###

1.  getElementsByClassName根据类名获得某些元素集合。

<body>
        <div class='box'>
           盒子1
        </div>
        <div class='box'>
            盒子2
        </div>
        <div id='nav'>
            <ul>
                <li>首页</li>
                <li>产品</li>
            </ul>
        </div>
        <script>
        	vars boxs = document.getElementsByClassName('box');
            console.log(boxs);
        </script>
    </body>

1.  document.querySelector(‘选择器’)根据指定选择器返回第一个元素对象。切记里面的选择器需要加符号。
    
    例如：`var firstBox = document.querySelector('.box');`选择类元素，或者`var nav = document.querySelector('#nav')`选择ID元素。
2.  document.quarySelectorAll(‘选择器’)根据指定元素返回所有元素对象。 切记里面的选择器需要加符号。

### 获取body和html元素 ###

获取body 元素

var bodyEle = document.body;
    console.log(bodyEle);

获取html元素

var htmlEle = document.ducomentElement;
    console.log(htmlEle);

### 事件基础 ###

JavaScript使我们有能力创建页面，而事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript的事件。

事件由三部分组成，分别为事件源、事件类型和事件处理程序。也称为事件三要素。

事件源：事件被触发的对象。

`var btn =document.getElementById('btn');`

事件类型：如何触发，比如鼠标经过还是鼠标点击。

事件处理程序：通过一个函数赋值的方式完成。

<button id="btn">
        按钮
    </button>
    <script>
    var btn = document.getElementById('btn');
    btn.onclick = function(){
         
        alert('你点击了按钮');
    }
    </script>

点击按钮，则会弹出“你点击了按钮”的提示框。

执行事件的步骤：

1. 获取事件源
    2. 注册事件（绑定事件）
    3. 添加事件处理程序

### 操作元素 ###

JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。

##### 改变元素的内容 #####

`element.innerText`从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

`element.innerHTML`起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行。

innerText不识别HTML标签，innerHTML识别HTML标签。这两个属性是可读写的。

<body>
        <button>
            显示系统当前时间
        </button>
        <div>
            某个时间
        </div>
        <script>
        	var btn = document.querySelector('button');
            var div = document.querySelector('div');
            btn.onclick = function(){
         
                div.innerText = getDate();
            }
            
            function getDate(){
         
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth()+1;
                var dates = date.getDate();
                var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
                var day = date.getDay();
                return '今天是'+year+'年'+month+'月'+dates+'日'+arr[day];
            }
        </script>
    </body>

![在这里插入图片描述][20201116160020124.png_pic_center]

运行后，显示某个时间，当点击显示系统当前时间即可显示进当前的日期及星期。

![在这里插入图片描述][20201116160034344.png_pic_center]

##### 修改元素的属性 #####

<body>
        <button id="ldh">
            刘德华
        </button>
        <button id="zxy">
            张学友
        </button>
        <img src="images/ldh.jpg" alt="" title="刘德华">
        
        <script>
            //获取元素属性
        	var ldh = document.getElementById('ldh');
            var zxy = document.getElementById('zxy');
            var img = document.querySelector('img');
            
            //注册事件   处理程序
            zxy.onclick =function(){
         
                img.src = 'images/zxy.jpg';
                img.title ='张学友';
            }
            ldh.onclick = function(){
         
                img.src = 'images/ldh.jpg';
                img.title = '刘德华';
            }
        </script>
    </body>

运行程序出现两个按钮"刘德华"，"张学友"和一张刘德华的图片，点击张学友，图片变成张学友的图片，鼠标放上面显示张学友，点击刘德华，图片变成刘德华的图片，鼠标放上面显示刘德华。

##### 修改表单属性 #####

<body>
        <button>
            按钮
        </button>
        <input type="text" value="输入内容">
        <script>
        	var btn = document.querySelector('button');
            var input = document.querySelector('input');
            btn.onclick = function(){
         
                input.value = '被点击了';
                this.disabled = true;
            }
        </script>
    </body>

![在这里插入图片描述][20201116160148186.png_pic_center]

程序运行后，显示按钮和输入内容的文本框，点击按钮后，按钮会变成无法再次点击的样式，文本框里面内容会进行更改。

![在这里插入图片描述][20201116160208705.png_pic_center]

##### 修改样式属性 #####

element.style修改行内式操作，element.className修改类名样式属性

<head>
    	<style>
            div {
         
                width:200px;
                height:200px;
                background-color:pink;
            }
    	</style>
    </head>
    <body>
        <div>
            
        </div>
        <script>
        	var div = document.quertSelector('div');
            div.onclick = function(){
         
             this.style.backgroundColor = 'purple';
             this.style.width='300px';
            }
    
        </script>
    </body>

程序运行后，出现一个宽高均为200像素的粉红色盒子，点击盒子，变成宽300像素高200像素的紫色盒子。JS修改style样式操作，产生的是行内样式。

##### 使用className更改样式属性 #####

<head>
        <style>
            div {
         
                width:100px;
                height:100px;
                background-color:pink;
            }
            .change {
         
                width:200px;
                height:200px;
                background-color:purple;
            }
        </style>
    </head>
    <body>
        <div>
           文本    
        </div>
        <script>
        	vet test =document.querySelector('div');
            test.onclick = function(){
         
                //将当前元素的类名改为change
              this.className = 'change';  
            }
        </script>
        
    </body>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/0e23f8513b304c1c9279d61e7b748354.png
[20201116160020124.png_pic_center]: /images/20221120/1ce03a14ca1e4e209511bb8b9ddbd697.png
[20201116160034344.png_pic_center]: /images/20221120/25b9f371ede143e7bf3baeaba6393f5c.png
[20201116160148186.png_pic_center]: /images/20221120/48dec9659a9f4e6f9858b2cc99693418.png
[20201116160208705.png_pic_center]: https://img-blog.csdnimg.cn/20201116160208705.png#pic_center