1.获取元素

通过id名

document.getElementById("box")//获取的唯一的元素

通过class名

document.getElementsByClassName("wrap")//获取所有具有wrap类名的标签集合 //Elements 注意加上s 大小写不能错 当找不到元素时,返回null 意为空,当写错时,直接报错,提示没有这个方法 console.log(aWrap)//HTMLCollection

没有反应时看以下四项找问题：

==> 1. HTMLcollection 是元素集合,不能拿来当做元素操作,通过下标序号获取元素

==> 2. 由于数字的特殊性,不能使用 . 操作 , 而是使用 [ ] 代替 序号从 0 开始

==> 3. 哪怕页面中,只有一个wrap类名的元素,获取的也是一个集合,集合里只有一个元素罢了

==> 4. class获取的方式,低版本ie( ie8及以下 )不兼容

通过标签名

document.getElementsBytagName("div")//获取所有div标签 console.log(aDiv)//HTMLCollection 特性同className一样

其返回的也是集合！ 

通过name值

document.getElementsByName("name") //获取所有此name值的标签 console.log(aWrap)//nodeList 节点集合 特性同className一样

其返回的也是集合！ 

document是文档对象模型DOM,可以替换成任何标签节点,只要符合后代关系 如:

box.getElementsByTagName("p") //box 的后代 p 
//1.确保box是元素 而不是集合 2.确保p确实是box的后台 3.如要最终取到p ,依然要加序号
// name方式获取的方法只能挂在 document后面

css选择器获取 单个元素

document.querySelector("#box p")//通过css选择器获取,支持ie8及以上 写法和选择器一样 //只获取到 满足条件的第一个元素,获取到就会停止

css选择器获取 集合

document.querySelectorAll("#box p")//通过css选择器获取,支持ie8及以上 写法和选择器一样 //获取到满足选择器的所有元素 ==> 节点集合,通过序号获取元素 (性能比较慢:通篇查询 从里及外 )

特殊元素的获取

document.documentElement 
//html标签 document.title 
//获取title标签 document.body 
//获取body标签 document.head 
//获取head标签

! -- ID可以不用获取直接使用,但是不建议这种操作,不利于维护

2 关于属性

​ 属性和方法都属于对象,都通过 . 操作 方法后面可以加 ( )执行 而属性不行

​ ( 属性是名词 方法是动词 名词不能动 方法能动 )

其中box为某div盒子的id名

• 查看标签属性

console.dir(box) //点开返回box下所有的属性和属性值

! . 标签下已有的属性 为合法的标签属性,可直接通过 . 操作 也可以用过[ ] 操作

​ [ ] 内要加引号 如下

box.style.backgroundColor = "red" 
box["style"]["background-color"] = "red"

! . 很多属性有其默认值 , 部分属性未赋值前默认值为null, 赋值成功后,在属性内也会发生变化 如 onclick

console.log(box.onclick) //null

! . 访问一个对象不存在的属性的时候,默认值为undefined

console.log(box.xx) // undefined

• 操作标签属性

  • 获取标签属性值

  let oBox = document.getElementById("box") 
  let oTitle = oBox.title console.log(oTitle)

  • 修改标签属性值

  let oTitle = oBox.title 
  // =>123 console.log(oTitle)
  //123 oTitle = "iloveyou" console.log(oTitle) 
  // iloveyou console.log(oBox.title) // 123

  "↓↓↓ 为何不能用变量存属性 修改变量值来达到修改属性值的目的"

  如上,虽然看上去oTitle的值变了,但是其实oTitle并不是代表 oBox.title这个属性,只是拿到了第一次获取的值 123,而oTitle = "iloveyou" 等于重新给变量oTitle赋值 . 可以理解为,等号赋值时,等号右边会简化到简单或者复杂的数据类型 , 所有oTitle只是等于字符串"123",类型为字符串,并不具备标签属性等实际意义.

  不可以这样来修改innerHTML值

  let con = document.getElementByid("box").innerHTML
   //当前内容赋值给con con = "123" 
  // con变量的重新赋值 而innerHTML没有任何变化

  正确的方法:

  box.title = "iloveyou" //属性的赋值 box.innerHTML = "123"

  正确的,在原来基础上的增加的方法 +=

  box.innerHTML = box.innerHTML + "123" //遇到等号 先看右边 ,右边得到最简值,扔回变量的容器里

  1. 里面的原来的内容,已经完全不存在了, 这步操作是把原来的拿出来,揉成新的,再把新的塞回去.看上去就跟往内容后面添加了一样 .
  2. 字符串 和 字符串相加,得到一个字符串的拼接字符串 任何值和字符串相加, 都将得到拼接字符串

  // 这种 原来的自己 + 新的值 = 新的自己 的操作 可以用 += 代替

  box.innerHTML = box.innerHTML + "123" box.innerHTML += "123"

  几种特殊情况

  ​ 1 . src获取的将显示绝对路径​

  console.log( img.src )

  ​ 2 . 颜色值除了关键字 其他将转为 rbg 值

   console.log(box.style.background) 

  需要在style内给上样式

  • 修改类名

   box.className = "list"

动态获取和静态获取

•  静态获取

第一次获取后,获取所得将不再发生变化

obj.getElementById() - id名获取

obj.querySelector() - 选择器获取

obj.querySelectorAll - 选择器获取

• 动态获取

每次使用,将会重新去获取

obj.getElementsByClassName() - 类名获取

obj.getElementsByTagName() - 标签名获取

obj.getElementsName() - name获取

 var oBox =document.querySelector("#box");
 var aP = document.getElementsByClassName("list"); 
 console.log(aP.length) // 3 oBox.innerHTML += "<p class='list'>你好</p>"//字符串内有引号,应与字符串外引号不同,以做区分 console.log(aP.length) // 4

• 动态 ==> 静态 动态变静态

加下标固定到单个元素就是静态了.

 var oWrap = document.getElementByClassName("wrap")[0];

3 数据类型

数据类型: 用来区分数据 这些称之为原始类型,不能够再细分.

es5 中 有 6 种数据类型 其中包括 五种基础数据类型,一种复杂数据类型

es6 新补充了一种基础数据类型 ( 暂时还不用接触 ). 所以js 一共有 7 种 数据类型 ( ! 防止面试时跳坑,请注意送分题别送命 ! )

间接的大致准确的检测数据类型

typeof 运算符

bug 1 null 返回 object

bug 2 function 返回 function

基础(简单)数据类型

number 数值型

在js中,不管是浮点数,还是整数,通通算作number数值型,甚至还有坏掉的数值类型.

 let num = 1 //数值类型不要带引号,带了就不是数值类型了

字面量 即 一眼就能看到值的量 ( 也就是一个叫法, 因为不能说这个123 说这个字面量 高端一些 )

let num1 = 1; 
let num5 = 0/0 
//NaN not a number

1.浮点数值,数值中必须包含一个小数点,由于浮点数值需要的内存空间是保存整数的两倍,所以会不失时机俺的把浮点数值转换成整数值

2.由于双精度存储的问题,占用 64bit , ( 64位比36位内存大,运算精确 )一些小数没办法用二进制咋位数限制中有限表示,所以会模仿十进制进行四舍五入,所以就会造成一个精度的丢失.超大的正整数也会有这样的情况,只不过前端用到超大正整数的情况很少,解决浮点数精度丢失的问题,可以先乘以一个倍数变成正整数,进行运算之后,再除以原来的倍数.

3,由于内存的限制,不能保存世界上所有的数值.最小是5e-324,最大是1.7976931348623157e+308 ( 5 乘以10的-324次方 )

4.超过将自动转换成Infinity这是浏览器的正无穷，当然也有-Infinity

String 字符串

=> 由0个或者多个unicode( 此处百度一波unicode )字符串组成的字符序列，即字符串。字符串由双引号或单引号表示

1.有其他用途的字符,需要转义 转义符 \ 如 "引号 \ " \n代表换行 \t=> 制表符 \b=>退格 (这个在正则中还会接触到 )

2.字符串的引号 内外都有引号时 保持引号不一致 或者使用转义 不然会导致字符串被切割

box.innerHTML = "<p style=/"color:red;/">123</p>"

3.字符串内变量的表示 变量如果不做任何处理,会识别为普通字符

​ =>es5 : 引号(保持和最外层引号一致! )咔咔两刀 ++号拼接

​ =>es6 : `` 模板字符串 模板字符串内可以换行 占位内放变量

let value = "123" box.innerHTML = "<p style=/"color:red;/">"+ value +"</p>"//es5 box.innerHTML = `<p style="color:red;">${value}</p>`//es6

undefined 未定义

js let a; console.log(a)

未初始化值的默认值 , 函数运行结束默认返回值 这其实是js设计程序时产生的一个bug值, 后面就默认了,但是用来赋值没啥意义,没有操作这个值的价值.

数据类型和值都是同一个 也就是undefined的数据类型就是undefined

null 空

什么都没有的意思 别的语言里面也有 空对象指针 在编程语言中 一个对象有对象的内容和对象的地址 指针就是存储盒子的地址,通过指针,虽然没有复制这个对象,但是可以找到这个对象.但是js中没有指针的概念, 但是null还是代表了空对象 .所以检测时,typeof 显示为object . 部分属性未赋值时,默认为null ,

​ undefined 是 null 派生出来的

​ 一般我们需要一个定义一个变量用于储存对象时,一般默认赋值给null 而不是undefined, 第一是保持类型的一致,第二是区分null和undefined 说白了除了默认是undefined 以及拿来判断使用,其他时候,不需要使用undefined这个值

boolean 布尔值

两个字面量 true 正确 false 否 true 和 false 转化成数字 分别对象1 和 0 但并不代表他们具备数值

​ 由于布尔只有两个状态,就像开关一样,所以主要用来用做判断条件

​ 任何类型在判断环境下都可以转为布尔值,并对应true和false两个状态

js if(条件){ console.log("正确true") }else{ console.log("错误false") } ! 取反 过程里先转为布尔值

​ false => false

​ 0 / NaN/-0 => false

​ "" 空字符串(不包括空格)=>false

​ undefined ==> false

​ null ==>false

Object 对象

复杂数据类型 , 可以添加自定义属性 , object 可以称之为合成类型,因为一个对象往往是多个原始类型的值合成的,可以看做是一个存放各种值的一个容器

常见的对象包含: 实例对象 数组 内置对象 节点对象 函数等等

• 数组对象 : [ ]

任何数据类型都可以存储在数组里, 每条数据,用逗号隔开

js let arr = [1, "123", function fn(){} ]//array console.log(arr[0])//1

01 数组通过序号取值 从 0 开始 通过 [ ] 取值 不能用 .点

• 实例对象: { }

任何数据类型都可以存储在对象中,以键值对的形式存储,每条键值对, 键值用 : 号分开用逗号分开 比数组存储数据的形式,更加直观的知道,值所对应的意义.

js let obj = { name: "zhuque", age: 18 }

取数据 . 直接操作属性 由于 点不能操作字符串和变量和数字.所以用 [ ] 替代 用[ ]操作属性,要变成字符串 不然会识别为变量

js console.log(obj.name) console.log(obj["name"])

// obj 没有length