前端学习第五天-CSDN博客

本文链接：https://blog.csdn.net/weixin_74113429/article/details/141898908

一、JavaScript语句、标识符

语句

var num = 10；

语句以分号结尾，一个分号就表示一个语句结束

标识符

标识符：用来识别各种值的合法名称，由字母、美元符号、下划线和数字组成，数字不能在开头

二、变量

var表示是一个变量

变量提升：

先获取所有被声明的变量，再一行一行地运行
console.log(num);
var num = 10;

//javascript解析方式

var num;
console.log(num);
num=10;


//出现undefined，但不报错

三、JavaScript引入到文件

嵌入到HTML文件中

<body>
    <script>
        var age = 20;
    </script>
</body>

引入本地独立JS文件

<body>
    <script type="text/javascript" src="./itbaizhan.js">  </script>
</body>

引入网络来源文件

<body>
    <script src="http://code.jquery.com/jquery1.2.1.min.js">  </script>              
</body>

后两种最常用

四、JavaScript注释与常见输出方式

JavaScript注释

单行注释： //注释

多行注释： /* 注释 */

快捷键：ctrl+/

常见输出方式

第一种——在浏览器中弹出一个对话框，alert把输出的内容首先转换为字符串再输出的

alert("要输出的内容");

第二种——写在页面上的

document.write("要输出的内容");

第三种——在控制台输出内容

console.log("要输出的内容");

五、数据类型

数值、字符串、布尔值、undefined、null、对象

很基础，和C差不多，就不简单介绍了，但要记住有几种，具体的应用和方法也不作此详述；

typeof运算符

判断数据类型时使用

null一般代表对象为“没有”；undefined一般代表数值为“没有”。

六、函数

函数声明：

function 函数名(传入函数的参数){

函数体

}

七、对象

对象是一组“键值对”的集合，是一种无序的复合数据集合

对象的使用的讲解直接可以去看java的课程，这里主要是做大概笔记，方便复习，对于java部分直接略过

八、DOM

DOM是JavaScript操作网页的接口，全称为“文档对象模型”。它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作

节点：

DOM最小组成单位叫做节点，类型有七种：

Document：整个文档的顶层节点
DocumenType：doctype标签
Element：网页的各种HTML标签
Attribute：网页元素的属性（比如class=“right”）
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档的片段

Node.nodeType属性

不同节点的nodeType属性值和对应常量

九、document对象方法来获取元素

document.getElementsByTagName()

搜索HTML标签名，返回符合条件的元素。它的返回值是一个类似数组对象，可以反映HTML文档的变化。如果没有任何匹配的元素，就返回一个空集

var paras = document.getElementsByTagName('p');

//如过用*，就返回文档中所有HTML元素
var paras = document.getElementsByTagName('*');

document.getElementsByClassName()

返回一个类似数组的对象，包括所有class名字符合条件的元素，元素的变化实时反映在返回结果中

var elements = document.getElementsByClassName(names);

document.getElementsByName()

用于选择拥有name属性的HTML元素，返回一个类似数组的对象

document.getElementById()

返回匹配指定id属性的元素节点。如果没有发现匹配的节点，则返回null。

document.querySelector()

接受一个CSS选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

var el1 = document.querySelector('.myclass');

document.querySelectorAll()

与querySelector用法类似，区别是返回一个NodeList对象，包含所有匹配给定选择器的节点

十、document对象方法来创建元素

document.createElement()

用来生成元素节点，并返回该节点

var newDiv = document.createElement('div');

document.createTextNode()

用来生成文本节点，并返回该节点。它的参数是文本节点的内容

var text = document.createElement("p");
var content = document.createTextNode("我是文本");
//appendChild:将内容或子元素放到容器中
text.appendChild(content);

document.createTextNode()

生成一个新的属性节点，并返回它

var text = document.createElement("p");
var id = document.createAttribute("id");
//给该属性设置一个值
id.value = "root";
//放入标签中
text.setAttributeNode(id);

只有属性的放入用的是setAttributeNode，其他的用的都是appendChild；

十一、Element对象属性

Element对象对应网页的HTML元素。每一个HTML元素，在DOM树上都会转化成一个Element节点对象

Element.id

返回指定元素的id属性，该属性可读写

var p = document.querySelector('p');
p.id

Element.className

用来读写当前元素节点的class属性，它的值是一个字符串，每个class之间用空格分割

Element.classList

classList对象有下列方法

add()：增加一个class

remove()：移除一个class

contains()：检查当前元素是否包含某个class

toggle()：将某个class移入或移出当前元素

Element. innerHTML

返回一个字符串，等同于该元素包含的所有HTML代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括<HTML>和<body>元素

el.innerHTML = '';

Element. innerText

和innerHTML类似，不同的是innertext无法识别元素，会直接渲染成字符串

前端学习第五天

一、JavaScript语句、标识符

语句

标识符

二、变量

三、JavaScript引入到文件

嵌入到HTML文件中

引入本地独立JS文件

引入网络来源文件

四、JavaScript注释与常见输出方式

JavaScript注释

常见输出方式

五、数据类型

typeof运算符

六、函数

七、对象

八、DOM

节点：

Node.nodeType属性

九、document对象方法来获取元素

document.getElementsByTagName()

document.getElementsByClassName()

document.getElementsByName()

document.getElementById()

document.querySelector()

document.querySelectorAll()

十、document对象方法来创建元素

document.createElement()

document.createTextNode()

document.createTextNode()

十一、Element对象属性

Element.id

Element.className

Element.classList

Element. innerHTML

返回一个字符串，等同于该元素包含的所有HTML代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括<HTML>和<body>元素

Element. innerText

十二、Element获取元素位置