前端基础学习笔记-JS 获取元素字符串拼接数据类型

傷城~ 2022-03-31 09:52 225阅读 0赞

## 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 += "你好"//字符串内有引号,应与字符串外引号不同,以做区分 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 = "123"

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

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

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

let value = "123" box.innerHTML = ""+ value +""//es5 box.innerHTML = `${value}`//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**