JavaScript复习(四)

JavaScript获取html元素

Document：每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

document.getElementById(“xxxx")

getElementById()通过Id获取

getElementsByName() 通过name获取

getElementsByTagName() 通过html元素名获取

getElementsByClassName通过class获取

document.querySelector(“”); querySelector() 方法返回匹配指定选择器的第一个元素。

querySelectorAll()返回所有的元素。

改变JavaScript改变css

1、document.getElementById("xxx").style.xxx  可以改变或者设置从css的值

如果是类似background-color这样的需要改成backgroundColor，即将后面的词首字母大写

2、document.getElementById("xxx").style.cssText = "background-color:black; display:block;color:White;

优点：这样就可以尽量避免页面reflow，提高页面性能。

缺点：会把原有的cssText清掉，比如原来的style中有’display:none;’，那么执行完上面的JS后，display就被删掉了。
解决方法，采用cssText累加的方法：domElement.style.cssText+=‘;width:100px;height:100px;top:100px;left:100px;’

3、 document.getElementById("btnB").setAttribute("class", "style2");通过改变类名的方式修改css

4、<link href="css1.css" rel="stylesheet" type="text/css" id="css"/>

 document.getElementById("css").setAttribute("href","css2.css");通过更改外联文件修改css

JavaScript 显示方案

JavaScript 能够以不同方式“显示”数据：

1. 使用 window.alert() 写入警告框可以简写为alert();
2. 使用 document.write() 写入 HTML 输出
3. 使用 innerHTML 写入 HTML 元素

innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容；

1.获取段落p的 innerHTML（html内容）

document.getElementById("xxx").innerHTML

2.设置段落p的 innerHTML（html内容）

document.getElementById("xxx").innerHTML = "aaa";

1. 使用 console.log() 写入浏览器控制台

全局作用域

全局（在函数之外）声明的变量拥有全局作用域。全局变量可以在 JavaScript 程序中的任何位置访问。

函数作用域

局部（函数内）声明的变量拥有函数作用域。局部变量只能在它们被声明的函数内访问。

JavaScript 块作用域

通过 var 关键词声明的变量没有块作用域。在块 {} 内声明的变量可以从块之外进行访问。

{   var x = 10; }// 此处可以使用 x

let 关键词声明拥有块作用域的变量。在块 {} 内声明的变量无法从块外访问：

{   let x = 10;}// 此处不可以使用 x

重新声名变量

使用 var 关键字重新声明变量会带来问题。在块中重新声明变量也将重新声明块外的变量：

var x = 10;// 此处 x 为 10{   var x = 6;  // 此处 x 为 6}// 此处 x 为 6

使用 let 关键字重新声明变量可以解决这个问题。在块中重新声明变量不会重新声明块外的变量：

var x = 10;// 此处 x 为 10{   let x = 6;  // 此处 x 为 6}// 此处 x 为 10

通过 const 定义的变量与 let 变量类似，但不能重新赋值：

const PI = 3.141592653589793;PI = 3.14;  // 会出错PI = PI + 10;   // 也会出错

在块作用域内使用 const 声明的变量与 let 变量相似。

var x = 10;// 此处，x 为 10{   const x = 6;  // 此处，x 为 6}// 此处，x 为 10

（JavaScript const 变量必须在声明时赋值）

不是真正的常数

关键字 const 有一定的误导性。它没有定义常量值。它定义了对值的常量引用。因此，我们不能更改常量原始值，但我们可以更改常量对象的属性。

原始值

如果我们将一个原始值赋给常量，我们就不能改变原始值

常量对象可以更改

您可以更改常量对象的属性：

// 您可以创建 const 对象：const car = {type:"porsche", model:"911", color:"Black"};

// 您可以更改属性：car.color = "White";

// 您可以添加属性：car.owner = "Bill";

但是您无法重新为常量对象赋值：

const car = {type:"porsche", model:"911", color:"Black"};

car = {type:"Volvo", model:"XC60", color:"White"};    // ERROR

常量数组可以更改

您可以更改常量数组的元素：

// 您可以创建常量数组：const cars = ["Audi", "BMW", "porsche"];

// 您可以更改元素：cars[0] = "Honda";

// 您可以添加元素：cars.push("Volvo");

但是您无法重新为常量数组赋值：

const cars = ["Audi", "BMW", "porsche"];

cars = ["Honda", "Toyota", "Volvo"];    // ERROR

在程序中的任何位置都允许重新声明 JavaScript var 变量，在同一作用域或块中，不允许将已有的 var 或 let 变量重新声明或重新赋值给 const。

在另外的作用域或块中重新声明 const 是允许的。

通过 var 定义的变量会被提升到顶端，您可以在声明 var 变量之前就使用它，通过 const 定义的变量不会被提升到顶端。const 变量不能在声明之前使用。

资料来自W3C