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'

 

posted @ 2021-02-21 00:46  丑矬穷屌  阅读(25)  评论(0编辑  收藏  举报