2025年3月15日 星期六 甲辰(龙)年 月十四 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

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

时间:02-23来源:作者:点击数:11
城东书院 www.cdsy.xyz

目录

获取元素

操作元素样式

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">
  • <h3>三级标题</h3>
  • <input type="text" name="txt">
  • <p class="hehe">呵呵</p>
  • </div>
  • <p class="hehe">呵呵</p>
  • <input type="text" name="">
  • <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
    访问或设置行内样式
  2. 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];
    • }
  • <!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="" value="请输入姓名:">
  • <div id="box">呵呵<strong>哈哈</strong>嘿嘿</div> -->
  • <input type="text" name="">
  • <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;
    • }
  11. 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 : 克隆当前节点,包含内容

城东书院 www.cdsy.xyz
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐