JS---DOM篇（上）_js dom标签-优快云博客

DOM篇（上）

前言
获取元素的方式
- 非常规
- 常规
操作元素的属性
- 原生属性
- 自定义属性
  - Attribute
  - data-****
操作文本内容
- .innerHTML
- .innerText
- value
操作元素的样式
- style
- getComputedStyle
操作元素的类名
- className
- classList

前言：
DOM全称Document object Mode：文档对象模型，能够操作HTML中的标签，而DOM的核心对象就是document对象，而document对象又是浏览器内置的一个对象，里面存储了许多专门用来操作元素的方法；我们通过js获取到的页面中的标签后，就把它叫做DOM对象
一，获取元素的方式：
（1）非常规：主要是为了获取三种标签，html，head，body ，获取方法如下

// 非常规
        console.log(document.documentElement); /* 获取html标签 */
        console.log(document.head) /* 获取head标签 */
        console.log(document.body)  /* 获取body标签 */

在浏览器的控制台查看效果：

（2）常规：常规又可以分为两个部分，一种是比较传统的方式，通过获取ID，className，标签名，以及在在表单中常使用的Name；另一种则是通过querySelectory的方式访问，不过当需要获取多个元素时，使用querySelectory就只能获取到第一个，此时使用querySelectoryAll则可以获取到多个元素，不过由获取到的元素组成的组数是伪数组，需要将其转化为数组后才能使用数组的方法，如下

// 常规方式
        1.getElementById
        2.getElementsByClassName
        3.getElementsByTagName
        4.getElementsByName
        5.querySelectory只可以返回一个
        6.querySelectoryAll则可以返回多个 
        注意，通过以上方法获得形成的数组都是伪数组，需要将其转化为数组后才可以调用数组的方法 ，转化方法如下
        var 新数组名=Array.from(伪数组名)

以下是通过getElementsByName获取表单元素的一个实例
body部分

<input type="text" name="user">
    <input type="text" name="password">

scrip部分

//getElementByName---适用于input
        console.log(document.getElementsByName('password'));
        var item=document.getElementsByName("user");
        item[0].value='kerwin';

二，操作元素的属性：
（1）原生属性：即元素自带的属性，以下给出了一些实例

<div id="add">2</div>
    <input type="text" value="hello" id="username">
    <input type="checkbox" checked id="item">

    //原生属性
    add.innerHTML="hello,html";
    username.type="password";
    item.checked=false;
    item.type="text";

（2）自定义属性：在实际应用过程中，为了便于开发，我们可能会自定义一些属性；自定义属性由两种方法，其一setAttribute[设置属性],getAttribut],removeAttribute[删除属性],
首先，在body标签中先创建好一个带有id的标签，便于我们接下来给标签进行属性操作

<div id="add">2</div>

创建好了后，我们就可以通过id，使用setAttribute为该标签添加我们自定义的属性，同时，也可以通过getAttribut将我们添加的属性拿到，还可以使用removeAttribute删除添加的属性，如下

add.setAttribute("h",200);
    var adds=add.getAttribute("h");
    console.log(adds);
    add.removeAttribute("h");

浏览器展示结果

创建自定义属性的第二种方式：在html5中，新增了一种更简便的方式，具体格式是data-*****其在元素标签中显示出来的效果全都是该种形式，不过值得注意的是，当我们在同一个元素中以该方式创建多个属性时，所得到的是一个由自定义属性组成的数组，同样的，先创建好一个带有id的标签

<div id="zdy" data-item="111"></div>

如果需要删除，这里使用delete实现删除，使用dataset.实现自定义属性的创建和赋值

// html5:data-*****
    console.log(zdy.dataset);/* 由于一个标签里可能有多个data-****,所以在形成的是数组 */
    zdy.dataset.xiaomi="222";/* 在zdy所在标签增设一个自定义的属性，并设置属性值 */
    console.log(zdy.dataset);

    delete zdy.dataset.xiaomi; /* 删除自定义属性 */
    delete zdy.dataset.item;

三，操作文本内容
（1）innerHTML：使用时，浏览器会自动解析里面包含的标签，并且，innerHTML获取到的是片段，包括文本内容和代码，
body部分

<div id="app">
        hello html
        <div>hello Dom</div>
    </div>

script部分

// innerHTML
    console.log(app.innerHTML);
    app.innerHTML="<h1>111111</h1>"; /* 会解析里面的html标签 */

通过控制台，我们可以看到innerHTML获取到的片段，如下

（2）innerText：与innerHTML相对，只会获取文本，不会获取片段，同时包含的标签也不要会被解析
（3）value：主要适用于表单元素，改变表单的value值，以下是一个小的实例
body部分

<input type="text" value="hello" id="inp">
    <select name="" id="add">
        <option value="1">111</option>
        <option value="2">222</option>
        <option value="3">333</option>
        <option value="4">444</option>
    </select>

script部分

// value
    inp.value="html"
    add.value="3";

实际结果展示，其中input框中的value值变为"html"，下拉列表中的value值变为333，如下

四，操作元素的样式
（1）style：只能获取行内样式，同时可读可写，如下
body部分

 <div id="app" style="background-color: red; height: 200px; color: antiquewhite;">hello</div>

script部分

 console.log(app.style.height); /* 读 */
    app.style.height="300px";  /* 写 */

（2）getComputedStyle：内部样式，外部样式，行内样式都可以获取，但不能改变他们的属性值，如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            width: 100px;
        }
    </style>
</head>
<body>
    <div id="app" style="background-color: red; height: 200px; color: antiquewhite;">hello</div>
</body>
<script>
    // 1.style:行内样式的获取，可以读写,但只可以获取行内的样式
    // 2.getComputedStyle:行内，内部，外部(在CSS中的)样式都可以获取，但不可以写
    console.log(app.style.height); /* 读 */
    app.style.height="300px";  /* 写 */

    console.log(getComputedStyle(app).width);  /* 获取内部样式 */
    console.log(getComputedStyle(app).backgroundColor); /* 获取行内样式，像background-color这样的复合词，需要使用驼峰，或者对象的形式 */
</script>
</html>

五，操作元素的类名
先给出body部分的代码，待会以下都会使用到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item{
            width: 200px;
            height: 200px;
            background-color: red;
            border-radius: 18px;
        }
    </style>
</head>
<body>
    <div class="item item1 item2" id="app">hello html</div>
    <button id="add">切换</button>
</body>

（1）className：class类的增加和删除是可以通过直接赋值实现的，非常的简单粗暴，

// className
    console.log(app.className);
    app.className="item item1"  /* 删除item2 */

通过直接赋值删除了item2
在这里插入图片描述
（2）classList：需要增加一个类时使用add，删除则是remove，此外还有切换的属性toggle

app.classList.add("item3");  /* 增加一个class类 */
    app.classList.remove("item2"); /* 删除一个类 */

添加了item3删除了item2

接下来，我们讲讲切换–toggle，其主要作用是，如果一个标签没有该类，则添加改类，若有，则不添加，如下

app.classList.add("item3");  /* 增加一个class类 */
    app.classList.remove("item2"); /* 删除一个类 */
    add.onclick=function(){
        app.classList.toggle("item"); /* 切换，若本省没有则加上这个类，若有则删除该类 */
    }