正文 

当前位置： 首页 > 代码 > java教程

javascript基础语法-dom，前端小白必知必会(代码片段)

若年封尘 若年封尘     2022-12-17     486

关键词：

DOM重点核心

文章目录


DOM树：

获取元素

有以下几种方式获取元素，返回的是一个元素对象。

var eleSelect = document.getElementById('selRate');

var lis = document.getElementsByTagName('li');

var nav = document.getElementsByClassName('nav');//H5新增获取元素方式

//返回指定选择器的第一个元素对象
//H5新增获取元素方式
var nav = document.querySelector('#nav');//id名
var li = document.querySelector('li');//标签名
var nav = document.querySelector('.nav');//类名

var lis = document.querySelectorAll('li');//获取所以li

注意：
getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用；getElementsByTagName() 方法获得的是一个带有指定标签名的对象的集合，所以需要btn[0]调用；
getElementsByClassName() 方法返回文档中所有指定类名的元素集合；
querySelector() 方法返回指定选择器的第一个元素对象。

<body>
	<textarea name="" id="text" cols="30" rows="10">123</textarea>
	<button>发布</button>
	<ul>
		
	</ul>
	<script>
		//1.获取元素
		var btn = document.getElementsByTagName('button');
		console.log(btn[0]);
		console.log(btn);
		console.log(text);
		var text = document.getElementById('text');
		console.log(text);
	</script>
</body>

输出结果：

JavaScript事件

1.执行事件的步骤

2.常见的鼠标事件

3.常见的键盘事件

4.常见的表单事件

5.常见的编辑事件

6.框架/对象事件

操作元素

修改元素内容

修改样式属性


使用style修改样式属性

使用className修改样式属性

通过在js代码中修改类名，在css中配置该类名来修改样式属性。

获取、设置、移除属性值

排他思想

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

干掉所有人，留下我自己。

节点操作

父节点parentNode

子节点childNodes

子节点children(常用)

首尾子节点

兄弟节点

创建、添加节点

删除节点

克隆节点

创建元素

1.createElement效率测试创建1000个div只需二十毫秒

2.innerHTML拼接效率测试创建1000个div需三千多毫秒

3.innerHTML数组效率测试创建1000个div只需几毫秒

前端基础之bom和dom(代码片段)

概念展开：之前学习了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习BOM和DOM相关知识。JavaScript分为ECMAScript，DOM，... 查看详情

前端基础之bom和dom(代码片段)

到目前为止，我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习BOM和DOM相关知识。JavaScript分为ECMAScript... 查看详情

前端基础之bom和dom(代码片段)

 前戏到目前为止，我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习BOM和DOM相关知识。JavaScript分... 查看详情

前端基础之bom和dom(代码片段)

 前戏到目前为止，我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习BOM和DOM相关知识。JavaScript分... 查看详情

javascript基础：dom操作详解

...GitHub上关注我，一起入门和进阶前端。以下是正文。前言JavaScript的组成JavaScript基础分为三个部分：ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。DOM：文档对象模型，操作网页上的元素的... 查看详情

前端之javascript基础

前端之JavaScript基础本节内容JS概述JS基础语法JS循环控制ECMA对象BOM对象DOM对象1.JS概述1.1.javascript历史1992年Nombas开发出C-minus-minus(C—)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言)Netscape(网景)接... 查看详情

javascript基础语法

0X00:起因首先阐述下本人学javascript的初衷，本人目前从事安全行业，目前能挖掘些基础的XSS漏洞，但是想深入理解XSS，需有javascript基础，例如理解DOM型XSS等，于是就有了这么一出，下面就是记录自己的学习笔记。javascript是一门... 查看详情

前端基础之bom和dom(代码片段)

前戏到目前为止，我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习BOM和DOM相关知识。JavaScript分为ECMA... 查看详情

前端基础之bom和dom(代码片段)

前戏到目前为止，我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习BOM和DOM相关知识。JavaScript分为ECMA... 查看详情

前端基础之bom和dom(代码片段)

前戏到目前为止，我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习BOM和DOM相关知识。JavaScript分为ECMA... 查看详情

javascript的dom（文档对象）基础语法总结1

---恢复内容开始---前言：HTML文档可以说由节点构成的集合，DOM节点有:    1）. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。    2）. 文本节点:向用户展示的内容... 查看详情

从零开始学习前端javascript—6javascript基础dom

1：DOM（Document Object Model）的概念和作用document对象是DOM核心对象：对html中的内容，属性，样式进行操作。节点树中节点之间的关系：父子，兄弟。 2：DOM常用属性title：返回或设置当前文档的标题。all：返回所有元素... 查看详情

新手小白必知的5道web前端经典面试题

想成功就业web前端工程师，想要能高薪就业，那么除了好的web前端技能以外，还得有好的面试技巧，如果提前就了解更多企业的面试要求及面试题目，那么可以让我们的面试成功的几率大大的提高，今天就给大家分享5道经典的we... 查看详情

前端小白基础学习课程大纲

...阶段开始，正式学习Web前端开发需要的编程语言HTML,CSS和JavaScript。HTML和CSS用于Web静态内容的展示，JavaScript用于Web动态交互。完成这一阶段前端开发的学习，你就可以独立实现一个动静结合的Web前端项目啦！ 课时名称1html简... 查看详情

前端三剑客-----＞javascript（基础语法）(代码片段)

目录一，JavaScript基础概念1.JavaScript是什么2.JavaScript作用3.JavaScript的应用场景4.JavaScript运行过程5.JavaScript的组成二，JavaScript的基础语法1.JavaScript的书写形式1）行内式2）内嵌式3）外部式4）注释2.输入输出 1&... 查看详情

前端基础必知必会(代码片段)

...现，行为。结构指的就是HTML表现指的是CSS行为指的是JavaScript这是网页的三部分，是由万维网联盟W3C规范的。一、网页、网站网页是用HTML编写的一种文件，将这种文件放在Web服务器上可以让在互联网上的其他用户浏览... 查看详情

web前端攻城狮培养计划之前端小白入门：网页布局基础与常见网页特效

步骤1:HTML基础超文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言,为搭建网页结构做出第一步。本阶段主要介绍了HTML的语法基础、表格、表单、等标签，并有案例结合，... 查看详情

前端基本知识介绍(代码片段)

...式表（嵌入式）行内样式表外部样式表五.JS基础Javascript介绍1.js的介绍2.js的由来3.JavaScript组成JavaScript基本语法1.JavaScript的引入方式2.js注释3.js的输入输出方法4.变量 5.数据类型6.数据类型转换7.更多JS基础六.JS之DOM1.DOM简介... 查看详情