标签：for 定义 最大 写入 console 自定义 使用数组 组成 方法
? 比如：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‘
? 获取元素
? var img = documnet.querySelector(‘img‘)
? 设置 src 属性
? console.log(img.src)
? 给 img 标签的 src 属性换一下地址
? img.src = ‘地址‘
? 获取元素
? inp 这个变量代表着 input 这个元素
? var inp = document.querySelector(‘input‘)
? 设置 type 属性
? console.log(inp.type)
? 把这个 input 元素的 type 属性设置为 password
? inp.type = ‘password‘
? 自定义属性：元素本身不带有的属性
? 是我们自己定义的属性
? 我们想在元素身上写上这些属性
? 作用： 给元素设置一个自定义属性
? 语法： 元素.setAttribute(你要设置的属性名,你要设置的属性值)
? 设置的时候不管你写的是什么数据类型，到了元素身上的时候就 会被自动转换为 string 类型
? 作用： 获取元素的属性(可以获取原生属性，也可以获取自定义属性)
? 语法：元素.getAttribute(你要获取的属性名)
? 返回值：这个属性的值
? 获取到的所有数据都是 string 数据类型
? 作用 ：删除元素的属性
? 语法 ：元素.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 树就是由各种各样的节点组成的
? 根节点：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 属性
作用: 获取一个元素的所有 属性节点
因为属性节点不作为独立节点存在, 必须依赖元素节点存在
所以他不和任何内容出现父子关系
语法: 元素.
标签：for 定义 最大 写入 console 自定义 使用数组 组成 方法
原文地址：https://www.cnblogs.com/only-one1/p/12955582.html
