JavaScript DOM02--元素操作

mzmm403
178 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天

操作元素

修改元素内容

element.innerText

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

  • 来个例子
<body>
    <button>
        显示时间
    </button>
    <div>
        某个时间
    </div>
    <script>
    	var btn = document.querySelector('button');
        var div = document.querySelector('div');
      btn.onclick = function(){
          div.innerText = getDate();
      }  
      function getDate(){
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth()+1;
        var day = date.getDate();
        return '今天是'+year+'年'+month+'月'+day+'日';
      }
    </script>
</body>

image-20220629164624339.png

innerText和innerHTML的区别

  1. innerText不识别html的标签，而innerHTML识别html标签
  2. innerText是IE发行，非标准的；innerHTML是W3C发行的，标准的
  3. innerText会去除空格以及换行，而innerHTML保留空格和换行

常用元素的属性操作

<body>
    <button id = 'gy'>甘雨</button>
    <button id = 'lh'>神里凌华</button> <br/>
    <img src='lh.jpg' alt="" width="300">
    <script>
    	var gy = document.getElementById('gy');
        var lh = document.getElementById('lh');
        var img = document.querySelector('img');
        lh.onclick = function(){
            img.src = 'lh.jpg';
        }
        gy.onclick = function(){
            img.src = 'gy.jpg';
        }
    </script>
</body>

image-20220629172034483.png

image-20220629172046818.png

表单元素的属性操作

利用DOM可以操作如下表单元素的属性

type value checked selected disabled
  • 禁用案例
<body>
    <button>按钮</button>
    <input type = 'text' value='输入内容'>
    <script>
    	var btn = document.querySelector('button');
        var input = document.querySelector('input');
        btn.onclick = function(){
           input.value = '被点击了'  
            btn.disabled = true;
            //或者
            this.disabled = true;
            // this指向的是事件函数的调用者btn
        }
    </script>
</body>
  • 显示密码案例
<style>
    .box{
        position: relative;
        width: 400px;
        border-bottom: 1px solid #ccc;
        margin: 100px auto;
    }
    .box input{
        width: 370px;
        height: 30px;
        border: 0;
        outline: none;
    }
    .box img{
        position: absolute;
        top: 2px;
        right: 2px;
        width: 24px;
    }
    /*用css隐藏自带的眼睛按钮*/
    input::-ms-clear{
            display: none;
        }
        input::-ms-reveal{
            display: none;
        }
</style>
<body>
    <div class = 'box'>
        <label for "">
        	 <img src="colse.png" alt="" id = 'eye'>
        </label>
        <input type = 'password' name = "" id = "pwd">
    </div>
<script>
    	var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        var flag = 0;
        eye.onclick = function(){
            if (flag == 0){
                pwd.type = 'text';
                eye.src = 'open.png';
                flag = 1;
            }else{
                pwd.type = 'password';
                eye.src = 'colse.png';
                flag = 0; 
            }
        }
    </script> 
</body>

image-20220630131255769.png

image-20220630131302858.png

修改样式属性

1. element.style    行内样式操作
2. element.className  类名样式操作
  • 示例
<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>
<body>
    <div></div>
    <script>
    	var div = document.querySelector('div');
        div.onclick = function(){
            this.style.backgroundColor = 'purple';
        }
    </script>
</body>
  1. JS里面的样式采取驼峰命名法，比如：backgroundColor
  2. JS修改style样式操作，产生的是行内样式，权重比较高

节点操作

  1. 利用DOM提供的方法获取元素
  • document.getElementById()
  • document.getElementsByTagName()
  • document.querySelector 等
  • 繁琐，逻辑性不强
  1. 利用节点层级关系获取元素
  • 利用父子兄弟节点关系获取元素
  • 逻辑性强，但兼容性差

节点概述

节点的定义

网页中的所有内容都是节点（标签，属性，文本，注释等），在DOM中，节点使用node来表示。HTML DOM树中的所有节点都可以通过JS进行访问，所有的HTML元素(节点)均可被修改，也可以删除或创建

节点基本属性

  • nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性

  • 元素节点 nodeType 为1

  • 属性节点 nodeType 为2

  • 文本节点 nodeType 为3 （文本节点包含文字、空格、换行）

image-20220630144226049.png

我们在实际开发中，节点操作主要操作的是元素节点

节点层级

利用DOM树可以把节点划分为不同的层级关系，常规为父子兄弟关系

  1. 父级节点
node.parenntNode;

<div class='box'>
    <span class='erweima'></span>
</div>
<script>
	var erweima = document.querySelector('.erweima');
    // erweima.parentNode为erweima的父节点，得到离元素最近的父级节点，如果找不到父节点就返回null
    console.log(erweima.parentNode);
</script>

  • 得到离元素最近的父级节点

  • 如果找不到父节点就返回null

  1. 子节点
parentNode.childNodes(标准);
  • 返回的是含指定节点的子节点集合，该集合为及时更新的集合
<body>
    <ul>
        <li>mzmm403</li>
        <li>mzmm403</li>
        <li>mzmm403</li>
        <li>mzmm403</li>
        <li>mzmm403</li>
    </ul>
    <ol>
        <li>mzmm403</li>
        <li>mzmm403</li>
        <li>mzmm403</li>
        <li>mzmm403</li>
        <li>mzmm403</li>
    </ol>
</body> 
<script>
	var ul = document.querySelector('ul');
    console.log(ul.childNodes);
    //查看节点类型，根据伪数组取出数组元素
    console.log(ul.childNode[0].nodeType)
</script>

注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes

var ul = document.querySelector('ul');
for(var i = 0; i < ul.childNodes.length;i++){
    if (ul.childNodes[i].nodeType == 1){
      // ul.childNodes[i]是元素节点
    console.log(ul.childNodes[i]);   
    }
}

因为parentNode.childNodes(标准)返回所有的子节点，所以我们一般采用以下方法获得子元素节点

parentNode.children;

parentNode.firstChild;
  • 返回第一个子节点，找不到则返回null，同样包含了所有的节点
parentNode.lastChild;
  • 返回最后一个子节点，找不到则返回null，同样包含了所有的节点
parentNode.firstElementChild;
parentNode.lastElementChild;
  • 拿到第一个子元素节点/拿到最后一个子元素节点（这两个方法由于兼容性问题，IE9以上才支持）
  1. 兄弟节点
node.nextSinling;
  • nextSinling返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点
node.previousSinling;
  • previousSinling返回当前元素上一个兄弟节点，找不到则返回null。同样，也包含所有的节点
node.nextElementSinling;
node.previousElementSinling;

  • nextElementSinling返回当前元素下一个兄弟元素节点，找不到则返回null

  • previousElementSinling返回当前元素上一个兄弟元素节点，找不到则返回null

  • 上述兄弟节点的连个方法都是IE9以上才支持的

  • 解决方法

function getNextElementSinling(element){
    var el = element;
    while (el = el.nextSinling){
        if (el.nodeType == 1){
            return el;
        }
    }
    return null;
}

创建和添加节点

document.createElement('tagName')
  • document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也成为动态创建元素节点
node.appendChild(child);
node.insertBefore(child,指定元素);

  • node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于CSS里面的after伪元素

  • node.insertBefore()方法将一个接待你添加到父节点的指定子节点前面。类似于CSS里面的before伪元素

  • 示例

<body>
    <ul>
        <li>123</li>
    </ul>
    <script>
    	// 创建节点
        var li = document.createElement('li');
        // 添加节点,追加节点
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        var lili = document.creatElement('li');
        ul.insertBefore(lili,ul.children[0]);
    </script>
</body>

页面想要添加一个元素：

  1. 创建元素
  2. 添加元素

删除和克隆节点

node.removeChild(child)
  • node.removeChild()方法从DOM中删除一个子节点，返回删除的节点
node.cloneNode()

  • node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点

  • 如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点

  • 如果括号里面为true，则为深拷贝，会复制节点本身及里卖弄的所有子节点

avatar
文章
阅读
粉丝