1. 首页
  2. 文章中心
  3. Other

javascript dom element methods（JavaScript dom 操作方法集）

92 阅读 0 评论
我是靠谱客的博主 潇洒银耳汤，最近开发中收集的这篇文章主要介绍javascript dom element methods（JavaScript dom 操作方法集），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

其实我一直在想  很多人已经习惯jq了  那么你是否还记得js的原生方法呢  或者说对于jq封装的方法来说 哪些对你来说是比较困扰的呢 那么接下来就更我一起来重温js原生的element方法吧

// 属性列举 属性文档摘自W3cshool

属性 / 方法描述
element.accessKey设置或返回元素的快捷键。
element.appendChild()向元素添加新的子节点，作为最后一个子节点。
element.attributes返回元素属性的 NamedNodeMap。
element.childNodes返回元素子节点的 NodeList。
element.className设置或返回元素的 class 属性。
element.clientHeight返回元素的可见高度。
element.clientWidth返回元素的可见宽度。
element.cloneNode()克隆元素。
element.compareDocumentPosition()比较两个元素的文档位置。
element.contentEditable设置或返回元素的文本方向。
element.dir设置或返回元素的内容是否可编辑。
element.firstChild返回元素的首个子。
element.getAttribute()返回元素节点的指定属性值。
element.getAttributeNode()返回指定的属性节点。
element.getElementsByTagName()返回拥有指定标签名的所有子元素的集合。
element.getFeature()返回实现了指定特性的 API 的某个对象。
element.getUserData()返回关联元素上键的对象。
element.hasAttribute()如果元素拥有指定属性，则返回true，否则返回 false。
element.hasAttributes()如果元素拥有属性，则返回 true，否则返回 false。
element.hasChildNodes()如果元素拥有子节点，则返回 true，否则 false。
element.id设置或返回元素的 id。
element.innerHTML设置或返回元素的内容。
element.insertBefore()在指定的已有的子节点之前插入新节点。
element.isContentEditable设置或返回元素的内容。
element.isDefaultNamespace()如果指定的 namespaceURI 是默认的，则返回 true，否则返回 false。
element.isEqualNode()检查两个元素是否相等。
element.isSameNode()检查两个元素是否是相同的节点。
element.isSupported()如果元素支持指定特性，则返回 true。
element.lang设置或返回元素的语言代码。
element.lastChild返回元素的最后一个子元素。
element.namespaceURI返回元素的 namespace URI。
element.nextSibling返回位于相同节点树层级的下一个节点。
element.nodeName返回元素的名称。
element.nodeType返回元素的节点类型。
element.nodeValue设置或返回元素值。
element.normalize()合并元素中相邻的文本节点，并移除空的文本节点。
element.offsetHeight返回元素的高度。
element.offsetWidth返回元素的宽度。
element.offsetLeft返回元素的水平偏移位置。
element.offsetParent返回元素的偏移容器。
element.offsetTop返回元素的垂直偏移位置。
element.ownerDocument返回元素的根元素（文档对象）。
element.parentNode返回元素的父节点。
element.previousSibling返回位于相同节点树层级的前一个元素。
element.removeAttribute()从元素中移除指定属性。
element.removeAttributeNode()移除指定的属性节点，并返回被移除的节点。
element.removeChild()从元素中移除子节点。
element.replaceChild()替换元素中的子节点。
element.scrollHeight返回元素的整体高度。
element.scrollLeft返回元素左边缘与视图之间的距离。
element.scrollTop返回元素上边缘与视图之间的距离。
element.scrollWidth返回元素的整体宽度。
element.setAttribute()把指定属性设置或更改为指定值。
element.setAttributeNode()设置或更改指定属性节点。
element.setIdAttribute() 
element.setIdAttributeNode() 
element.setUserData()把对象关联到元素上的键。
element.style设置或返回元素的 style 属性。
element.tabIndex设置或返回元素的 tab 键控制次序。
element.tagName返回元素的标签名。
element.textContent设置或返回节点及其后代的文本内容。
element.title设置或返回元素的 title 属性。
element.toString()把元素转换为字符串。
nodelist.item()返回 NodeList 中位于指定下标的节点。
nodelist.length

返回 NodeList 中的节点数。

那么这么多的方法 到底该怎么样去记忆呢  不用着急 这是一个循序渐进的过程  当然常用的气势并不多  那么接下来呢 我会为大家列举一些常用的el操作方法

//  常用的增删改查 那么在实际的工作中我们可以对其进行封装 当然jq无疑是一个很完美的封装

    <div id="app">
        <h1>hello</h1>
    </div>
    <!--script-->
    <script>
        let app = document.getElementById('app');
        // 增删改查
        app.appendChild(document.createElement('div')); // 插入节点  这里必须是节点

        app.removeChild(app.childNodes[3]); // div 被移除

        app.insertBefore(document.createElement('span'), app.childNodes[1]); // 插入元素 在指定元素钱

        document.body.appendChild(app.cloneNode()); // 克隆元素

        let a = document.createElement('div');

        app.replaceChild(a,app.children[0]);  // 替换

        console.log(app)
    </script>

那么呢 下面我要给大家讲的是元素的宽高 很多人对此可能觉得很简单 那么我们直接上代码

     #app{
            width: 1600px;
            height: 1200px;
            margin: 20px;
            padding: 20px;
            border: 2px solid #ccc;
       }

<div id="app">
        <h1>hello</h1>
    </div>
    <!--script-->
    <script>
        let app = document.getElementById('app');

        let client = {
            width: app.clientWidth,
            height: app.clientHeight
        };
        let offset = {
            width: app.offsetWidth,
            height: app.offsetHeight
        };
        let scroll = {
            width: app.scrollWidth,
            height: app.scrollHeight
        }

        console.log(client.width,client.height); // 本身可视宽度+padding+margin

        console.log(offset.width,offset.height); // 本身可视区域宽度+padding+margin+border

        console.log(scroll.width,scroll.height) // 本身宽度+padding+margin  本身宽度是它的宽度和被隐藏的宽度

        // 1640 1240
        // 1644 1244
        // 1640 1240
    </script>

在这里边呢  client是当出现滚动条时 本身可视宽度+padding+margin 减去 滚动条宽高 

scroll是当内容超出设定的宽高时滚动   本身设定的宽度+padding+margin+滚动条隐藏的宽高

至于offset就是上面所述 本身设定的宽度+padding+margin+border

 

下面我们要聊的就是setAttrbute 和 getAttrbute 废话不多说 上代码

    <div id="app">
       <img data-src="https://goss.veer.com/creative/vcg/veer/800water/veer-132457977.jpg">
    </div>
    <!--script-->
    <script>
        // setAttribute getAttribute
        let app = document.querySelector('#app');
        let src = app.children[0].getAttribute('data-src');
        app.children[0].setAttribute('src',src)
    </script>

// 最后来一个懒加载实例 封装的比较简单

 <style>
        #app{
            position: absolute;
            width: 1600px;
            height: 1200px;
            margin: 20px;
            padding: 20px;
            border: 2px solid #ccc;
        }
        img{
            width: 600px;
            height: 400px;
            transition: all .3s;
        }
    </style>
</head>
<body>
    <div id="app">
        <img data-src="https://goss.veer.com/creative/vcg/veer/800water/veer-132457977.jpg">
        <img data-src="https://goss.veer.com/creative/vcg/veer/800water/veer-132457977.jpg">
        <img data-src="https://goss.veer.com/creative/vcg/veer/800water/veer-132457977.jpg">
        <img data-src="https://goss.veer.com/creative/vcg/veer/800water/veer-132457977.jpg">
        <img data-src="https://goss.veer.com/creative/vcg/veer/800water/veer-132457977.jpg">
        <img data-src="https://goss.veer.com/creative/vcg/veer/800water/veer-132457977.jpg">
        <img data-src="https://goss.veer.com/creative/vcg/veer/800water/veer-132457977.jpg">
        <img data-src="https://goss.veer.com/creative/vcg/veer/800water/veer-132457977.jpg">
        <img data-src="https://goss.veer.com/creative/vcg/veer/800water/veer-132457977.jpg">
        <img data-src="https://goss.veer.com/creative/vcg/veer/800water/veer-132457977.jpg">
        <img data-src="https://goss.veer.com/creative/vcg/veer/800water/veer-132457977.jpg">
        <img data-src="https://goss.veer.com/creative/vcg/veer/800water/veer-132457977.jpg">
        <img data-src="https://goss.veer.com/creative/vcg/veer/800water/veer-132457977.jpg">
    </div>
    <!--script-->
    <script>
        // 懒加载
        let images = document.images;

        function loadimg () {
            // 浏览器宽高
            let lh = window.innerHeight;
            // 滚动条位置
            let top = document.documentElement.scrollTop;
            for (item in images) {
                // 图片位置
                let imgstop = images[item].offsetTop + 400;
                if (imgstop < (lh+top) && imgstop > top) {
                    images[item].src = images[item].getAttribute('data-src')
                }
            }
        }

        loadimg();

        window.addEventListener('scroll', () => {
            setTimeout(loadimg, 500) // 简单的节流
        })
    </script>

感谢大家的捧场 ！ 后续还有一集dom

最后

以上就是潇洒银耳汤为你收集整理的javascript dom element methods（JavaScript dom 操作方法集）的全部内容，希望文章能够帮你解决javascript dom element methods（JavaScript dom 操作方法集）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(61)

相关文章

VUE3（二十九）自定义点击图片显示大图bigImg组件
VUE3（二十九）自定义点击图片显示大图bigImg组件
关于elementUI的官网method用法
关于elementUI的官网method用法
vue3+vite+element-plus
vue3+vite+element-plus
vue自定义单选框组件
vue自定义单选框组件
javascript dom element methods（JavaScript dom 操作方法集）
javascript dom element methods（JavaScript dom 操作方法集）
Element·引入使用
Element·引入使用
vue单选框自定义样式及单选框取值问题
vue单选框自定义样式及单选框取值问题
vue：手写一个单选框/多选框
vue：手写一个单选框/多选框

评论列表共有 0 条评论

立即
投稿
返回
顶部