JS学习笔记（5. DOM元素）

1. 获取DOM元素

1.1 返回匹配的第一个元素

document.querySelector('div标签')

document.querySelector('.class样式')

document.querySelector('#id')

1.2 返回匹配的所有元素

document.querySelectorAll('div标签')

返回的是伪数组，有长度有索引，不能追加删除元素。

1.3 旧方式获取元素

document.getElementById('id')

document.getElementsByName('name')

document.getElementsByTagName('div')

document.getElementsByClassName('class')

2. 修改元素

2.1 修改元素内容

元素.innerText = 'xxx' // 不识别标签元素

元素.innerHtml = '<div>xxx</div>' // 识别标签元素

2.2 修改元素属性

img.src = './xxx.jpg'

form1.action = 'xxx.do'

2.3 修改元素样式

1: 元素.style.width = '20px' // 样式多写法不方便

2: 元素.className = 'class'  // 会覆盖原有样式

3: 元素.classList.add('样式') , 元素.classList.remove(样式), 元素.classList.toggle(样式)有删无加

2.4 修改表单元素值

表单元素.value = 值  // innerText, innerHtml 对表单元素不生效

checked 勾选, disabled 禁用, selected 选中, = true // 禁用引号，会将有值字符串转为true

3. 自定义属性（HTML5新特性）

data-开头

例如 data-id

获取值：元素.dataset.id

修改值：元素.dataset.id = 值

4. DOM节点

DOM节点分为：元素节点，属性节点，文本节点，一般用元素节点。

4.1 查找节点

1.查找父节点

元素.parentNode // 取不到返回null

2.查找子节点

元素.children // 获得元素节点 伪数组

3.查找兄弟节点

元素.previousElementSibling // 上一个兄弟节点

元素.nextElementSibling //下一个兄弟节点

4.2 新增节点

const 新元素 = document.createElement('div标签名')

父元素.appendChild(新元素) // 添加到最后

父元素.insertBefore(新元素, 既存元素) // 添加到既存元素之前

4.3 克隆节点

元素.cloneNode(布尔) // 默认false可不写，不克隆子元素和内容。true克隆子元素。

4.4 删除节点

父元素.removeChild(元素)