当前位置：首页 > news >正文

JavaScript-DOM

news 来源：原创 2024/6/30 19:57:55

DOM

全称：DOM(Document Object Model--文档对象类型)

作用：用来操控网页类容的功能，开发网页特效和实现用户交互

DOM 结构

将HTML文档以树形结构表现出来称之为DOM树

获取DOM

语法：document.querySelector('css选择器')

参数：包含一个或多个css选择器字符串

返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象

  <div class="box">1</div><div>2</div><script>const box= document.querySelector('div');console.log(box);</script>

如果没有指明获取的是第几个div，那么默认为第一个

修改DOM元素内容

想要修改DOM元素里面的内容，可以用以下两种元素属性来修改：

对象名.innerText
对象名.innerHTML

元素innerText属性

作用：

将文本内容增添/更新到标签的位置
显示文本内容，并不解析标签

<div>1</div>
<div>2</div><script>const box= document.querySelector('div');console.log(box.innerText);</script>

显示第一个标签div的文本内容

更新标签文本的内容

<body>
<div>1</div>
<div>2</div><script>const box= document.querySelector('div');console.log(box.innerText);box.innerText='first';console.log(box.innerText);</script>
</body>

元素innerHTML属性

作用：

将文本内容增添/更新到标签的位置
显示文本内容，会解析标签

将元素innerText和元素innerHTML做对比

<body>
<div class="a">1</div>
<div class="b"></div><script>const box= document.querySelector('.a');const box1= document.querySelector('.b');box.innerText='<strong>first</strong>';box1.innerHTML='<strong>first</strong>';</script>
</body>

我们发现innerText只会显示将标签显示为文本内容，而innerHTML会解析标签

修改DOM元素属性

我们可以同js来修改标签元素属性

常见的属性：href，title，src等

语法：对象名.属性=值

<body>
<img src="" alt=""><script>const img=document.querySelector('img');img.src='./img/durant.jpg'</script>
</body>

修改元素样式属性

可以通过js来修改标签元素的样式属性

比如修改标签div的宽和高，更换背景颜色

通过style修改样式

语法：对象名.style.属性名='值'

<body>
<div></div><script>const box=document.querySelector('div');box.style.width='200px';box.style.height='200px';box.style.backgroundColor='black';box.style.border='2px solid red '</script>
</body>

通过类名(className)修改样式

如果修改的样式较多，可以用类名来修改

由于关键字是class，所以用className

语法：对象名.className='类名'

用className赋值时会用新值覆盖之前的值

<body>
<div class="b"></div><script>const box=document.querySelector('.b');box.className='box1';</script>
</body>

标签div的类名被修改为了box1

通过classList来修改样式

由于className会覆盖掉原先的类名，所以HTML5新增了一个classList来增删类名

语法：

对象名.classList.add('类名') ----增加一个类名
对象名.classList.remove('类名') ---删除一个类名
对象名.classList.toggle('类名') ---切换一个类名，有就删除，没有就加上

追加一个类名，使这个元素拥有这个类名同样的效果

  <style>div{width: 200px;height: 200px;}.red{background-color: red;}</style>
</head>
<body>
<div ></div><script>const box=document.querySelector('div');box.classList.add('red');</script>
</body>

标签div拥有两个类名

操作表单元素属性

获取表单值：DOM对象.属性名

设置表单值: DOM对象.属性名=值

将表单的文本类型转换为密码类型，将隐藏其内容

<body>
<input type="text" value="durant"><script>const word=document.querySelector('input')word.type='password';</script>
</body>

表单中用布尔值表示了增删属性

true表示添加了该属性

false表示移除了该属性

如：disabled ， checked ,selected

<body>
<input type="checkbox"><script>const check=document.querySelector('input')check.checked=true;</script>
</body>

当checked为true时，就表示勾选，为false就取消勾选

按钮的属性disabled，默认状态是不禁用为'false'

<body>
<button>按钮</button><script>const btn=document.querySelector('button')btn.disabled='true';</script>
</body>

按钮禁用之后变灰且按钮不能按

自定义属性

标签有自带的属性，也有自定义属性

一个标签可以设置多个自定义属性

语法：<data-自定义属性名="值">

获取值的语法：对象名.dataset.自定义属性名

<body><div data-numbers="1" data-id="one">1</div><script>const num=document.querySelector('div');console.log(num.dataset.id);console.log(num.dataset);</script>
</body>

全部获取可以直接写对象名.dataset