JavaScript-DOM

标签：box const DOM JavaScript querySelector document 类名属性

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

标签：box,const,DOM,JavaScript,querySelector,document,类名,属性
From： https://blog.csdn.net/Kevin7_35Durant/article/details/139388920

DOM