02 获取元素 字符串拼接 数据类型

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 关于属性

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

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

• 查看标签属性

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

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

  ​ [ ] 内要加引号 如下

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

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

  console.log(box.onclick) //null
  

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

  console.log(box.zhuque) // 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 - 选择器获取

  var oBox =document.querySelector("#box");
  var aP = document.querySelectorAll ("#box p");
  console.log(aP.length) //返回集合内元素个数 3
  oBox.innerHTML += "<p>你好</p>"//添加一个p元素
  console.log(aP.length) // 依旧返回3  因为这个获取不会因为上面新增了一个而重新获取.
  
  
  
  let box = document.getElementById("box");
  wrap.innerHTML = "<p id='box'></p>123"   //box将不再有事件,因为他已经不是以前的那个曾经获取的box了
  box.onclick = function () {
      alert(1)
  }
  wrap.innerHTML += "123" // 包括这样也是 因为是拿出来后,再重新覆盖的.
  

• 动态获取

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

  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 未定义

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两个状态

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

​ false => false

​ 0 / NaN/-0 => false

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

​ undefined ==> false

​ null ==>false

Object 对象

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

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

• 数组对象 : [ ]

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

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

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

• 实例对象: { }

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

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

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

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

  // obj 没有length