DOM学习

最新推荐文章于 2024-10-16 21:35:12 发布

m0_67665669

最新推荐文章于 2024-10-16 21:35:12 发布

阅读量371

点赞数 12

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_67665669/article/details/136225428

版权

本文介绍了前端开发的核心技术，包括HTML、CSS和JavaScript，重点阐述了DOM操作，如元素获取、事件处理、内容修改、属性操作和样式设置。此外，还提到了DOM操作中的innerText和innerHTML的区别以及排他思想的应用。

摘要由CSDN通过智能技术生成

一、简介

1.前端开发核心技术。

网页主要由：结构（html），表现（css），行为（js）组成。这三门技术时前端开发的核心技术。

2.前端开发的其他技术。

ajax、SEO、vue等等。

二、DOM

1.获取元素

document.getElementById('id')  //通过id获取
document.getElementByTagName('tagname')  //通过标签名获取
document.getElementByClassName('classname')  //通过类名获取

//获取body标签
var bd = document.body

//获取html标签
var ht = document.documentElement

2.事件

a.时间三要素：事件源事件类型事件处理程序。

var btn = document.getElementById('id')
btn.onclick =function(){console.log("hello")}

3.dom修改元素内容

var btn =document.querySelector('.btn')
var btn1 =document.querySelector('.btn1')
var box =document.querySelector('.box')
btn.onclick= function(){
    box.innerText ='笨蛋'  //类名为box的盒子内容改为笨蛋
}

btn1.onclick= function(){
    box.innerHTML ='不是笨蛋'  //类名为box的盒子内容改为不是笨蛋
}

//区别：innerText不识别html标签，从起始位置到终止位置的内容但它去除 html 标签，
//同时空格和换行也会去掉。 
//innerHTML识别html标签。识别空格。两者都是可读写的

4.操作元素属性

元素.属性。

var a =document.querySelector('.link')
a.click =function(){
    a.href ="wwww.baidu.com"
}

5.操作元素样式

var btn =document.querySelector('.btn')
var box =document.querySelctor('div')
btn.onclick =function(){
    btn.style.backGroundColor = 'blue';
    box.style.display ='none'
}//产生的是行内样式

6.排他思想

<body>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
</body>
<script>
    console.log(111);
    let btns =document.querySelectorAll('button')
    for(let i =0;i<btns.length;i++){
        btns[i].addEventListener('blur',function(){
            this.classList.remove('pink')
        })
        btns[i].addEventListener('click',function(){
            this
.classList.add('pink')
        })
    }
</script>