JavaScript学习笔记20

最新推荐文章于 2022-06-04 14:12:56 发布
最新推荐文章于 2022-06-04 14:12:56 发布
阅读量131 收藏
点赞数
分类专栏： 学习笔记 JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46334272/article/details/115859057
版权

一、DOM 基本操作(大部分都是类数组)——方法类操作

1.对节点的增删改查

()括号里面都不用写.或#

查
查看元素节点

document 代表整个文档

（如果给 html 标签上面再套一层标签就是 document）

document.getElementById()
元素 id 在 Ie8 以下的浏览器，不区分 id 大小写，而且
也返回匹配 name 属性的元素，通过 id 标识我们来选择这个元素，一一对应

在这里插入图片描述

除了 id 以外，其余选择出来的都是一组，很少用 id 选择器


.getElementsByTagName()
标签名，这是一个类数组，
最主流的用法，经常用

把页面里面所有的 div 都选择出来

在这里插入图片描述
在这里插入图片描述

从 dom 开始，我们所学的一切系统给我们生成的成组的东西，基本上都是类数组


加个[0]就选中了第一个 div，如果不加 0，那个 div 表示的是一个数组，设置背景颜色就会报错

在这里插入图片描述


getElementsByName();
IE 不支持需注意，只有部分标签 name 可生效（表单，表单
元素，img，iframe）
不是在所有的浏览器都能用——开发一般不用

在这里插入图片描述


把下面所有的 div 都拿出来

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

只拿出第二个 div，加上[1] ，或者在控制台上打 div[1]


选择第一个 p 的方式如下
在这里插入图片描述


只拿出 demo 的 p 标签写法如下：
在这里插入图片描述


注意哪怕整个文档只有一个 demo，也要加[0]，不然选出来的就是一个组


.getElementsByClassName()
类名 ->缺点： ie8 和 ie8 以下的 ie 版本中没有，可以多个 class 一起，不是所有浏览器都能用


.querySelector()
css 选择器，只能选一个，在 ie7 和 ie7 以下的版本中没有


.querySelectorAll()
css 选择器，全选，选一组，在 ie7 和 ie7 以下的版本中没有


.querySelectorAll()和.querySelector()
选出来的元素不是实时的（是静态的）
所以一般不用，其他的再怎么修改，跟原来的没有关系


id 选择器不能太依赖，一般当顶级框架存在，在 css 中一般用 class 选择器


querySelector()和.querySelectorAll()选出来的元素不是实时的，是静态的，是副本

在这里插入图片描述


下面的都是实时的

在这里插入图片描述


querySelectorAll()选中了所有的 div，但是实时操作不能实时反馈

在这里插入图片描述

二、DOM 基本操作——非方法类的操作

遍历节点树：(灵活，兼容好)——关系类的选择

  • parentNode → 父节点 (最顶端的 parentNode 为#document);
  • childNodes → 子节点们（直接的节点数）节点包括文本节点，属性节点
  • firstChild → 第一个子节点
  • lastChild → 最后一个子节点
  • nextSibling →后一个兄弟节点
  • previousSibling → 前一个兄弟节点


parentNode —》》父节点

<div>
        <span></span>
        <strong></strong>
        <div>
            <p></p>
        </div>
    </div>
    <script>
        var strong = document.getElementsByTagName('strong')[0];
    </script>

在这里插入图片描述

childNodes-----》》子节点们

    <div>
        <strong>
            <span>1</span>
        </strong>
        <span></span>
        <em></em>
    </div>
    <script>
        var div = document.getElementsByTagName('div')[0];
    </script>

在这里插入图片描述

节点为什么是7？
第一个节点是<div>后面的文本节点（空格回车），
第二个节点是元素节点<strong><span>1</span></strong>，
第三个节点是跟着的文本节点（空格回车），
第四个节点是<span></span>，
第五个是跟着的文本节点（空格回车），
第六个是<em></em>，
第七个是跟着的文本节点（空格回车）

节点的类型

后面的数字是调用nodeType返回的数字

元素节点----1
属性节点----2（基本没用）
文本节点----3
注释节点----8
document—9
DocumentFragment-----11


<div>
        <!-- this is comment -->
        <strong></strong>
        <span></span>
    </div>
    <script>
        var div = document.getElementsByTagName('div')[0];
    </script>

在这里插入图片描述

第一个节点是<div>后面的文本节点（空格回车），
第二个节点是注释节点，
第三个节点是跟着的文本节点（空格回车），
第四个节点是元素节点<strong></strong>，
第五个是跟着的文本节点（空格回车），
第六个是<span></span>，
第七个是跟着的文本节点（空格回车）


<div>
        123
        <!-- this is comment -->
        <strong></strong>
        <span></span>
    </div>
    <script>
        var div = document.getElementsByTagName('div')[0];
    </script>

在这里插入图片描述

七个，123和空格等是一个文本


firstChild 和 lastChild

 <div>
        123
        <!-- this is comment -->
        <strong></strong>
        <span></span>
    </div>
    <script>
        var div = document.getElementsByTagName('div')[0];
    </script>

在这里插入图片描述


** nextSibling →后一个兄弟节点 ，previousSibling → 前一个兄弟节点**

<div>
        <!-- this is comment -->
        <strong></strong>
        <span></span>
    </div>
    <script>
        var strong = document.getElementsByTagName('strong')[0];
    </script>

在这里插入图片描述


基于元素节点树的遍历（不含文本节点）

(除children外，其余ie9及以下不兼容）

<div>
        <!-- this is comment -->
        <strong></strong>
        <span></span>
    </div>
    <script>
        var div = document.getElementsByTagName('div')[0];
    </script>

在这里插入图片描述


children—>只返回当前元素的元素子节点

在这里插入图片描述

在这里插入图片描述


node.childElementCount ( === node.children.length)
当前元素节点的子元素节点个数(IE 不兼容)——基本不用，因为与 length 相等

在这里插入图片描述
在这里插入图片描述


firstElementChild -> 返回的是第一个元素节点(IE 不兼容)
lastElementChild -> 返回的是最后一个元素节点(IE 不兼容)

在这里插入图片描述
在这里插入图片描述

nextElementSibling / previousElementSibling
返回后一个/前一个兄弟元素节点（IE 不兼容)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

除 children 外，parentElement、node.childElementCount、firstElementChild、lastElementChild、nextElementSibling、 previousElementSibling 在 ie9 及以下不兼容

真正常用的就是 children，兼容性好


每一个节点的四个属性

1、nodeName

元素的标签名，以大写形式表示,只读，不能写

例 nodeName

   <div>
        123
        <!-- this is comment -->
        <strong></strong>
        <span></span>
        <em></em>
        <i></i>
        <b></b>
    </div>
    <script>
        var div = document.getElementsByTagName('div')[0];
    </script>

在这里插入图片描述

2、nodeValue

Text 文本节点或 Comment 注释节点的文本内容,可读写

   <div>
        123
        <!-- this is comment -->
        <strong></strong>
        <span></span>
        <em></em>
        <i></i>
        <b></b>
    </div>
    <script>
        var div = document.getElementsByTagName('div')[0];
    </script>

在这里插入图片描述
在这里插入图片描述

3、nodeType（最有用）

该节点的类型，只读，返回这个 div 的所有的元素节点

在这里插入图片描述


把 div 下面所有的直接子元素节点挑出来，放在数组里面返回，不能用 children

   <div>
        123
        <!-- this is comment -->
        <strong></strong>
        <span></span>
        <em></em>
        <i></i>
        <b></b>
    </div>
    <script>
        var div = document.getElementsByTagName('div')[0];

        function retElementChild(node) {
            //no children
            var temp = {
                    length: 0,
                    push: Array.prototype.push,
                    splice: Array.prototype.splice
                },
                child = node.childNodes;
            len = child.length;
            for (var i = 0; i < len; i++) {
                if (child[i].nodeType === 1) {
                    temp.push(child[i]);
                }
            }
            return temp;
        }
        console.log(retElementChild(div));
    </script>

在这里插入图片描述

4、attributes

Element 节点的属性集合

<div id="only" class="demo"></div>
    <script>
        var div = document.getElementsByTagName('div')[0];
    </script>

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

属性名不能改，属性值可以改，但是我们一般不用这种方法
我们一般用getAttribute和setAttribute去取


5、Node.hasChildNodes()

节点的一个方法Node.hasChildNodes():
判断是否有子节点，返回值是true或false

<div id="only" class="demo">
        <span></span>
    </div>
    <script>
        var div = document.getElementsByTagName('div')[0];
    </script>

在这里插入图片描述

<div id="only" class="demo">
        <!-- this is comment -->
    </div>
    <script>
        var div = document.getElementsByTagName('div')[0];
    </script>

在这里插入图片描述

<div id="only" class="demo">

    </div>
    <script>
        var div = document.getElementsByTagName('div')[0];
    </script>

在这里插入图片描述

当且仅当这种情况下是 false（没空格，没回车）

<div id="only" class="demo"></div>
    <script>
        var div = document.getElementsByTagName('div')[0];
    </script>

在这里插入图片描述


属性的节点是 div 上面的，不是 div 里的

在这里插入图片描述

-恰饭第一名-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS笔记案例
weixin_46396624的博客
06-30 357
一、JavaScript简介 1.什么是JavaScript JavaScript简称JS，由网景公司开发的客户端 脚本 语言(java服务器端的编程语言)，不需要编译，可以直接运行 Web前端三层： 结构层HTML，定义页面的结构 样式层CSS，定义页面的样式 行为层JavaScript用来实现交互，提升用户的体验 2.JavaScript 在客户端动态的操作页面 eg：购物车 在客户端做数据校验 在客户端发送异步请求 二、引用方式 1.内联方式 在页面中使用script标签，在script
javaScript笔记及案例(全)
ABbCcCDlDd的博客
06-30 186
一、JavaScript简介 1、什么是Javascript？ Javascript简介js，由网景公司开发的客户端脚本语言（Java服务器端的编程语言），不需要编译，可以直接运行 web前端三层： 结构层HTML定义页面的结构 样式层css定义页面的样式 行为层Javascript用来实现交互，提升用户体验 2、Javascript作用 在客户端动态的操作页面 eg：购物车 在客户端做数据校验 在客户端发送异步请求 二、引用方式 1、内联方式 在页面中使用script标签，在上次平台标签中编写js代码 2
50个javaScript语法案例
qq_39041201的博客
05-14 1516
1.求1-100之间所有偶数的和 // 求1-100之间所有偶数的和 var sum = 0; var i =1; while (i<=100) { if (i%2 === 0) { sum += i; } i ++ ; } console.log(sum);//2550 2.do…while 求1-100 之间所有数的和 //do...while 求1-100 之间所有数的和 var sum =0;
Java Script入门最全笔记(附带具体案例)
热门推荐
PIKapikaaaa的博客
03-25 1万+
JS介绍 ECMAScript DOM基本操作 BOM理解
JavaScript案例笔记(3)
weixin_42025752的博客
09-11 98
// 获取数组中大于10的数 //方法一 var arr1 = [2,0,6,1,77,8,52,0,25,7]; var arr2 = []; var t = 0; for (var i = 0; i < arr1.length; i++) { if (arr1[i]>10) { ...
JavaScript 案例学习笔记
你若盛开，清风自来。
03-14 1380
1 输出Hello world 2 数据类型检测 3 浮点数精度问题 4 用js改变h5的内容 5 函数的调用：开关灯 6 登录验证界面 7 ECharts图表库
JavaScript笔记（全）
程序猿小九九的博客
06-04 6250
JavaScript是一门世界上最流行的脚本语言一个合格的后端人员，必须要精通JavaScriptECMAScript可以理解为JavaScript的一个标准最新版本已经到es6但是大部分浏览器还只停留在支持es5代码上开发环境~线上环境，版本不一致内部标签 外部引入我的第一个JavaScript程序.html qj.js 03、浏览器控制台使用 04、数据类型快速浏览 变量 numberjs不区分小数和整数，number 字符串‘abc’“abc”布尔值truefalse逻辑运算 比较运算符 这
JS笔记+案例总结
lxk200272的博客
06-28 307
一、JavaScript简介 1.什么是Javascript？ JavaScript简称JS，由网景公司开发的客户端 脚本 语言（Java服务器端的编程语言），不需 要编译，可以直接运行 Web前端三层： 结构层HTML定义页面的结构 样式层CSS定义页面的样式 行为层JavaScript用来实现交互，提升用户体验 2.JavaScript作用 在客户端动态的操作页面 eg:购物车 在客户端做数据校验 在客户端发送异步请求 二、引用方式 1.内联方式 在页面中使用scr
JavaScript学习笔记（6）BOM（浏览器对象模型）pc网页特效（停止学习）
Dontla的博客
04-20 318
文章目录什么是BOM（浏览器对象模型）BOM中的window对象（顶级对象）window对象常见事件窗口加载事件 window.onload（等待文档内容全部加载完成才会触发，这样可以把js代码写在任何位置）使用方法：window.addEventListener('load', function() {})（这种方法可使用多个）文档加载事件 使用方法：document.addEventListener('DOMContentLoaded', function() {})（可以不等待样式表、图片、flash
JavaScript高级笔记
qq_42312329的博客
08-13 89
今日内容： 1. JavaScript： 1. ECMAScript： 2. BOM： 3. DOM： 1. 事件 DOM简单学习：为了满足案例要求 * 功能：控制html文档的内容 * 获取页面标签(元素)对象：Element * document.getElementById("id值"):通过元素的id获取元素对象 * 操作Element对象： 1. 修改属性值： 1. 明确获取的对象是哪一个？ 2. 查看API文档，找其中有哪些属性可以设置 2. 修改标签体内容： *
vue.js学习笔记六
学习记录
06-01 2522
一、全局组件和局部组件 当我们通过调用Vue.component（）注册组件时，组件的注册是全局的 这意味着该组件可以在任意Vue示例下使用 如果我们注册的组件是挂载在某个实例中，那么就是一个局部组件 <div id="app"> <cpn></cpn> <cpn></cpn> <cpn></cpn> </div> <div id
JavaScript之DOM操作一
学习记录
02-09 1184
一：DOM简介 1. Web APIs和JS基础关联性 1.1 JS的组成 2. API和Web API 2.1 API （application programming interfac，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节 简单理解：API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能 2.2 Web API Web API 是浏览器提供的一套操作浏览器功能（bom）和页面元素
js小demo3（淘宝循环精灵图背景）
学习记录
03-03 951
<style> * { margin: 0; padding: 0; } .box { width: 300px; list-style: none; margin: 60px auto; } li { float: left; width: 35px; height: 35px; marg..
JavaScript之DOM操作二
学习记录
03-08 776
4.5 排他思想 案例1：百度换肤 案例2：表格隔行换色 案例3：表单全选取消全选案例 4.6 自定义属性操作 1、获取属性值 element.属性 获取属性值 element.getAttribute(‘属性’) 区别： element.属性 获取内置属性值(元素本身自带的属性) element.getAttribute(‘属性’) 主要获得自定义的属性，程序员自定义的属性 2、设置属性值 element.属性 = ‘值’ 设置内置属性值 element.setAttribute(‘
JavaScript学习笔记4
学习记录
03-07 708
一、初识引用值 1.1 数组（下面方括号的），arr =也是数组 例 var arr = [1,2,3,4,5,6,7,”abc”,undefined]; arr [0] 代表查数组的第一位，因为数字是从 0 开始的算的 arr [0] = 3; 是指把数组的第一位改成 3，显示 3,2,3,4,5,6,7, ”abc”,undefined arr.length;是数组的长度，有多少位就有多少 console.log(arr.length); //答案是 8 位 例：利用 for 循环把数组中的
JavaScript学习笔记26
学习记录
04-28 618
五、事件处理模型 — 事件冒泡、捕获 事件处理的两个模型：事件冒泡、捕获（不能同时存在） 只点了黄色区域，但是出现了 box,content,wrapper，往下漏了，就是事件冒泡 1、事件冒泡： 结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上） 结构上存在父子关系的元素，如果点击到子元素，会一级级向父元素传递这个事件（从代码的角度是自底向上一层层冒泡的） 例：加了 margin，只点黄色的，还是出现了 box,content,wrap
JavaScript学习笔记28
学习记录
05-02 428
一、json JSON是一种传输数据的格式（以对象为样板，本质上就是对象，但用途有区别，对象就是本地用的，json是用来传输的） JSON.parse()； string---->json JSON.stringify()； json---->string 例：json的属性名必须加双引号（传的是二进制文本） ...
JavaScript学习笔记19
学习记录
04-18 400
一、什么是DOM 1、DOM---->Document Object Model （文档对象模型） 2、DOM定义了表示和修改文档所需的方法（对象、这些对象的行为和属性以及这些对象之间的关系）
JavaScript之DOM操作三
学习记录
03-20 328
6、DOM重点核心的总结 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 1、对于Javas，为了能够使Javascript操作HTML，Javascript就有了一套自己的DOM编程接口 2、对于HTML、dom使得html形成一颗树，包括文档、元素、节点 我们获取过来的DOM元素是一个对象（objec
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值