DOM笔记2--元素内容/元素样式操作/定时器/元素位置

本文链接：https://blog.csdn.net/weixin_42139212/article/details/102847168

元素内容：innerText / innerHTML / textContent

获取元素内容

<head>
    <meta charset="utf-8">
    <script>
        window.onload  = function(){
            let oDiv = document.querySelector('div');
            console.log('innerHTML能获取标签，而且不会删除首尾空格:')
            console.log(oDiv.innerHTML);
            console.log('innerText只获取文本，不会获取标签，会删除首尾空格:')
            console.log(oDiv.innerText);
            console.log('textContent只获取文本，不会获取标签，不会删除首尾空格:');
            console.log(oDiv.textContent);
        }
    </script>
</head>
<body>
<div>
    我是div
    <h1>我是标题</h1>
    <p>我是段落</p>
</div>
</body>

在这里插入图片描述

设置元素内容

通过innerHTML、innerText 和 textContent 都能修改元素的内容

通过innerHTML修改元素内容，如果内容中有标签，会转换成标签后，再添加

<head>
    <meta charset="utf-8">
    <script>
        window.onload  = function(){
            let oDiv = document.querySelector('div');
            oDiv.innerHTML = '<span>我是innerHTML添加的span</span>';
            console.log(oDiv)
        }
    </script>
</head>
<body>
<div>
    我是div
    <h1>我是标题</h1>
    <p>我是段落</p>
</div>
</body>

在这里插入图片描述
2. 通过innerText和textContent设置元素内容，如果元素中包括标签，不会将其转化成标签，而是直接当做字符串处理

<head>
    <meta charset="utf-8">
    <script>
        window.onload  = function(){
            let oDiv = document.querySelector('div');
            oDiv.innerText = '<span>我是innerHTML添加的span</span>';
            console.log(oDiv)
        }
    </script>
</head>
<body>
<div>
    我是div
    <h1>我是标题</h1>
    <p>我是段落</p>
</div>
</body>

在这里插入图片描述
3. 不能通过innerHTML / innerText / textContent 获取input的输入值。如果想获取input的输入值，使用 表单id(class名等）.value 的方式

元素样式

设置元素样式：元素.style.要设置的样式名

1.通过 .style 设置的是元素的行内样式，会覆盖该元素的同名样式
2.想读取元素的class属性，不能使用元素.class(class是关键字) 要使用 元素.className 的形式

* 通过style属性设置和读取的样式是内联样式，优先级高，设置后立即显示。无法读取样式表中的样式
* 读取样式的语法：元素.style.样式名
* 设置样式的语法：元素.style.样式名 = 样式值
* 注意：样式名中有-，在JS中不合法，如background-color要将此类样式名修改成驼峰命名法：去掉-，然后将- 后的首字母大写如 background-color 改成backgroundColor
* 但是如果在样式中设置了某个样式是!important，此样式拥有最高优先级 即使在JS中覆盖，也不能修改该样式

<head>
    <meta charset="utf-8">
    <script>
        window.onload  = function(){
            let oDiv = document.querySelector('#box');
            oDiv.style.backgroundColor = 'blue';
        }
    </script>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="box">
</div>
</body>

在这里插入图片描述
3. 通过元素.style 只能读取元素的行内样式。通过内联样式等形式设置的css不能被获取

<head>
    <meta charset="utf-8">
    <script>
        window.onload  = function(){
            let oDiv = document.querySelector('#box');
            oDiv.style.backgroundColor = 'blue';
            console.log("style获取不到非行内样式"+oDiv.style.width);// 输出为空
            oDiv.style.width = '1000px';
            console.log("style只能获取到行内样式"+oDiv.style.width);
        }
    </script>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="box">
</div>
</body>

在这里插入图片描述

读取元素样式：getComputedStyle（）

getComputedStyle()

参数：要获取样式的该元素
返回该元素对应的样式的对象通过对象.样式名来获取样式值
如果获取的样式值没有设置，不会返回默认值，而是返回真实值。如，没有设置width，不会返回auto，而是一个长度。

<head>
    <meta charset="utf-8">
    <script>
        window.onload  = function(){
            let oDiv = document.querySelector('#box');
            let css = getComputedStyle(oDiv);
            console.log(css);
            console.log(css.position);//static
        }
    </script>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="box">
</div>
</body>

在这里插入图片描述

定时器

重复执行setInterval
只执行一次 setTimeout
使用 clearInterval / clearTimeout（定时器标识）关闭定时器

元素位置

在没有滚动条时，clientX的大小 = pageX的大小 clientY的大小 = pageY的大小
clientX/clientY无论高级浏览器还是低级浏览器都支持
pageX/pageY只有高级浏览器支持, 低级浏览器是不支持的(IE9以下)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="fonts/iconfont.css" rel="stylesheet">
    <script>
        window.onload = function () {
            let box = document.querySelector('#box');
            box.onclick = function (event) {
                //offsetX/offsetY: 事件触发相对于当前元素自身的位置 没有单位
                console.log(event.offsetX);//26 鼠标点击的位置距离div左边框的距离
                console.log(event.offsetY);//33 鼠标点击的位置距离div上边框的距离

                //clientX/clientY: 事件触发相对于浏览器可视区域的位置(不包括滚动轴滚动的区域)
                console.log(event.clientX);//131 鼠标点击的位置距离浏览器左边框的距离
                console.log(event.clientY);//221 鼠标点击的位置距离浏览器顶部边框的距离

                // pageX/pageY:     事件触发相对于整个网页的位置(如果存在滚动区域，包括滚动轴滚动的距离)
                console.log(event.pageX); //131
                console.log(event.pageY); //850 此时有垂直滚动轴
            }
        }
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 100px;
            height: 100px;
            background: red;
            margin-left: 100px;
            margin-top: 800px;
        }
    </style>
</head>
<body>
<div id="box"></div>
</body>
</html>