web前端

发布日期: 2021-08-22

更新日期: 2021-09-11

文章字数: 2.3k

阅读时长: 8 分

阅读次数:

JavaScript组成之DOM元素操作

DOM简介

什么是DOM

文档对象模型(Document Object Model,简称DOM)是W3C组织推荐的处理可扩展标记语言（HTML或XML)的标准编程接口，比如对HTML标签浮动增删查改、修改css等。
JavaScript中是将所有对于HTML标签的操作相关api整合成了document对象。

发展

DOM 0级：在96年之前ie浏览器和⽹景浏览器为了抢夺市场，都分别实现了⼀套 JavaScript⽤于操作HTML的api。因为是分别实现的，没有标准，在正式dom标准出来之前，统称它们的相关api为dom0级
DOM 1级：98年w3c出台了第⼀版domapi的标准，基本ie8就使⽤了该标准。dom1级只能简单的操作HTML标签，⽐如提供 document.images 来获取⻚⾯上所有的<img>标签等。
DOM 2级：⽬前所有浏览器都⽀持的版本。增强了对⻚⾯的控制，以及添加了对css 的⽀持，以及事件的⽀持。ie9+
DOM 3级：⽬前所有浏览器都⽀持的版本，将api进⾏模块化，更⽅便管理和更新。

兼容性

DOM1级，ie8及以下
DOM2级和3级：ie9+、现代浏览器

DOM树

文档：一个页面就是一个文档，DOM中使用document来表示
元素：页面中的所有标签都是元素，DOM中使用element表示
节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node来表示
每个HTML标签都是⼀个节点，不仅如此，每个标签内部的属性和⽂本内容在 JavaScript中也会当成单独的⼀个节点存在。⽽⽂本节点则会作为其标签节点的⼦节点

DOM将以上内容都看作是对象

获取页面元素

根据标签ID属性获取

使用getElementById("id属性值")获取标签id为此属性值的标签

//语法
var 标签变量名=document.getElementById("id属性值")；//此处不需要写#

根据标签名获取

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

//语法
var 变量名 = document.getElementsByTagName("标签名");
//获取的是一个实时的集合对象,可以通过下标来查找和遍历
<ul>
    <li>等你好久</li>
    <li>知否知否</li>
</ul>
<script>
    // 1.返回的是获取过来元素对象的集合 以伪数组的形式存储
    var lis = document.getElementsByTagName('li');
    console.log(lis);
    console.log(lis[0]);
    // 2.依次打印,遍历
    for (var i = 0; i < lis.length; i++) {
        console.log(lis[i]);
    }
</script>

得到的对象是动态的，随着页面中标签的个数改变而改变

返回的是获取到的元素对象的集合，以伪数组的形式存储

若获取不到元素，则返回为空的伪数组

根据某个标签名下所有指定标签名的子元素

通过标签名获取某个元素(父元素)内部所有指定标签名的子元素，获取的时候不包含父元素自身
```
//语法
element.getElementsByTagName('标签名')；
//例：
ol.getElementsByTagName("li");
```
父元素必须是单个对象（必须指明是哪一个元素对象）

通过H5新增方法获取

getElementsByClassName

根据类名返回元素对象集合

document.getElementsByClassName('类名');

document.querySelector

根据指定的选择器返回第一个元素对象(标签)

document.querySelector('选择器');
// 切记里面的选择器需要加符号 
// 类选择器.box 
// id选择器 #nav
var box = document.querySelector('.box');

document.querySelectorAll

根据指定选择器返回所有符合css选择器要求的元素对象(标签)
```
document.querySelectorAll('选择器');
```
querySelectorAll返回一个NodeList类数组对象。是一个非实时的。可以通过下标来操作

直接获取特殊元素

document.body:快速获取当前页面的<body>标签
document.documentElement:快速获得当前页面的<html>标签
document.title:快速获得当前页面的标题文本
document.URL:获取当前页面的地址
document.write():向页面中写入内容或标签

操作元素(页面标签)

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

改变元素内容

针对双标签

innerHTML

语法

//获取
标签变量名.innerHTML
//修改
标签变量名.innerHTML =新数据;
//例子：修改id为box的标签的内容为一个src为img/id1.jpg的img标签
var box = document.querySelector("box");
box.innerHTML  ="<img src='img/id1.jpg'>";

innerText

语法

//获取
标签变量名.innerText
// 修改
标签变量名.innerText =新数据;
//例子：修改id为box的标签的内容为一个src为img/id1.jpg的img标签
var box = document.querySelector("box");
box.innerText  ="<img src='img/id1.jpg'>"; //会在页面上显示纯文本

针对表单标签 value

语法

// 获取
标签变量名.value
// 修改
标签变量名.value =新数据;
//例子：修改id为myinput的内容为123 
var input =  document.querySelector("myinput");
input.value = "123";

innerHTML和innerText的区别

innerHTML 、innerText 是针对双标签.value针对input、select、textarea以及其他带有value属性的标签

innerHTML获取标签内部的所有代码，包括子标签。而innerText获取的是该标签内部的所有文本(包括子标签的)

innerHTML设置会将字符串作为HTML标签来执行。而innerText会直接当做文本进行处理。

改变元素属性

获取元素属性

获取自定义属性值
```
标签变量名.getAttribute('属性名');
```
上面这种方式也可以获得元素本身自带的属性(标准)
获取内置属性值(元素本身自带的属性)
```
标签变量名.属性名;
```

设置属性值

设置内置属性值（旧版）

标签变量名.属性名 = '属性值';
// img.属性
img.src = "img/001.png";

设置自定义或内置属性值

element.setAttribute('属性名','属性值');
//例子：将id为box的标签它的class属性设置为item
var box = document.querySelector("#box");
box.setAttribute("class","item");

移除属性

element.removeAttribute('属性名');

改变CSS样式属性

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

获取样式属性值

通过调用window.getComputedStyle()来获取该标签的所有的css属性。
通过css属性名找到指定css属性的取值

//例子： 获取id为box的标签的宽度和高度
var box =  document.querySelector('#box');
var style = getComputedStyle(box,null);
var width = style.width;
var h = style.height;

设置CSS样式

行内样式操作

// element.style
div.style.backgroundColor = 'pink';
div.style.width = '250px';

类名样式操作：通过提前编写指定类名的css样式，再修改类名来设置样式

 
<div class="row">css样式</div>

<script>
element.className
//我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
div.className='change';
//如果想要保留原先的类名，我们可以这么做 多类名选择器
 div.className='row  change';
</script>

JS里面的样式采取驼峰命名法，比如 fontSize ，backgroundColor通俗来讲就是在css样式中由两个单词用-连接的，将-去掉之后，它后面的的单词首字母大写

JS 修改 style 样式操作，产生的是行内样式，CSS权重比较高

如果样式修改较多，可以采取操作类名方式更改元素样式

class 因为是个保留字，因此使用className来操作元素类名属性

className 会直接更改元素的类名，会覆盖原先的类名

排他思想

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

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下我自己）
注意顺序不能颠倒，首先干掉其他人，再设置自己

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        // 1. 获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        // btns得到的是伪数组  里面的每一个元素 btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                // (2) 然后才让当前的元素背景颜色为pink 留下我自己
                this.style.backgroundColor = 'pink';

            }
        }
        //2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们称为排他思想
    </script>
</body>

如何实现JavaScript中的动画

利用间隔定时器不断的改变标签的位置css属性.让其不断的改变，在页面上就会不断的缓慢移动。

setInterval(() => {    
    //修改标签的margin-top(在原来的基础之上进行修改)   
    //获取旧的 margin-top   
    var div = document.querySelector("#box");   
    var style = getComputedStyle(div,null);    
    var oldtop = style.marginTop;    
    oldtop = Number(oldtop.replace('px',''));   
    //设置新的margin-top   
    div.style.marginTop = `${oldtop+2}px`;
}, 16.7);

如何解决定时器的”加速”效果
- 定义一个开关变量，当为true时可以执行定时器，执行后将开关变量变为false。当停止定时器后再将开关变量设为true，又可以继续执行

时光路人

https://codehan045.github.io/posts/a1ca87a4.html

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源时光路人 !

javascript 元素操作

JavaScript组成之DOM节点操作

节点概述、节点层级父子兄节点获取、节点增、删、复制 DOM核心总结

2021-08-23 web前端

javascript 节点操作

JavaScript组成之BOM

2021-08-20 web前端

javascript BOM

JavaScript组成之DOM&元素操作

JavaScript组成之DOM元素操作

DOM简介

什么是DOM

发展

兼容性

DOM树

获取页面元素

根据标签ID属性获取

根据标签名获取

根据某个标签名下所有指定标签名的子元素

通过H5新增方法获取

getElementsByClassName

document.querySelector

document.querySelectorAll

直接获取特殊元素

操作元素(页面标签)

改变元素内容

针对双标签

innerHTML

innerText

针对表单标签 value

改变元素属性

获取元素属性

设置属性值

移除属性

改变CSS样式属性

获取样式属性值

设置CSS样式

排他思想

如何实现JavaScript中的 动画

你的赏识是我前进的动力

如何实现JavaScript中的动画