js笔记(DOM)
DOM(document object model,用js代码控制文档)
查找标签
document.getElementById('ID号')
document.getElementsByTagName('标签类型名字')
//加索引可以取值
document.getElementsByTagName('p')[0]
//
let dEle = document.getElementsByTagName('div')[0]
dEle.parentElement
dEle.children
dEle.firstElementChild
dEle.lastElementChild
dEle.previousElementSibling
dEle.nextElementSibling
自定义标签
插入图片
//创建标签
let xptEle = document.createElement('img')
xptEle.src = 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1931286440,1805283014&fm=26&gp=0.jpg'
xptEle.setAttribute('name','wahaha')
//在dEle标签的儿子们里append这个新标签
let dELe = document.getElementsByTagName('div')[0]
dEle.appendChild(xptEle)
插入链接
//创建标签
let xwEle = document.createElement('a')
xwEle.href = 'https://www.baidu.com'
xwEle.innerText = '点我qu百度'
let dELe = document.getElementsByTagName('div')[0]
let pEle = document.getElementsByTagName('p')[1]
//插dEle里面,pEle前面
dEle.insertBefore(xwEle,pEle)
获取标签中的值
//获取文本
let iEle = document.getElementsByTagName('input')[0]
iEle.value
//获取文件
let fEle = document.getElementsByTagName('input')[0]
let userfile = fEle.files[0]
class
let dEle =document.getElementById('d1')
dEle.classList
dEle.classList.remove('c2')
dEle.classList.add('c2')
//检测是否含有c2
dEle.classList.contains('c2')
//切换,类里包含c2就删除,没有就添
dEle.classList.toggle('c2')
//改css
dEle.style.color = 'green'