总结25 前端之高级JavaScript第二部分

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

补充 js在标签中绑定事件

js可以在直接标签中绑定事件和函数
格式:<自定义标签名 JS事件名="javascipt:该事件被触发后所调用的函数方法()"></自定义标签名>
列如:

<li onclick="javascipt:post('+cid+','+i+')"><a href="javascript:void(0)">' + i + '</a></li>

在这里插入图片描述
格式二:<自定义标签名 JS事件名="该事件被触发后所调用的函数方法()"></自定义标签名>

列如:

<a class="btn" id="favorite" onclick="addFavorite()"><i class="glyphicon glyphicon-heart-empty"></i>点击收藏</a>

补充:将字符串类型的数字转换为数字

可以将一个为数字的网页元素更改为数字类型.
方法:parseInt(字符串类型的数字变量);
注意:必须内容全部为数字,不然会转换失败

JS中,对象间大致的继承关系.

在这里插入图片描述
不多解释了,此图中 Node为createAttribute,createComment,createElement,createTextNode,Element(getElement对象实例化)这五个对象的间接父类对象.
而Document为其直接的子类对象.

函数中,this的用法

在function中,有一个’this’对象.他代表着调用处传递过来的’标签对象’.
如

在这里插入图片描述

将标签对象实例化的多种方式

此前我们提到过,通过document.getElementById()的方式来将某个标签对象实例化.
但’getElementById’是通过id来指向某个标签,实际上还有多种方式指向标签.
此处略过getElementById方式,因为已经讲过了.

方式一 根据标签名,获取标签数组

根据标签名称获取标签对象们。返回值是一个数组,如果调用,则需要指定数组索引值
创建格式一:document.getElementsBiTagName("标签名称");
列如:

<input type="button" value="按钮">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
var tagNameOfArr = document.getElementsByTagName("input");
    //此时返回了所有对应的标签对象,输出一下长度
    document.write("通过标签名称获取到的标签对象总数为:"+tagNameOfArr.length);

创建格式二(不推荐):document.getElementsBiTagName("标签名称")[索引值];
列如:

var tagNameOneOfArr = document.getElementsByTagName("input")[2];

根据标签名称,指定获取其中单个标签对象.
注:不推荐用,因为如果要获取单个标签对象,那么直接在其标签上加个id属性,通过id获取即可.

方式二 根据Class属性值获取标签对象

根据Class属性值获取元素对象们。返回值是一个数组,如果调用,则需要指定数组索引值

创建格式一:document.getElementsByClassName("class属性值");
列如:

<h1 class="nameOfClass">中国第一</h1>
<font class="nameOfClass" color="orange">世界最强</font>
<h2 class="nameOfClass">世界大同</h2>
<a class="nameOfClass" href="http://www.baidu.com"></a>
<script>
var classNameOfArr = document.getElementsByClassName("nameOfClass");

    //输出下长度,看看获取到了多少个对象
    document.write("通过class属性值获取到的标签对象总数为:"+classNameOfArr.length);
</script>

创建格式二(不推荐):document.getElementsByClassName("class属性值")[索引值];

方式三 根据name属性值获取标签对象

创建格式一:document.getElementsByName("name属性值");

<img name="nameOfname" src="http://file-d.boxuegu.com/defaulthead/14.png"><br>
<select name="nameOfname">选项标签<option value="valueid">哈</option></select><br>
<h2 name="nameOfname">世界大同!</h2><br>
<script>
    //创建格式一:document.getElementsByName("name属性值");
    var nameOfArr = document.getElementsByName("nameOfname");
    //查看多少个
    document.write("通过class属性值获取到的标签对象总数为:"+nameOfArr.length);
nameOfArr.setAttribute()

创建格式二(不推荐):document.getElementsByName("name属性值")[索引值];

创建节点对象

概念

在这里插入图片描述
节点,通俗说就是一个标签,他有多个子标签,那么每个子标签就是一个节点,而最初的标签(即:最外面的标签)则称之为’最高父级标签(节点)’.
而在很多应用场景中,基层最低的标签则为文本标签,也称之为文本节点(也就是字符串).

而本目录中,则仅讲解节点的创建方式.
说到节点创建的方式,则要明白创建方式因节点的类型不同而不同.
有以下几种方式,其中注释节点和属性节点则省略不讲,因为用得不多.

方式一:createAttribute(name) 创建拥有指定名称的属性节点，并返回新的 Attr 对象。(省略)
方式二:reateComment() 创建注释节点。(省略)
方式三:createElement()创建标签节点。(常用)
方式四:createTextNode()创建文本节点。(常用

注意事项,必读!

一 关于创建文本节点/创建标签(元素)节点时,如果它被当作一个’直接父级节点’,那么需要这个**‘直接父级节点’本身就必须被插入到最高父级的标签中.**
比如,当你要在表格中插入元素时,那么,在’直接父级节点’为’tr’标签的情况下,那么这个’直接父级节点’就必须被appendChild方法插入到该’td’(最高父级标签)中.
而最高父级标签是哪个,不一定要视’直接父级节点’的标签是什么,比如此’h1’标签作为’直接父级节点’,就可以插入到与’h1’毫不相干的最高父级标签中.
如果不这样做,'直接父级节点’和其’隶属的子节点’将只能存在内存中,而不能在网页中显示出来.这样就失去了意义.
二 可以单独将一个’直接父级’的标签节点或文本节点插入到最高父级标签中,但如果是标签节点,则毫无意义.

在这里插入图片描述

一 创建标签节点

格式:var 自定义直接父级/隶属子级节点对象名 = document.createElement("标签名");
列如:

var addObjOfTag = document.createElement("h1");

二 创建文本节点

格式:var 自定义隶属子级节点对象名 = document.createTextNode("文本"/字符串变量);
列如:

var addObjOfText = document.createTextNode("你好!");

Node 节点对象的应用

概念

'Node’是一个节点对象,它的主要作用就是能够将之前创建了的节点应用到网页中去运行或者显示出来

appendChild 应用节点对象

appendChild主要用于将创建了的节点对象应用在网页中.
它会向节点的子节点列表的结尾添加新的子节点。
即:既可以向最高父级标签添加子节点,也可以向某个’直接父级(标签)节点’添加节点
在这里插入图片描述
格式:自定义最高父级标签对象名/直接父级节点对象名.appendChild(自定义隶属子级节点对象名);
列如:

optionObj.appendChild(textObj);

removeChild 删除节点对象

删除（并返回）当前节点的指定子节点。
在这里插入图片描述
格式:自定义最高父级标签对象名/直接父级节点对象名.removeChild(自定义隶属子标签实例化对象 注意,是实例化对象!);
列如:

idOfSelect.removeChild(idOfDadi);

replaceChild() 替换节点

用新节点替换一个子节点。即:以节点对象的方式,将某个子标签实例化对象替换为该节点对象的元素
在这里插入图片描述
格式:自定义最高父级标签对象名/直接父级节点对象名.removeChild(欲新设置的自定义隶属子级节点对象名,需要被替换的自定义隶属子标签实例化对象);
列如:

 genghuan.replaceChild(huangjiajuTag,dadiId);

节点增删改的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- * Node：节点对象，其他5个的父对象
		* 特点：所有dom对象都可以被认为是一个节点
		* 方法：
			* CRUD dom树：
		* 属性：
			* parentNode 返回节点的父节点。
			-->
</head>
<body>
<select id="idOfSelect" >
<option id="dadi">大地</option>
</select>
<input type="button" id="idOfButton" value="添加列表">
<input type="button" id="idOfButtonTwo" value="删除'大地'列表">
<input type="button" id="idOfButtonThree" value="更改'大地'列表">
<script>
    function f() {
    /* appendChild()：向节点的子节点列表的结尾添加新的子节点。即:既可以向最高父级标签添加子节点,也可以向某个'直接父级(标签)节点'添加节点
        格式:自定义最高父级标签对象名/直接父级节点对象名.appendChild(自定义隶属子级节点对象名); */
        //用于追加子标签节点到select中
        var selectObj = document.getElementById("idOfSelect");
        //添加option标签节点
        var optionObj = document.createElement("option");
        //添加文本
        var textObj = document.createTextNode("列表内容1");
        //追加文本到option
        //自定义直接父级节点对象名.appendChild(自定义隶属子级节点对象名);
        optionObj.appendChild(textObj);
        //将直接父级标签节点追加到最高父级标签中.
        //自定义最高父级标签对象名.appendChild(自定义隶属子级节点对象名);
        selectObj.appendChild(optionObj);
    }
    var buttonObj = document.getElementById("idOfButton");
    buttonObj.onclick=f;
    //-----------------------------------------------------------
    /*       * removeChild()	：删除（并返回）当前节点的指定子节点。
    格式:自定义最高父级标签对象名/直接父级节点对象名.removeChild(自定义隶属子标签实例化对象 注意,是实例化对象!);
     */
    var buttonObjTwo = document.getElementById("idOfButtonTwo");
    buttonObjTwo.onclick=function (ev) {
        var idOfSelect = document.getElementById("idOfSelect");
        var idOfDadi = document.getElementById("dadi");
      idOfSelect.removeChild(idOfDadi);
    }
//---------------------------------------------------------------------
    /*
    * replaceChild()：用新节点替换一个子节点。即:以节点对象的方式,将某个子标签实例化对象替换为该节点对象的元素
    *自定义最高父级标签对象名/直接父级节点对象名.removeChild(欲新设置的自定义隶属子级节点对象名,需要被替换的自定义隶属子标签实例化对象)
     */
    var buttonObjThree = document.getElementById("idOfButtonThree");
    buttonObjThree.onclick=function (ev) {
        var genghuan = document.getElementById("idOfSelect");
        var dadiId = document.getElementById("dadi");
        var huangjiajuTag = document.createElement("option");
        var huangjiajuText = document.createTextNode("黄家驹");
        huangjiajuTag.appendChild(huangjiajuText);
        genghuan.replaceChild(huangjiajuTag,dadiId);
    }
</script>
<script></script>
</body>
</html>

ElementById 属性值操作

ElementByld可以对’标签对象’的属性进行增删改
在使用该对象前,需要先通过’getElementByld’将标签进行对象实例化

设置或增加属性

规则:
1 如果属性不存在,则视为添加,
2 如果属性存在 则视为更改属性值
格式:自定义标签对象名.setAttribute("属性名","属性值");
列如:

imgObj.setAttribute("href","http://www.baidu.com");

删除属性

格式:自定义标签对象名.removeAttribute("属性名");
列如:

imgObj.removeAttribute("href");

InnerHTML的强化作用

概念

我们都知道,InnerHTML可以直接对某个标签的代码进行替换.
那么这次,不仅可以替换,还可以在原有的基础上对其进行’代码追加’,而代码追加则需要用到’+='符号
该作用的一个好处是,可以略过’Node节点对象’和createAttribute,createComment,createElement
,createTextNode这四个节点创建对象**,直接实现对节点的增删改查**.

为了节省时间,此时我省略了通过docoment指向标签的标识符从而获取对象的步骤.
在这里插入图片描述

使用

格式:自定义标签对象名.innerHTML += "要追加的代码内容";
列如:

htmlObj.innerHTML += "<input type='text'>";

'style’方法直接修改定义属性

概念

任何标签和标签对象都有’style’属性.我们可以通过’style’来修改或定义标签属性
style实际上就是css,
'style’不仅可以作为一个CSS的围堵式标签去美化或修改HTML代码,也可以作为一个方法去美化或修改HTML的代码属性等等
此处以标签对象举例,为了节省时间,此时我同样省略了通过docoment指向标签的标识符从而获取对象的步骤.

使用格式

格式一(推荐):自定义标签对象名.style.属性名 = "属性值";
列如:

htmlObj.style.width = "200px";

格式二(不推荐):自定义标签对象名.style = "属性名1:对应的属性值;属性名2:对应的属性值;属性名3:对应的属性值"
注意:最后一个属性值不需要加分号’;’.不推荐的原因是容易输入错误.
在这里插入图片描述

常用事件(补充)

  • 常见的事件：

    1. 点击事件：
      1. onclick：单击事件
      2. ondblclick：双击事件
    2. 焦点事件
      1. onblur：失去焦点
      2. onfocus:元素获得焦点。

    3. 加载事件：
    1. onload：一张页面或一幅图像完成加载。

    1. 鼠标事件：

      1. onmousedown 鼠标按钮被按下。
      2. onmouseup 鼠标按键被松开。
      3. onmousemove 鼠标被移动。
      4. onmouseover 鼠标移到某元素之上。
      5. onmouseout 鼠标从某元素移开。

    2. 键盘事件：

      1. onkeydown 某个键盘按键被按下。
      2. onkeyup 某个键盘按键被松开。
      3. onkeypress 某个键盘按键被按下并松开。

    3. 选择和改变

      1. onchange 域的内容被改变。
      2. onselect 文本被选中。

    4. 表单事件：

      1. onsubmit 确认按钮被点击。
      2. onreset 重置按钮被点击。

onload 重要掌握事件

onload事件是一个功能非常强大的事件.
从字面理解就能明白,它的强大在于可以先其它代码加载完毕后,再加载事代码.
这样子的话,甚至script标签都可以直接写在第一行,就能通过Element对象获取标签对象了.
在这里插入图片描述

君を見つけて
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js通过class获取标签的value值_CSS选择器[attribute|= value] 和 [attribute^= value]的区别...
weixin_34547628的博客
12-03 3266
前言首先你需要知道[attribute | = value] 和 [attribute ^ = value] 分别是什么？①：[attribute | = value] ②：[attribute ^ = value]使用场景下面我用获取input为例，逐步描述何时使用[attribute | = value] 和 [attribute ^ = value]）①：type相同，name不同，没有cl...
js里面获取相同class的value
weixin_30838921的博客
12-13 734
var service_id = {};$(".service_id").each(function(index, el) {service_id[index] = el.value; }); 转载于:https://www.cnblogs.com/JiangBigShrimp/p/8031262.html
javaScript根据class的名字获取属性
ning_vina的专栏
05-15 1953
在实际开发中可能会通过javascript根据class获取html的元素，但由于一些浏览器不支持getElementbyClass 所以可以通过函数调用的方式获取： function getClass(tagName,className) //获得标签名为tagName,类名className的元素 { if(document.getElementsByClassNa...
js和jq根据className获取此className的所有value
qq_38004125的博客
06-09 1024
需求是获取某个className的所有value，我发现当我们直接使用$(‘.className’).val()的时候，我们只能获取到第一个class的值，后面的都无法获取到，最后百度后找到能获取到所有value的方法。 结果就是： consolr.log(numsArr) [“2”,“3”,“4”]...
编码题目一：能够根据要求使用javascript实现页面效果
whyszan的博客
04-20 100
标签中实现数据行的隔行换色功能，成品效果如下图所示。素材中提供了如下图所示的页面效果。
html5前端基础之JavaScript基础
最新发布
04-06
函数是JavaScript中的第一类对象，可以作为变量赋值、作为参数传递或作为其他函数的返回值。使用`function`关键字定义函数，例如`function greet(name) { console.log("Hello, " + name); }`。ES6引入了箭头函数，...
前端程序员需要了解的JavaScript之高级部分知识
qq_45163356的博客
05-04 3621
前言：这一篇文章主要讲解JavaScript高级的知识，涉及到原型，类，继承，模块化，正则匹配，以及promise的使用，还会了解到一些鼠标键盘事件以及关于前端页面内容的知识。学完这些你可以去学typescript了，加油呀 顶顶顶顶 ....................................
JavaScript前端开发案例教程-源代码.rar
07-02
JavaScript，作为全球最广泛使用的编程语言之一，是前端开发的核心技术。这个名为"JavaScript前端开发案例教程-源代码.rar"的压缩包文件提供了一系列实践案例，帮助开发者深入理解和掌握JavaScript在网页开发中的...
03-JavaScript-高级-第2天.zip
12-21
欢迎来到我们的WEB前端学习视频！在这个视频系列中，我们将带你深入了解WEB前端开发的基础知识和实践技巧。 这个视频系列适合那些对于网页设计和开发有兴趣的初学者和入门者。无论你是想要成为一名专业的前端工程师...
黑马程序员前端JavaScript高级——ES6学习笔记
weixin_44566194的博客
10-29 2938
黑马程序员前端教程的PPT和代码学习笔记，里面包含了面向对象的编程思想，以及构造函数，类和对象、原型链、箭头函数、数组和字符串新增方法、函数递归、深拷贝浅拷贝、正则表达式等知识点。本文是对CSDN其他博主记录的一个补充，因为黑马也是今年才陆续补充一些知识点的视频的，本文将其收录于此，雷同勿怪。
原生Js通过class属性值获取对象
Jinx
01-04 4万+
原生Js通过class属性值获取对象 window.onload = function(){ console.log(getElementByClassName("tag").length); console.log(getElementByClassName("tag")); } function getElementByClassName(classnames){ var objAr
js通过class获取标签里面的内容、修改class属性
热门推荐
JEFF_xieyuzhi的博客
03-22 4万+
js通过class获取标签里面的内容——看源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p class="demo"...
DOM基础操作（一）
Lyajpunov的博客
11-28 372
获取元素 /*根据ID获取元素,返回元素对象，没有返回none*/ /*根据标签名获取元素，返回元素对象的集合，数组的形式，没有返回空的数组*/ /*根据类名获取元素*/ /*返回指定选择器的第一个元素对象*/ /*返回指定选择器的第元素对象列表*/ <script> var abs = document.getElementById('abs'); console.log(abs); console.log(typeof abs); //打印返回的对象，更好
《web开发： JavaScript DOM获取元素》
yexiangCSDN的专栏
01-08 1089
一、JavaScript DOM获取元素 1、DOM获取元素 1.1 如何获取页面元素 DOM在我们实际开发中主要用来操作元素。 我们如何来获取页面中的元素呢? 1.1 如何获取页面元素 获取页面中的元素可以使用以下几种方式:  根据 ID 获取  根据标签名获取  通过 HTML5 新增的方法获取  特殊元素获取 1.2 根据 ID 获取 使用 getElementById() 方法可以获取带有 ID 的元素对象。 document.getElementByI...
JavaScript中DOM获取元素对象详解
sheizai的博客
03-08 636
DOM: 文档对象模型( Document Object Model ,简称DOM) . DOM树 文档:一个页面就是一个文档，在DOM中使用document表示 元素:页面中的所有标签都是元素，DOM中使用element表示 节点:网页中的所有内容都是节点(标签、属性、文本、注释等) , DOM中使用node表示 DOM以上内容都看做对象。 如何获取元素： 1根据ID获取 .getElemen...
dom js 同级_javascript-DOM操作
weixin_42512276的博客
12-31 268
第一章 API介绍​ API是一种事先定义好的函数，用来提供应用程序与开发人员基于某软件或硬件得以访问的一组例程，而又无需访问源码，或理解内部工作机制的细节。​ Web API接口：浏览器提供的一系列操作浏览器功能和页面元素的API(BOM和DOM)第二章 DOM(文档对象模型)2.1基本概念​ DOM:(Document Object Model)文档对象模型。当网页被加载时，浏览器会创建文档对...
2021-10-18 HTML复习总结
抱住小羊的卷卷
10-19 406
我同桌总结！！！ HTML的基本结构？ HTML是超文本标记语言，基本结构： ①文档声明（用来声明HTML文档所遵循的HTML规范和版本） ②根标签（用来包裹所有的网页内容） ③头部分（用来存放HTML文档的基本属性信息，网页的标题，文档使用的编码） ④体部分（用来存放可视化的网页内容） Form表单的作用是什么，如何实现？ 用于向服务器提交数据， 通过表单向服务器提交数据， 通过超链接向服务器提交数据 Form标签的常用属性有什么，作用是什么？ action表单的提交地址
03-获取元素的方法
的博客
06-05 274
根据id属性的值获取元素,返回来的是一个元素对象 document.getElementById(“id属性的值”); 根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 document.getElementsByTagName(“标签名字”); ！！！下面的几个,有的浏览器不支持： 根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对...
javascript高级编程第2版电子书免费下载指南
《javascript高级编程(第2版)》是一本深入讲解JavaScript编程的高级教材，该PDF文件可能是书籍的一部分，内容可能包括JavaScript语言的核心概念、函数式编程、对象导向编程、异步编程、DOM操作、模块化管理、浏览器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值