一站式掌握JavaScript操作元素与DOM节点的完全指南_开发语言

🌈个人主页：前端青山 🔥系列专栏：JavaScript篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来JavaScript篇专栏内容:JavaScript-操作元素

目录

获取元素

操作元素样式

div宽度变小

操作元素类名

ele.className

ele.classList

操作元素属性

原生属性操作

自定义属性操作

H5自定义属性的操作 ( data-* )

操作元素内容

获取元素尺寸(只能获取,不能设置)

offsetWidth / offsetHeight

clientWidth / clientHeight

获取元素偏移量

offsetLeft / offsetTop

clientLeft / clientTop

DOM节点及以节点操作

DOM节点

获取节点

节点属性

nodeType

nodeName

nodeValue

汇总

创建节点

插入节点

修改节点

删除节点

克隆节点

获取元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <p class="hehe">呵呵</p>
        <input type="text" name="txt" id="">
        <h3>三级标题</h3>
        <input type="text" name="txt" id="">
        <p class="hehe">呵呵</p>
    </div>
    <p class="hehe">呵呵</p>
    <input type="text" name="" id="">
    <p>呵呵</p>
    <script>
        //1. 获取页面中所有的p标题
        var body_p = document.getElementsByTagName('p');
        console.log(body_p);
        //2. 获取所有类名是hehe的标签
        // var p_hehe = document.getElementsByClassName('hehe');
        // console.log(p_hehe);
        //3. 获取所有的name是txt的表单
        var input_name = document.getElementsByName('txt');
        console.log(input_name);
        //4. 获取div#box里面的class=hehe的标签
        // var box_hehe = document.getElementById('box').getElementsByClassName('hehe');
        // console.log(box_hehe);
        //兼容IE9以下的byClassName
        //class是保留字
        function byClassName(obj,className){
            //判断是否兼容
            if(obj.getElementsByClassName){  //支持这个方法，为true
                return obj.getElementsByClassName(className);
            }else{ //不支持这个方法，false
                //声明一个空数组
                var arr = [];
                //获取所有元素
                var eles = obj.getElementsByTagName('*');
                //遍历所有元素
                for(var i = 0,len = eles.length;i < len;i ++){
                    //判断每一个元素是否有指定的类名
                    if(eles[i].className === className){
                        arr.push(eles[i]);
                    }
                }
                return arr;
            }
        }
        var box_hehe = byClassName(document.getElementById('box'),'hehe');
        console.log(box_hehe);

        let query_hehe = document.querySelectorAll('.hehe');
    </script>
</body>
</html>

操作元素样式

  1. ele.style

访问或设置行内样式

  1. window.getComputedStyle()
//获取非行内样式 
//标准浏览器
// alert(getComputedStyle(o_div,1).width);
//IE浏览器
// alert(o_div.currentStyle.width);
//兼容
function getStyle(obj,attr){
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,true)[attr];
    // return window.getComputedStyle ? getComputedStyle(obj,1)[attr] : obj.currentStyle[attr];
}

一站式掌握JavaScript操作元素与DOM节点的完全指南_html_02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <style>
        #box{
            width:100px;
            height: 100px;
            background: red;
        }
    </style> -->
</head>
<body>
    <div id="box"></div>
    <script>
        //1. 获取元素
        var o_box = document.querySelector('#box');
        //2. 添加样式
        o_box.style.width = '100px';
        o_box.style.height = '100px';
        o_box.style.background = 'red';
        // o_box.style.cssText = 'width:100px;height:100px;background:red';
    </script>
</body>
</html>

div宽度变小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        //1. 获取元素
        var o_box = document.querySelector('#box');
        //2. 获取宽度
        // var width = parseInt(o_box.style.width);
        // alert(width);
        //标准浏览器获取非行内样式的方法
        // var width = getComputedStyle(o_box).width;
        //IE浏览器获取非行内样式的方法
        // var width = o_box.currentStyle.width;
        //兼容
        //obj : 指定的标签对象
        //attribute : 属性  attr 样式属性
        function getStyle(obj,attr){
            return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
        }
        // var width = getStyle(o_box,'width');
        // alert(width);
        //3. 逐渐变小
        setInterval(function(){
            o_box.style.height = parseInt(getStyle(o_box,'height')) - 1 + 'px';
        },30)
    </script>
</body>
</html>

操作元素类名

ele.className

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <input type="button" value="on|off">
    <div id="box"></div>
    <script>
        //1. 获取元素
        var div = document.querySelector('#box');
        var onoff = document.querySelector('input');
        //2. 添加类名
        div.className = 'pox';
        // div.className = 'hehe';
        div.classList.add('hehe'); //添加新类名
        div.classList.add('haha');
        div.classList.add('active');
        //获取所有类名
        // console.log(div.classList,div.classList.length);
        //通过下标获取指定的类名
        // console.log(div.classList.item(2));

        //3. 添加事件
        onoff.onclick = function(){
            div.classList.toggle('active');
        }
        //4. 删除指定类名
        div.classList.remove('hehe');
        //5. 查看指定的类名是否存在
        console.log(div.classList.contains('hehe'));
    </script>
</body>
</html>

ele.classList

  1. ele.classList : 获取元素的全部类名
  2. ele.classList.lentgh: 获取到元素类名的数量
  3. ele.classList.add(): 向元素添加一个或多个类名
  4. ele.classList.remove() : 可以删除元素的一个或多个类名
  5. ele.classList.item(index) : 可以获取到元素类名索引为index的类名
  6. ele.classList.toggle() : 可以为元素切换类名
  7. ele.classList.contains(x) : 查看元素是否存在类名为"x"的类

操作元素属性

原生属性操作

元素.属性 元素['属性'] 元素.getAttribute('属性名') 元素.setAttribute('属性名','属性值') 元素.removeAttribute('属性名')

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box" title="标题" data-id="sp1"></div>
    <script>
        //1. 获取元素
        var div = document.getElementById('box');
        //2. 获取属性
        // console.log(div.id,div['title']);
        // console.log(div.name,div.hehe);

        //3. 获取自定义属性
        // console.log(div.getAttribute('name'));
        // //4. 设置自定义属性
        // div.setAttribute('heihei','嘿嘿');
        // //5. 删除自定义属性
        // div.removeAttribute('name');
        div.dataset.cartId = 999;
        console.log(div.dataset.id);
        div.id = '';
    </script>
</body>
</html>

自定义属性操作

  • getAttribute
  • setAttribute
  • removeAttribute

元素.getAttribute('属性名') : 获取属性 元素.setAttribute('属性名','属性值') ： 设置属性 元素.removeAttribute('属性名') ： 删除属性

H5自定义属性的操作 ( data-* )

  • ele.dataset : 读写自定义属性
<body>
    <div id="box" data-my-id="me"></div>
    <script>
        var o_div = document.getElementById('box');
        console.log(o_div.dataset.myId); //'me'
    </script>
</body>

操作元素内容

  1. innerHTML : 设置或获取当前节点内容的内容（超文本）（可以解析超文本的含义）
  2. innerText : 设置或获取当前节点内部的内容（纯文本）（不能解析超文本）
  3. value : 设置或获取表单中的内容
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <input type="text" name="" id="" value="请输入姓名:">
    <div id="box">呵呵<strong>哈哈</strong>嘿嘿</div> -->
    <input type="text" name="" id="">
    <div id="box"></div>
    <script>
        //1. 获取元素
        var txt = document.querySelector('input');
        var div = document.querySelector('#box');
        //3. 添加内容
        txt.value = '姓名：';
        // div.innerText = '呵呵<i>嘿嘿</i>嘻嘻';
        div.innerHTML = '呵呵<i>嘿嘿</i>嘻嘻';
        //2. 获取元素中的内容
        console.log(txt.value);
        console.log(div.innerHTML);
        console.log(div.innerText);
    </script>
</body>
</html>

获取元素尺寸(只能获取,不能设置)

offsetWidth / offsetHeight

  1. 节点对象.offsetWidth : 获取当前节点对象的相对宽度（width + border + padding)
  2. 节点对象.offsetHeight : 获取当前节点对象的相对高度（height + border + padding)

clientWidth / clientHeight

  1. 节点对象.clientWidth : 获取当前节点对象的可视区宽度（width + padding)
  2. 节点对象.clientHeight : 获取当前节点对象的可视区高度（height + padding)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background: red;
            border: 1px solid black;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        //1. 获取元素
        var div = document.querySelector('#box');
        //2. 获取div的相对宽高
        //width + padding + border
        //height + padding + border
        console.log(div.offsetWidth,div.offsetHeight); //112 112
        //width/height + padding
        console.log(div.clientWidth,div.clientHeight); //110 110
    </script>
</body>
</html>

获取元素偏移量

offsetLeft / offsetTop

  1. offsetLeft : 相对左边的距离
  • 如果父元素没有定位，则当前元素相对于页面左边（body）的left值
  • 如果父元素有定位，则当前元素相对于父元素左边的left值。
  1. offsetTop : 相对上边的距离
  • 如果父元素没有定位，则当前元素相对于页面上边（body）的top值
  • 如果父元素有定位，则当前元素相对于父元素上边的top值。

clientLeft / clientTop

  1. clientLeft : 表示一个元素的左边框的宽度，以像素表示。
  2. clientTop : 表示一个元素的上边框的宽度，以像素表示。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            background: red;
           
        }
        .pox{
            width: 100px;
            height: 100px;
            background: green;
            position: absolute;
            left: 100px;
            top: 100px;
            border: 10px solid purple;
        }
    </style>
</head>
<body>
    <!-- box的父亲是body -->
    <div id="box">
        <!-- pox的父亲是box -->
        <div class="pox"></div>
    </div>
    <script>
        // 1. 如果没有定位，则相对于页面（body)边的距离
        // 2. 如果有定位，则相对于父元素边距离。
        //1. 获取元素
        var div = document.querySelector('#box');
        var pox = document.querySelector('.pox');
        //2. 添加事件
         // 1. 如果没有定位，则相对于页面（body)边的距离
       console.log(div.offsetLeft,div.offsetTop); // 8 8
       // 2. 如果有定位，则相对于父元素边距离。
       console.log(pox.offsetLeft,pox.offsetTop); //100 100

       console.log(pox.clientLeft); //边框的宽度
        
    </script>
</body>
</html>

DOM节点及以节点操作

DOM节点

  • DOM 的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点
  • 什么是分类，比如我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点（标签节点）
  • 比如我们标签里面写的文字，那么就是文本节点
  • 写在每一个标签上的属性，就是属性节点

获取节点

  1. firstChild : 第一个子节点
  2. firstElementChild : 第一个元素子节点
  3. lastChild : 最后一个子节点
  4. lastElementChild : 最后一个元素子节点
  5. previousSibling : 前一个兄弟节点
  6. previousElementSibling : 前一个元素兄弟节点
  7. nextSibling : 下一个兄弟节点
  8. nextElementSibling : 下一个元素兄弟节点
  9. parentNode : 父节点
  10. childNodes : 获取到所有的元素子节点 与 文本子节点
//删除空白文本子节点
function noSpaceNode(node) {
    //获取所有子节点
    var childs = node.childNodes;
    //遍历所有的子节点
    for (var i = 0; i < childs.length; i++) {
        //文本                            空白
        if (childs[i].nodeType === 3 && /^\s+$/.test(childs[i].nodeValue)) {
            //删除空白节点
            node.removeChild(childs[i]);
        }
    }
    return node;
}
  1. children ： 获取所有的元素子节点

节点属性

nodeType
  • nodeType：获取节点的节点类型，用数字表示
nodeName
  • nodeName：获取节点的节点名称
nodeValue
  • nodeValue： 获取节点的值
汇总

-

nodeType

nodeName

nodeValue

元素节点

1

大写标签名

null

属性节点

2

属性名

属性值

文本节点

3

#text

文本内容

创建节点

  1. document.createElement('标签名') : 创建元素节点
  2. document.createTextNode('文本') : 创建文本节点
  3. document.createDocumentFragment() : 创建文档碎片 (为了减少与页面的交互，提高性能)
<body>
    <ul></ul>
    <script>
        //1. 获取页面元素
        var ul = document.querySelector('ul');
        //2. 假设我们从后端获取到一组数据
        var arr = ['呵呵','哈哈','嘿嘿','嘻嘻','咕咕','嘎嘎'];
        //链接的数组
        var link = ['http://www.baidu.com','http://www.taobao.com','http://jd.com','http://1000phone.com','http://www.qq.com','http://www.sina.com.cn'];
        //3. 遍历数组
        arr.forEach(function(item,index){
            //1. 创建一个li
            var li = document.createElement('li');
            //2. 创建a
            var a = document.createElement('a');
            //3. 设置元素属性
            a.href = link[index];
            //4. 设置元素内容
            // a.innerText = item;
            // 创建一个文本节点
            var txt = document.createTextNode(item);
            // 文本节点添加到a元素中
            a.appendChild(txt);
            //5. 将a元素添加到li中
            li.appendChild(a);
            //6. 将li添加到ul中
            ul.appendChild(li);
        })
    </script>
</body>

插入节点

  1. 父节点.appendChild(子节点) : 将这个子节点追加到父节点中子节点列表的末尾。
  2. 父节点.insertBefore(新节点,指定的旧的节点) ： 在指定的旧节点前面插入新节点
<body>
    <ul></ul>
    <script>
        //1. 获取页面元素
        var ul = document.querySelector('ul');
        //创建一个文档碎片
        var fragment = document.createDocumentFragment();
        //2. 添加10个元素
        for(var i = 0;i < 10;i ++){
            //创建li
            var li = document.createElement('li');
            //li中添加内容
            li.innerText = i + 1;
            //li添加到ul中
            // ul.appendChild(li);
            fragment.appendChild(li);
        }
        ul.appendChild(fragment);

        //创建一个li
        var li = document.createElement('li');
        //文本节点
        var txt = document.createTextNode('long long a go');
        //txt 添加到li中
        li.appendChild(txt);
        //li 插入第一个子节点的前面
        ul.insertBefore(li,ul.children[0]);

    </script>
</body>

修改节点

  1. 父节点.replaceChild(新节点，旧节点) : 替换节点
<body>
    <ul></ul>
    <script>
        //1. 获取页面元素
        var ul = document.querySelector('ul');
        //创建一个文档碎片
        var fragment = document.createDocumentFragment();
        //2. 添加10个元素
        for(var i = 0;i < 10;i ++){
            //创建li
            var li = document.createElement('li');
            //li中添加内容
            li.innerText = i + 1;
            //li添加到ul中
            // ul.appendChild(li);
            fragment.appendChild(li);
        }
        ul.appendChild(fragment);

        //创建一个li
        var li = document.createElement('li');
        //文本节点
        var txt = document.createTextNode('long long a go');
        //txt 添加到li中
        li.appendChild(txt);
        //li 插入第一个子节点的前面
        ul.insertBefore(li,ul.children[0]);

        //创建一个新的文本节点
        var new_txt = document.createTextNode('good good study,day day up');
        //替换
        li.replaceChild(new_txt,txt);
    </script>
</body>

删除节点

  1. 父节点.removeChild(子节点) : 删除子节点
  2. 当前节点.remove() : 删除当前节点
<body>
    <p id="parent">呵呵</p>
    <script>
        //1. 获取页面元素
        var p = document.querySelector('p');
        //2. 删除子节点
        p.removeChild(p.firstChild);
        //3. 删除自己
        p.remove();
    </script>
</body>

克隆节点

  1. 当前节点.cloneNode([true]) : 复制节点
<body>
    <p id="parent">呵呵</p>
    <script>
        //1. 获取页面元素
        var p = document.querySelector('p');
        // 获取body
        //获取head  document.head
        //获取html document.documentElement
        var body = document.body;
        //2. 添加事件
        p.onclick = function(){
            body.appendChild(this.cloneNode(true));
        }
    </script>
</body>

false(默认) : 只克隆当前节点，不包含内容。 true : 克隆当前节点，包含内容