JavaScript 基础 学习

Posted only-one1

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 基础 学习 相关的知识,希望对你有一定的参考价值。

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 这个属性)

 

操作元素属性 - 类名

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

? 因为 classJS 里面有特殊含义

? 所以我们操作类名使用 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

以上是关于JavaScript 基础 学习 的主要内容,如果未能解决你的问题,请参考以下文章

jQ选择器学习片段(JavaScript 部分对应)

201555332盛照宗—网络对抗实验1—逆向与bof基础

VSCode自定义代码片段12——JavaScript的Promise对象

VSCode自定义代码片段12——JavaScript的Promise对象

30秒就能看懂的JavaScript 代码片段

Yarn: 一个新的JavaScript模块管理器