JavaScript 基础 学习

Posted 2021-02-18 only-one1

javascript 基础 学习 第十天

获取页面中的元素的方法

作用：通过各种方式获取页面中的元素

? 比如：id，类名，标签名，选择器 的方式来获取元素

? 伪数组：

? 长的和数组差不多，也是按照索引排列

? 也是有length属性，也可以使用for循环来遍历

? 但是就是不能使用数组常用方法

? 1.通过 id 获取元素的方法

? 语法：document.getElementById(‘你要获取的元素的 id‘)

? 返回值：是 dom 元素，也是叫做 dom 对象

? 如果页面上有对应的 id 的元素，那么就是这个元素

? 如果页面上没有对应的 id 的元素，那么就是 null

代码：

? var box = document.getElementById(‘box‘)

console.log(box)

 

? 2.通过类名获取元素的方法

? 语法：document.getElementsByClassName(‘你要获取的元素的类名‘)

? 返回值：是一个 伪数组 ，伪数组里面包含着所有能获取到的元素

? 页面上有多少类名符合的，那么这个伪数组里面就有多少个元素

? 页面上没有类名符合的，那么就是一个空的伪数组

代码：

? var boxs = document.getElementsByClassName

? console.log(boxs)

3.通过标签名获取元素的方法

? 语法：document.getElementsByTagName(‘你要获取的元素的标签名‘)

? 返回值：是一个 伪数组 ，伪数组里面包含着所有能获取到的元素

? 页面上有标签名符合的元素, 那么有多少, 这个伪数组里面就有多少

? 页面上没有标签名符合的元素, 那么就是一个空的伪数组

? 代码：

? var divs = document.getElementsByTagName

? console.log(divs)

? 4.通过选择器获取一个元素的方法

? 语法：document.querySelector(‘你要获取的元素的选择器‘)

? 选择器 => 你 css 怎么捕获这个元素，那么这里就怎么写

? 返回值：满足选择器的第一个元素

? 如果页面上有满足选择器的元素，那么返回第一个满足条件的元素

? 如果页面上没有满足选择器的元素，那么就是 null

? 代码：

? var div = document.querySelector(‘.box:last-child‘)

? console.log(div)

? 5.通过选择器获取一组元素的方法

? 语法：document.querSelectorAll(‘你要获取的元素的选择器‘)

? 返回值：一个伪数组

? 如果页面上有满足选择器的元素, 有多少伪数组里面就有多少个

? 如果页面上没有满足选择器的元素, 那么就是空伪数组

? 代码：

? var divs = document.querySelectorAll(‘.box‘)

? console.log(divs)

?

操作元素的属性 - 文本属性

? 我们获取到的 dom 元素，本身也是一个对象

? 其实就是操作这个 dom 元素的某一个成员内容

三个操作文本属性的方式

? 1.innerHTML

? 是一个读写的属性

? 读：获取一个元素的所有后代元素内容，包含 html 结构

? 你得到的内容是一个字符串，不是 dom 元素了

? 语法：元素.innerHTML

? 写：设置这个元素的内容部分，会完全覆盖式的写入

? 语法：元素.innerHTML = ‘你要写入的内容‘

? 特点：你写入的时候，如果写入一个 html 格式的字符串，他能解析出来

? 注意：使用 innerHTML 属性来写入内容

? 2.innerText

? 是一个读写的属性

? 读：获取一个元素内所有的文本内容，包含后代元素的文本内容

? 不包含 html 结构，是一个字符串

? 语法:元素.innerText

? 写：设置这元素的内容部分，完全覆盖式的写入

? 语法：元素.innerText = ‘你要写入的内容‘

? 特点：你写入的时候，如果写入一个 html 格式的字符串，他不会解析

? 3.value

? 是一个独写的属性，专门用来个 表单元素 合作的

? 读：获取一个标签元素的 value 属性的值

? 语法：表单元素.value

? 写：给一个表单元素设置 value 属性的值，完全覆盖式的写入

? 语法：表单元素.value = ‘你要写入的内容‘

 

操作元素的属性 - 原生属性

? 原生属性：元素自己本身就带有的属性

? 每个元素都有的 id

? img 标签有的 src 属性

? ...

? 特别说明 : class (类) 属性不行

? 原生属性直接操作就可以了

? 读：元素.你要读取的属性名

? 写：元素.你要写入的属性名 = ‘你要写入的值‘

? 1.操作原生属性的 id 属性

? 获取元素

? var div = documnet.querySelector(‘div‘)

? 设置 id 属性的值

? console.log(div.id)

? 把 div 元素的 id 名称设置为 box

? div.id = ‘box‘

2.操作原生属性 src 属性

? 获取元素

? var img = documnet.querySelector(‘img‘)

? 设置 src 属性

? console.log(img.src)

? 给 img 标签的 src 属性换一下地址

? img.src = ‘地址‘

3.操作原生属性 type 属性

? 获取元素

? inp 这个变量代表着 input 这个元素

? var inp = document.querySelector(‘input‘)

? 设置 type 属性

? console.log(inp.type)

? 把这个 input 元素的 type 属性设置为 password

? inp.type = ‘password‘

操作元素属性 - 自定义属性

? 自定义属性：元素本身不带有的属性

? 是我们自己定义的属性

? 我们想在元素身上写上这些属性

1.setAttribute()

? 作用： 给元素设置一个自定义属性

? 语法： 元素.setAttribute(你要设置的属性名,你要设置的属性值)

? 设置的时候不管你写的是什么数据类型，到了元素身上的时候就 会被自动转换为 string 类型

2.getAttribute()

? 作用： 获取元素的属性(可以获取原生属性，也可以获取自定义属性)

? 语法：元素.getAttribute(你要获取的属性名)

? 返回值：这个属性的值

? 获取到的所有数据都是 string 数据类型

3.removeAttribute()

? 作用 ：删除元素的属性

? 语法 ：元素.removeAttribute(你要删除的属性名)

 

? 代码：

? 0.获取元素

? var div =document.querySelector(‘div‘)

? 1.给元素设置自定义属性

? div.setAttribute(‘hello‘,‘world‘)

? div.setAttribute(‘num‘,10) (设置的时候赋值了一个 number 数据类型)

? 2.获取元素的属性

? var res = div.getAttribute(‘hello‘)

? console.log(res)

? var res2 = div.getAttribute(‘num‘) (获取元素身上叫做 num 的属性的值)

? console.log(res2)

? 3.删除元素属性

? div.removeAttribute(‘num‘) (删除元素身上的 num 这个属性)

? div.removeAttribute(‘hello‘) (删除元素身上的 hello 这个属性)

? div.removeAttribute(‘class‘) (删除元素身上的 class 这个属性)

 

操作元素属性 - 类名

? 专门用来操作元素类名的一个属性

? 因为 class 在 JS 里面有特殊含义

? 所以我们操作类名使用 className 这个属性

? 1.className

? 是一个读写的属性

? 读 ：获取元素的类名

? 有多少类名获取多少个类名，以字符串的形式

? 语法：元素.className

? 写：设置元素的类名

? 完全覆盖式的写入

? 语法：元素.className = ‘你要设置的类名‘

? 我想追加一个类名

? 就是在原有的基础上添加一个类名

? 可以使用 += 符号操作，并且在前面多添加一个 空格，和之前的类名隔开

? 0.获取元素

? var div = document.querySelector(‘div‘)

? 1.获取元素的类名

? var cn = div.className

? console.log(cn) (以字符串的形式获取到了元素 class 属性的所有值)

? 2.设置元素的类名

? div.className = ‘box1 box2‘ (给元素设置两个类名，分别是 box1 和 box2)

? 3.追加一个类名

? 等价于 div.className = div.className + ‘box1‘

? div.className += ‘box1‘ (是不是追加一个类名？)

? 你原先的类名是 ‘a b c‘ + ‘box1‘ === ‘a b cbox1‘

? 使用的时候要多加一个空格，把他们隔开

 

操作元素属性 - 样式

? 操作元素的 css 样式

? 1.style 属性

? 作用： 获取到元素所有可设置样式，值是一个对象

? 语法：元素.style

? 内容：是一个对象，里面有所有的元素可设置样式

? 但是有值只有 行内样式

? 想读取元素的样式

? 直接从对象中获取就可以了

? 能获取到的值，是带有单位的

? 能得到的值只有行内样式，非行内样式设置的值 style 拿不到

? 想设置元素的样式

? 直接给对象里面的某个成员修改值就可以了

? JS 设置样式只能设置行内样式

? 注意：当你要操作一个带有 中划线(-)的样式的时候

? 比如：background-color,border-top,margin-top,...

? 你操作的时候要转换写成 驼峰 的形式

? backgroud-color => bcakgrounColor

? border-top => borderTop

? margin-top => marginTop

 

DOM - 操作

DOM节点

? DOM 树就是由各种各样的节点组成的

? 根节点：Document(文档)，用来承载所有节点的，组成一个页面

? 根元素节点：html 标签，页面上最大的元素节点，页面上最大的标签

? 普通元素节点：body / head / div / ul / li / script /...

? 文本节点：写在页面上的文本内容，有可能被任何元素节点包裹

? 属性节点：写在每一个标签上的每一个属性，必须依赖于元素存在

? 注释节点：单独书写的一个节点，表示注释内容，不显示在页面上

?

? 节点操作：对这些节点进行增删改查

 

获取节点的操作

? 获取某一个元素节点的相关节点

? 1.childNodes 属性

? 作用：获取到一个元素节点下所有的 子节点

? 语法：元素.childNodes

? 得到：是一个伪数组，里面是所有的 子节点

 

? 2.children 属性

? 作用：获取到一个元素节点下所以的 子元素节点

? 语法：元素.children

? 得到：是一个伪数组，里面是多有的 子元素节点

 

? 3.firstChild 属性

? 作用：获取到一个元素节点下的第一个 子节点

? 语法: 元素.firstChild

? 得到: 一个节点(有可能是任何节点)

 

? 4.firstElementChild 属性

? 作用: 获取到一个元素节点下的第一个 子元素节点

? 语法: 元素.firstElementChild

? 得到: 一个元素节点

 

? 5.lastChild 属性

? 作用: 获取到一个元素节点下的最后一个 子节点

? 语法: 元素.lastChild

? 得到: 一个节点(有可能是任何节点)

 

? 6.lastElementChild 属性

?  作用: 获取到一个元素节点下的最后一个 子元素节点

? 语法: 元素.lastElementChild

 得到: 一个元素节点

 

7. previousSibling 属性

作用: 获取到一个元素节点的上一个 兄弟节点(上一个哥哥节点)

语法: 元素.previousSibling

得到: 一个节点(有可能是任何节点)

 

8. previousElementSibling 属性

作用: 获取到一个元素节点的上一个 兄弟元素节点(上一个哥哥元素)

语法: 元素.previousElementSibling

得到: 一个元素节点

 

9. nextSibling 属性

作用: 获取到一个元素节点的下一个 兄弟节点(下一个弟弟节点)

语法: 元素.nextSibling

得到: 一个节点(有可能是任何节点)

 

10. nextElementSibling 属性

作用: 获取到一个元素节点的下一个 兄弟元素节点(下一个弟弟元素)

语法: 元素.nextElementSibling

得到: 一个元素节点

 

11. parentNode 属性

作用: 获取到一个元素节点的 父节点

一般来说, 我们能作为父子关系的, 父亲一般就是元素节点

有特殊的, 但是很少, 比如 document 就可以作为父节点, 但是不是元素节点

语法: 元素.parentNode

得到: 一个节点(有可能是元素节点, 也有可能是根节点)

 

12. parentElement 属性

作用: 获取到一个元素的 父元素节点

语法: 元素.parentElement

得到: 一个元素节点

 

13. attributes 属性

作用: 获取一个元素的所有 属性节点

因为属性节点不作为独立节点存在, 必须依赖元素节点存在

所以他不和任何内容出现父子关系

语法: 元素.attributes