JavaScript中的DOM

·  阅读 41

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第9天,点击查看活动详情

什么是DOM

DOM, Document Object Model, 文档对象模型

一个网页就是一个文档

一个元素就是一个对象

通过Document对象来查询

getElementById, 通过标签的id属性来查询元素对象, 返回一个标签元素, 它是一个HTMLElement对象

getElementsByClassName, 通过标签的class属性来查询元素对象, 返回一个元素数组, HTMLCollection

getElementsByTagName, 通过标签名来查询元素对象, 返回一个数组, HTMLCollection

getElementsByName, 通过标签的name属性来查询元素对象, 返回一个数组, NodeList

querySelector, 通过css选择器来查询元素, 返回一个元素对象

querySelectorAll, 通过css选择器来查询元素, 返回一个数组, 哪怕匹配到的是一个元素

    <div id="title"><h2>这是一个标题</h2></div>
    <div class="content">这是第一条内容</div>
    <div class="content">这是第二条内容</div>
    <div class="content">这是第三条内容</div>

    <input type="checkbox" name="gender" value="男">男
    <input type="checkbox" name="gender" value="女">女

            let title = document.getElementById('title');
            console.log(title);

            let contents = document.getElementsByClassName('content');
            console.log(contents);

            let divs = document.getElementsByTagName('div');
            console.log(divs);

            let inputs = document.getElementsByName('gender');
            console.log(inputs);

            console.log(document.querySelector('#title'));
            console.log(document.querySelector('.content'));

            console.log(document.querySelectorAll('#title'));
            console.log(document.querySelectorAll('.content'));
复制代码

访问元素的属性

获取元素属性: 元素.属性名

修改元素属性: 元素.属性名 = 新的属性值

            // 获取元素属性
            console.log(title.id);
            console.log(contents[0].className);
            console.log(inputs[0].name);
            console.log(inputs[0].value);

            // 修改元素属性
            inputs[0].value = 'male';
复制代码

js代码的位置问题

如果将js代码写在head标签里, 那么当加载这里的js代码时, 整个文档还没有加载, 现在操作dom的话会失败

解决办法是window对象向上有个回调函数onload, 该函数会在整个文档加载完成是回调

<head>
  <sciprt>
    window.onload = function() {
  
    }
  </script>
</head>
复制代码

当然也可以在body标签中的末尾写js代码, 这样也可以保证整个文档加载完成再去执行js代码

<body>
  ...
...
  ...
...
  <script>
    // js代码
  </script>
</body>
复制代码

通过元素对象来查询

在查询元素的时候, 请注意这个查询方法是否也把空格计算在内

    <ul id="list">
        <li id="first">第一行</li>
        <li id="second">第二行</li>
        <li id="third">第三行</li>
    </ul>

            // 元素.getElementsByTagName
            let list = document.getElementById('list');
            console.log('getElementsByTagName ----------------------');
            console.log(list.getElementsByTagName('li'));

            // 元素中第一个子元素
            console.log('first ----------------------');
            console.log(list.firstChild); // 空格
            console.log(list.firstElementChild); // 元素

            // 元素中最后一个子元素
            console.log('last ----------------------');
            console.log(list.lastChild); // 空格
            console.log(list.lastElementChild); // 元素

            // 元素中所有的子元素
            console.log('child ----------------------');
            console.log(list.childNodes); // NodeList 7个, 包含空格
            console.log(list.children); // HTMLCollection 3个, 只包含标签对象

            // 获取当前元素的前一个兄弟
            let second = document.getElementById('second');
            console.log('prev ----------------------');
            console.log(second.previousSibling); // 空格
            console.log(second.previousElementSibling); // 元素

            // 获取当前元素的后一个兄弟
            console.log('next ----------------------');
            console.log(second.nextSibling); // 空格
            console.log(second.nextElementSibling); // 元素

            // 获取当前元素的父元素
            console.log('parent ----------------------');
            console.log(second.parentNode);
            console.log(second.parentElement);
复制代码

节点的增删改

注意这些方法ftjbj父元素在操作子元素时的方法

createElement, 根据标签名来创建一个节点

appendChild, 向某个节点添加一个子节点

insertBefore, 将新创建的节点添加到一个已经存在的节点前面, 第一个参数为新节点, 第二个参数为已存在的节点

removeChild, 删除一个节点

            let list = document.getElementById('list');            
            let second = document.getElementById('second');            

            // 创建节点
            let li = document.createElement('li');

            li.innerHTML = '第四行'

            // 在末尾添加节点

            // list.appendChild(li);

            // 插入节点
            list.insertBefore(li, second);

            // 修改节点
            li.id = 'forth';

            // 删除节点
            list.removeChild(second);
复制代码

DOM操作CSS

获取内联样式 元素.style.样式名

设置内联样式 元素.style.样式名 = 样式值

注意:

通过style访问的是内联样式, style标签中的样式是访问不了的

如果样式名是这样的background-color, 需要这样访问backgroundColor

<div id="box" style="width: 200px; height: 100px; background-color: red;"></div>

            let box = document.getElementById('box');

            // 读取内联样式
            console.log(box.style.width);
            console.log(box.style.height);
            console.log(box.style.backgroundColor);

            // 修改内联样式
            box.style.width = '400px';
            box.style.height = '200px';
复制代码

getComputedStyle

该方法只能获取元素的样式, 而并不能修改元素的样式

该方法获取的是当前元素正在使用的样式, 而不管是内联样式还是style标签中写的样式

// 获取当前元素的当前样式
let style = getComputedStyle(box, null);
console.log(style.width);
console.log(style.backgroundColor);
复制代码
分类:
前端
收藏成功!
已添加到「」, 点击更改