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