JavaScript的Dom节点操作-CSDN博客

本文链接：https://blog.csdn.net/weixin_57332596/article/details/126198357

预解析

function 声明的函数会预解析到顶部，而赋值式的创建函数是先解析这个变量到顶部，然后程序在执行时到该赋值函数时才会知道这个是赋值式函数，

a();//由于变量的预解析，不知道a是一个变量还是一个函数，所以输出a is not function
var a = function(){
    console.log(1);
};
a();//执行成功，输出1

而变量预解析是先解析变量，待代码执行到赋值时才会进行赋值

console.log(a);//变量的预解析，所以打印undefined
var a = 10;
console.log(a);//由于上面已经赋值，所以打印10

作用域

分为全局作用域和局部作用域

全局作用域：范围整个页面，只有当前页面关闭时，全局作用域才会失效

局部作用域：全局作用域中又划分出的小范围的作用域，函数内部可以创建局部作用域，到目前为止，也只有函数内部可以创建局部变量

当定义了一个全局a变量，而函数的局部作用域中也声明了a变量如果在函数作用域中输出一下a 这个a输出的会是作用域中a的值，近水楼台先得月，就近原则。

当局部作用域中没有使用var定义但是却有赋值，当你在外部调用这个函数，在全局中来进行使用这个变量时，他会把这个变量自动转换成全局变量

Web api

web api是一些预先定义的函数，

任何开发语言都有自己的API

API的特征输入和输出

API的使用方法（console.log()）

js的组成

ECMAScript：语法约束标准

Dom：文档对象，页面上的东西称为文档对象

Bom：浏览器对象，窗口，

Dom文档对象模型

文档对象模型Dom(Document Object Model)，

操作页面上的标签，属性，内容

Dom节点

HTML文档中的每个成份都是一个节点

整个文档是一个文档节点

每个HTML标签是一个元素节点

包含在HTML元素中的文本是文本节点

每一个HTML属性是一个属性节点

注释属于注释节点

//获取整个html文档
console.log(document.documentElement);
//获取头部head
console.log(document.head);
//获取主体body
console.log(document.body);

//获取body标签
var body = document.body;
//获取标签中的第一个元素
var div = body.firstElementChild
//获取该元素的文本信息
var div2 = body.firstChild
//获取标签中的最后一个元素
var div3 = body.lastElementChild
//获取该标签的后一个兄弟
var div4 = div.nextElementSibling
//获取该标签的前一个兄弟
var div5 = div.previousElementSibling

//通过函数来获取元素
//getElementById("id名") 通过id获取元素
document.getElementById("uname")
//getElementsByClassName("类名") 通过类名获取一组类名相同的标签
document.getElementsByClassName("item")
//getElementsByName("属性值")  通过那么属性值来获取一组标签
document.getElementsByName("sex");
//getElementsByTagName("标签名")   通过标签名获取一组标签
document.getElementsByTagName("div")

//获取第一个所匹配的标签   可以是id（#id名）、类（.类名）、标签等
document.querySelect("input[属性]","属性值")
document.querySelect("div")
//获取所有的所匹配元素
document.querySelectAll("div")

//可以通过标签的id值来获取标签 不需要引号
console.log(id名)