WebAPI之DOM操作总结

最新推荐文章于 2023-03-14 11:36:10 发布
最新推荐文章于 2023-03-14 11:36:10 发布
阅读量172 收藏
点赞数 2
分类专栏： WebAPI 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43537721/article/details/106320559
版权

WebAPI之DOM操作总结

WebAPI之DOM节点操作总结

*API、WebAPI、DOM、DOM树介绍

1.API与Web API：
API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。
Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。
2.DOM介绍：
通过这些 DOM 接口可以改变网页的内容、结构和样式。
DOM树：

  • 文档：一个页面就是一个文档，DOM中使用document表示
  • 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
  • 标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

1.获取元素

在这里插入图片描述

1.1 根据ID获取

<div id="time">2019-9-9</div>
    <script>
        // 1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
        // 2. get 获得 element 元素 by 通过 驼峰命名法 
        // 3. 参数 id是大小写敏感的字符串
        // 4. 返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>

1.2 根据标签名获取元素

<script>
        // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);

        }
        // 3. 如果页面中只有一个li 返回的还是伪数组的形式 
        // 4. 如果页面中没有这个元素 返回的是空的伪数组的形式
        // 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
        // var ol = document.getElementsByTagName('ol'); // [ol]
        // console.log(ol[0].getElementsByTagName('li'));
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));
    </script>

1.3 H5新增获取元素方式

<script>
        // 1. getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        // 2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        // 3. querySelectorAll()返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);
    </script>

1.4 获取特殊元素（body，html）

    <script>
        // 1.获取body 元素（打印整个标签）
        var bodyEle = document.body;
        console.log(bodyEle);
        //console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(bodyEle);
        // 2.获取html 元素
        // var htmlEle = document.html;
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>

2. 节点操作

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

2.1 节点层级介绍

2.1.1 父级节点
<div class="demo">
        <div class="box">
            <span class="erweima">×</span>
        </div>
    </div>

    <script>
        // 1. 父节点 parentNode
        var erweima = document.querySelector('.erweima');
        // var box = document.querySelector('.box');
        // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
        console.log(erweima.parentNode);
    </script>
2.1.2 子节点

1.子节点使用方法：

<ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
</ul>
<script>
        // DOM 提供的方法（API）获取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        // 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
        // 2. children 获取所有的子元素节点 也是我们实际开发常用的
        console.log(ul.children);
    </script>

2.子节点中关于第一个子节点、最后一个子节点、第一个子元素节点和最后一个子元素节点：

    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        // 1. firstChild 第一个子节点 不管是文本节点还是元素节点
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        // 2. firstElementChild 返回第一个子元素节点 ie9才支持
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
        // 3. 实际开发的写法  既没有兼容性问题又返回第一个子元素
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1]);
    </script>
2.1.3兄弟节点
<div>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div');
        // 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
        console.log(div.nextSibling);
        console.log(div.previousSibling);
        // 2. nextElementSibling 得到下一个兄弟元素节点
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);
    </script>

2.2 创建与添加节点

<ul>
        <li>123</li>
    </ul>
    <script>
        // 1. 创建节点元素节点
        var li = document.createElement('li');
        // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // 3. 添加节点 node.insertBefore(child, 指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素

2.3 删除节点

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

<button>删除</button>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>
    <script>
        // 1.获取元素
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        // 2. 删除元素  node.removeChild(child)
        // ul.removeChild(ul.children[0]);
        // 3. 点击按钮依次删除里面的孩子
        btn.onclick = function() {
            if (ul.children.length == 0) {
                this.disabled = true;
            } else {
                ul.removeChild(ul.children[0]);
            }
        }
    </script>

2.4 复制（克隆）节点

<ul>
        <li>1111</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
        // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    </script>

3. 操作元素

3.1 改变元素内容（获取或设置）

<button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>1123</p>
    <script>
        // 当我们点击了按钮，  div里面的文字会发生变化
        // 1. 获取元素 
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // 2.注册事件
        btn.onclick = function() {
            // div.innerText = '2019-6-6';
            div.innerHTML = getDate();
        }

        function getDate() {
            var date = new Date();
            // 我们写一个 2019年 5月 1日 星期三
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();
            return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
        }
        // 我们元素可以不用添加事件
        var p = document.querySelector('p');
        p.innerHTML = getDate();
    </script>

innerText和innerHTML的区别：

  • 1.获取内容时的区别：
    ​ innerText会去除空格和换行，而innerHTML会保留空格和换行

  • 2.设置内容时的区别：
    ​ innerText不会识别html，而innerHTML会识别

<script>
        // innerText 和 innerHTML的区别 
        // 1. innerText 不识别html标签 非标准  去除空格和换行
        var div = document.querySelector('div');
        // div.innerText = '<strong>今天是：</strong> 2019';
        // 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
        div.innerHTML = '<strong>今天是：</strong> 2019';
        // 这两个属性是可读写的  可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>

3.2 常用元素的属性操作

<button id="ldh">刘德华</button>
    <button id="zxy">张学友</button> <br>
    <img src="images/ldh.jpg" alt="" title="刘德华">

    <script>
        // 修改元素属性  src
        // 1. 获取元素
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        // 2. 注册事件  处理程序
        zxy.onclick = function() {
            img.src = 'images/zxy.jpg';
            img.title = '张学友思密达';
        }
        ldh.onclick = function() {
            img.src = 'images/ldh.jpg';
            img.title = '刘德华';
        }
    </script>

3.3 表单元素的属性操作

<button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2. 注册事件 处理程序
        btn.onclick = function() {
            // input.innerHTML = '点击了';  这个是 普通盒子 比如 div 标签里面的内容
            // 表单里面的值 文字内容是通过 value 来修改的
            input.value = '被点击了';
            // 如果想要某个表单被禁用 不能再点击 disabled  我们想要这个按钮 button禁用
            // btn.disabled = true;
            this.disabled = true;
            // this 指向的是事件函数的调用者 btn
        }
    </script>

3.4 自定义属性操作

<div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        // 1. 获取元素的属性值
        // (1) element.属性
        console.log(div.id);
        //(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
        // 2. 设置元素属性值
        // (1) element.属性= '值'
        div.id = 'test';
        div.className = 'navs';
        // (2) element.setAttribute('属性', '值');  主要针对于自定义属性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是class 不是className
        // 3 移除属性 removeAttribute(属性)    
        div.removeAttribute('index');
    </script>

H5自定义属性：
自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’) 获取。
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

 <script>
        var div = document.querySelector('div');
        // console.log(div.getTime);
        console.log(div.getAttribute('getTime'));
        div.setAttribute('data-time', 20);
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));
        // h5新增的获取自定义属性的方法 它只能获取data-开头的
        // dataset 是一个集合里面存放了所有以data开头的自定义属性
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        // 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>

4. 有关重点知识介绍

4.1 排他操作

如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：

  1. 所有元素全部清除样式（干掉其他人）

  2. 给当前元素设置样式 （留下我自己）

  3. 注意顺序不能颠倒，首先干掉其他人，再设置自己

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        // 1. 获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        // btns得到的是伪数组  里面的每一个元素 btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                // (2) 然后才让当前的元素背景颜色为pink 留下我自己
                this.style.backgroundColor = 'pink';
            }
        }
        //2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想
    </script>
</body>
</html>

4.2 创建元素的三种方式

    <script>
        // 三种创建元素方式区别 
        // 1. document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
         var btn = document.querySelector('button');
         btn.onclick = function() {
             document.write('<div>123</div>');
         }

        // 2. innerHTML 创建元素
        var inner = document.querySelector('.inner');
         for (var i = 0; i <= 100; i++) {
             inner.innerHTML += '<a href="#">百度</a>'
         }
        var arr = [];
        for (var i = 0; i <= 100; i++) {
            arr.push('<a href="#">百度</a>');
        }
        inner.innerHTML = arr.join('');
        // 3. document.createElement() 创建元素
        var create = document.querySelector('.create');
        for (var i = 0; i <= 100; i++) {
            var a = document.createElement('a');
            create.appendChild(a);
        }
    </script>

4.3 innerTHML和createElement效率对比

innerHTML字符串拼接方式（效率低）

<script>
    function fn() {
        var d1 = +new Date();
        var str = '';
        for (var i = 0; i < 1000; i++) {
            document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';
        }
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();
</script>

createElement方式（效率一般）

<script>
    function fn() {
        var d1 = +new Date();

        for (var i = 0; i < 1000; i++) {
            var div = document.createElement('div');
            div.style.width = '100px';
            div.style.height = '2px';
            div.style.border = '1px solid red';
            document.body.appendChild(div);
        }
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();
</script>

innerHTML数组方式（效率高）

<script>
    function fn() {
        var d1 = +new Date();
        var array = [];
        for (var i = 0; i < 1000; i++) {
            array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
        }
        document.body.innerHTML = array.join('');
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();
</script>
我是一阵风xu
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webapi demo mvc4
10-11
总结来说，这个WebAPI Demo MVC4项目是一个学习和实践WebAPI、MVC4、Knockout.js和jQuery交互的好例子，它涵盖了后端服务开发、前端数据绑定和交互的一系列关键技术。通过此项目，开发者可以深入理解如何在实际项目...
dom4j-1.6.1和API
10-10
在 1.6.1 版本中，DOM4J 提供了对 XML 解析、操作和生成的强大支持，是开发人员在 Java 中处理 XML 的首选工具之一。本文将深入探讨 DOM4J 的核心概念、主要功能和 API 使用方法。 ### 1. DOM4J 核心概念 - **...
WebAPI的 DOM
qq_39114788的博客
03-23 104
一、DOM 文档对象模型（DOM)，是html或者xml的标准编程接口。 1、获取元素 1）根据ID获取 使用getElementByID（）
web api 文档 html css js
天涯海风的博客
09-15 3732
Web API Web API介绍 API的概念 API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 任何开发语言都有自己的API API的特征输入和输出(I/O) API的使用方法(console.lo...
WebAPI 之 DOM
chengyu0726的博客
05-09 213
DOM：由W3C定义的一系列接口，可以改变网页内容、结构和样式。 API（Application Programming Interface）：应用程序编程，提供函数库。 Web API：是浏览器提供的一套浏览器功能（BOM）和页面元素（DOM）的API。 ...
webApi (一) DOM操作
fjd7474的博客
03-01 603
webApi 之 DOM操作DOM1. DOM简介1.1 什么是DOM1.2 DOM树2 获取元素2.1 根据id获取2.2 根据标签名获取2.3 通过 HTML5 新增的方法获取2.4 获取特殊元素（body，html）3 事件基础3.1 事件三要素3.2 常见的鼠标事件4 操作元素4.1 改变元素内容4.2 修改元素属性4.3 表单元素的属性操作4.4 样式属性操作4.4.1 element.style 行内样式操作4.4.1 element.className 类名样式操作4.5 样式操作总结4
python写xml文件_用python写xml文件
weixin_39860064的博客
11-25 157
def writeInfoToXml(filename, config_id, obj_name):from xml.dom.minidom import Document'''eg:Web ServersDenial of ServiceGeneral'''# 创建dom文档doc = Document()# 创建根节点modify_node = doc.createElement('modif...
带有定位当前位置的百度地图前端web api实例代码
09-02
整个示例的核心在于结合使用HTML5 Geolocation API获取用户位置，百度地图API进行地图展示和坐标转换，以及jQuery简化DOM操作。这样的组合使得开发者能够快速构建出具备实时定位功能的地图应用。 总结起来，本实例...
javascript DOM 操作基础知识小结
12-11
本篇将总结DOM操作的基础知识，重点讲解如何添加元素以及使用节点属性。 1. DOM基础 DOM树中的节点类型包括： - Document：文档的根节点，所有其他节点都隶属于它。 - DocumentType：用于表示<!DOCTYPE>声明的...
web技术DOM
06-05
jQuery是广泛使用的JavaScript库，简化了DOM操作和事件处理。例如，jQuery的`$(selector).html()`可以轻松地更改匹配选择器元素的HTML内容，而`$(document).ready(function() { ... })`确保在DOM加载完成后执行代码...
Web API—DOM（一）
qq_43352105的博客
02-02 141
文章目录DOM-Web APIAPI概念Web API概念DOMDOM操作—获取元素根据id获取根据标签名获取根据name属性获取根据class属性获取根据选择器获取标签内部内容属性DOM—添加事件事件监听常用事件监听方法非表单元素属性this指针案例分析表单元素属性案例分析自定义属性style样式属性案例分析 DOM-Web API API概念 API（application programming interfance）应用程序编程接口，预先定义的函数，提供应用程序与开发人员得以访问一组例程的能力，而
WebAPI之DOM
m0_67683346的博客
11-04 383
DOM接口中一些简单常用的操作
WebAPI——DOM
SilentLand的博客
07-24 314
DOM、DOM查询、事件
WebAPI---DOM
valentinelzt的博客
04-07 143
获取元素的方法 根据ID获取 语法：document.getElementById(id) 作用：根据ID获取元素对象 参数：id值，区分大小写的字符串 返回值：元素对象 或 null <body> <div id="time">2019-9-9</div> <script> // 因为我们文档页面从上往下加载，所...
WebAPI之DOM介绍， 获取页面元素，注册事件及应用，样式操作及应用
北枫林
04-29 468
Web API Web API介绍 API的概念 API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 任何开发语言都有自己的API API的特征输入和输出(I/O) Web API的概念 浏览器提供的一套操作浏览器功...
JavaScript（WebAPI——DOM详解）
最新发布
小小码农
03-14 339
JavaScript（WebAPI——DOM详解）
WebAPI之DOM事件操作详解
qq_43537721的博客
05-26 182
WebAPI之事件操作详解；事件基础、事件高级、鼠标事件和键盘事件
Web前端学习笔记——JavaScript之WEBAPI、BOM、DOM及获取页面元素
唯恋殊雨的博客
09-24 2502
Web API Web API介绍 API的概念 API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 任何开发语言都有自己的API API的特征输入和输出(I/O) API的使用方法(console.log()) We...
JavaScript----WebAPI,DOM
你的小甜甜的博客
12-12 188
WebAPI介绍: API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节 WebAPI,浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM),是针对于浏览器提供的接口,主要针对浏览器做交互效果,里面基本上由输入和输出函数组成 DOM: 什么是DOM: DOM文档对象模型,是由W3C组织推荐的一种处理可扩展标记语言的标准编程

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值