document.querySelector('div标签')
document.querySelector('.class样式')
document.querySelector('#id')
document.querySelectorAll('div标签')
返回的是伪数组,有长度有索引,不能追加删除元素。
document.getElementById('id')
document.getElementsByName('name')
document.getElementsByTagName('div')
document.getElementsByClassName('class')
元素.innerText = 'xxx' // 不识别标签元素
元素.innerHtml = '
img.src = './xxx.jpg'
form1.action = 'xxx.do'
1: 元素.style.width = '20px' // 样式多写法不方便
2: 元素.className = 'class' // 会覆盖原有样式
3: 元素.classList.add('样式') , 元素.classList.remove(样式), 元素.classList.toggle(样式)有删无加
表单元素.value = 值 // innerText, innerHtml 对表单元素不生效
checked 勾选, disabled 禁用, selected 选中, = true // 禁用引号,会将有值字符串转为true
data-开头
例如 data-id
获取值:元素.dataset.id
修改值:元素.dataset.id = 值
DOM节点分为:元素节点,属性节点,文本节点,一般用元素节点。
1.查找父节点
元素.parentNode // 取不到返回null
2.查找子节点
元素.children // 获得元素节点 伪数组
3.查找兄弟节点
元素.previousElementSibling // 上一个兄弟节点
元素.nextElementSibling //下一个兄弟节点
const 新元素 = document.createElement('div标签名')
父元素.appendChild(新元素) // 添加到最后
父元素.insertBefore(新元素, 既存元素) // 添加到既存元素之前
元素.cloneNode(布尔) // 默认false可不写,不克隆子元素和内容。true克隆子元素。
父元素.removeChild(元素)