DOM笔记(一)：获取元素、事件、改变元素内容

最新推荐文章于 2024-04-17 10:31:49 发布

不务正业的前端学徒

最新推荐文章于 2024-04-17 10:31:49 发布

阅读量332

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45522704/article/details/104860944

版权

DOM全名文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过DOM可以改变网页的内容，结构和样式
文档：一个页面就是一个文档，DOM中使用document表示
元素：页面的所有标签都是元素，DOM中用element表示
节点：网页中的所有内容都是节点，DOM用node表示

获取元素的方式

根据ID获取
根据标签名获取
通过H5新增方法获取
特殊元素获取

根据ID获取

<body>
    <div id="num">2222222222</div>
    <script>
        var num = document.getElementById('num');
        console.log(num);
        console.log(typeof num);
        // console.dir打印我们返回的元素对象，更好的查看里面的属性和方法
        console.dir(num);
    </script>
</body>

根据标签名获取

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    var lis = document.getElementsByTagName('li');
    console.log(lis);
    console.log(lis[0]);
</script>

通过H5新增方法获取
document.getElementsByClassName(‘类名’);
document.querySelector(‘选择器’);
document.querySelectorAll(‘选择器’);

<div class="box">盒子</div>
<div class="box">盒子</div>
<div class="nav">
    <ul>
        <li>首页</li>
        <li>产品</li>
    </ul>
</div>
<script>
    var boxs = document.getElementsByClassName('box');
    console.log(boxs);
    var fsbx = document.querySelector('.box');
    console.log(fsbx);
    var nav = document.querySelector('.nav');
    console.log(nav);
    var allbox = document.querySelectorAll('.box');
    console.log(allbox);
</script>

// 获取body元素
var bo = document.body;
console.log(bo);
console.dir(bo);
// 获取html元素
var html = document.html;
console.log(html);
console.dir(html)

事件

<button>dianji</button>
<script>
    // 获取元素
    var btn = document.querySelector('button');
    // 事件类型：点击
    btn.onclick = function() {
        // 触发的事件
        alert('点击了');
    }
</script>

常见的鼠标事件
onclick 鼠标点击左键
onmouseover 鼠标经过
onmouseout 鼠标离开
onfocus 鼠标焦点触发
onblur 失去鼠标焦点
onmousemove 鼠标移动
onmouseup 鼠标弹起
onmousedown 鼠标按下

改变元素内容

element.innerText
去除html标签、空格、换行
element.innerHtml
包括html标签、空格、换行

    <div></div>
    <p>
        1111
    </p>
    <script>
        var div = document.querySelector('div');
        var p = document.querySelector('p');
        // innerText不认识html标签
        div.innerText = '<strong> 12344124 </strong>';
        p.innerHTML = '<strong> 12344124 </strong>';
        // 这两个属性可以读写
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>

改变样式style
如果要改类名：element.className=’ 新类名 '；
但className会覆盖原来的类名
所以可以element.className='旧类名新类名 '；

//改变样式style
<div>1</div>
<script>
    var div = document.querySelector('div');
    div.onclick = function() {
        this.style.backgroundColor = 'purple';
        this.style.width = '250px';
    }
</script>

如果是改变图片用src

btn.onclick = function() {
            img.src = 'images/1.jpg';
}

表单里的value

<button>按钮</button>
<input type="text" value="输入内容">
<script>
    var btn = document.querySelector('button');
    var input = document.querySelector('input');
    btn.onclick = function() {
        input.value = '点击了';
        btn.disabled = true;
    }
</script>

不务正业的前端学徒

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DOM笔记(一)：获取元素、事件、改变元素内容

DOM全名文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过DOM可以改变网页的内容，结构和样式文档：一个页面就是一个文档，DOM中使用document表示元素：页面的所有标签都是元素，DOM中用element表示节点：网页中的所有内容都是节点，DOM用node表示获取元素的方式根据ID获取根据标签名获取通过H5新增方法获取特殊元素获取根据ID获取<b...
复制链接

扫一扫