操作dom属性与样式

什么是dom对象

浏览器对象模型( Broswer Object Model )

就是将浏览器也抽象成对象, 将浏览器中的所有的功能也抽象成对象的属性或方法.

有一个顶级对象 window, 它表示的就是浏览器

load 事件

load 表示的是加载,表示数据加载完成就会被触发
window.onload = function () {
// 页面中所有的内容全部加载完毕
// 那么就会触发, 而且只会触发一次
};

Location 对象

页面自动跳转 window.location.href = ‘页面地址’;

1
2
3

<script>
		location.href="http://www.baidu.com";
</script>

赋值跳转 location.assign( ‘https://www.baidu.com‘ ); // assign 就是赋值的意思可通过事件跳转

替换跳转 location.replace( ‘http://www.qq.com‘ )

直接将当前页替换成对应的页面, 在浏览器记录中不记录当前页面

刷新页面 location.reload()

location.search 用来获取url?后面的字段

var url = location.search;

    console.log(url);

search后面没有()

解析网站地址

快速获取网站字符串的各项信息

document.querySelector( 'button' ).onclick = function () {
           // 创建 a 标签
           var a = document.createElement( 'a' );
           a.href = 'http://www.itcast.cn:8080/123/abc/index.html?name=itcast#mark';

           console.log( '主机(域名): ' + a.host ); 
           console.log( '协议: ' + a.protocol );
           console.log( '端口: ' + a.port );
           console.log( '参数: ' + a.search );
           console.log( '路径: ' + a.pathname );
           console.log( '锚点: ' + a.hash );


       };

计时器[ 重要 ]

延时器 setTimeout

window.setTimeout( function () {

                    // 需要推迟执行的代码

                }, 毫秒数 )

定时器 setInterval

window.setInterval( function () {

                   // 需要重复执行的代码

               }, 毫秒数 )

清除延时器clearTimeout( 延时器Id )
清除计时器clearInterval( 计时器ID )

移动的盒子有一个 bug, 在连续点击按钮的时候, 移动的速度会越来越快.
原因: 是每次点击都会开启计时器
解决方法就是每次点击 都将上一次的计时器清除

小案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box{
        width: 1500px;
        height: 300px;
        /* border: 1px solid #ccc; */
        background-color: #ccc;
    }
    </style>
</head>
<body>
    <div class="box"></div>
    <button class="start">开始</button>
    <button class="end">结束</button>
    <script>
    var arr = ['哈哈','史振国', '张超', '王修刚', '陈海峰', '高千山', '葛睿哲', '闫舵', '常琳琳', '姚瑞', '赵忠强', '赵娜', '许家家', '林超', '王勇智', '谢颖瑞', '林婷', '丁子龙', '徐冬雪', '高琪', '陈彪', '冯燕东', '卢晶', '任皓', '孟展伊', '窦宇杰', '毛亚明', '张弘韦', '刘银川', '高传奇', '孙棒棒', '焦敏', '王坤鹏', '滑龙', '李继玄', '粟兴秀', '袁状', '侯志强',
            '柳加豪', '李昭萍', '郝萌萌', '张伟涛', '闫静超', '张婷婷', '彭可', '车路明', '裴思佳', '蒋智斌', '陈少卫', '梁恩硕', '朱思华', '杨晶晶', '杨波', '郭海胜', '梁兆兴', '田强', '张强', '吕涛', '高观宝', '高观宝', '杨阵奎', '王新鹏', '张宏宇', '刘铭', '杨瑞超', '魏月莹', '王晶', '黄善龙', '晏鹏', '李昕', '梁学智', '于永津', '张亚坤', '孟超', '孙玉', '王旭'];
    var start = document.getElementsByClassName('start')[0];
    var end = document.getElementsByClassName('end')[0];
    var box = document.getElementsByClassName('box')[0];
    
    var timer;//....................................................//写外面
    for(var i = 0;i<arr.length;i++){
        var div = document.createElement('div');
        div.innerHTML = arr[i];
        div.style.float = 'left';
        div.style.margin = '10px';
        div.style.padding = '2px';
        div.style.backgroundColor = 'yellow';
        box.appendChild(div);
    };
    
    start.onclick = function(){
        clearInterval(timer);
        timer = setInterval(function(){
            var index = parseInt(Math.random()*arr.length);
            for(let i = 0;i<arr.length;i++){
                box.children[i].style.backgroundColor = 'yellow';
            }
            box.children[index].style.backgroundColor = 'red';
            // this.previousElementSibling.children[index].style.backgroundColor = 'red';
             // console.log(index);
        },200)
        
       
    }
    end.onclick = function(params){
        clearInterval(timer);
    };
    </script>
    
    
</body>
</html>

操作dom属性与样式

操作属性
1> 读取属性的值
2> 设置属性的值
在 DOM 观点中, 页面中的每一个标签都是对象, 所以
我们要读取元素的属性时, 直接就是读取对象的属性
我们要设置元素的属性时, 直接就是给对象的属性赋值

-> 操作类样式使用的是 className, 而不是 class. 因为 class 是一个关键字.

操纵属性

// 设置宽高的方法有三种
// 1> img 标签自有的属性 width 与 height
// 2> 设置 img 的行内样式, 即 img 标签的 style 属性中的 width 与 height
// 3> 使用类样式, 外部样式, 嵌入样式

1 img.width = ‘500’ 使用 html 的属性的时候设置宽高默认就是像素
2 img.style.width = ‘500px’;
3 img.className = ‘c’;
.c {
width: 200px;
}

DOM对象.style.样式属性名 = 样式属性值

1
2
3

设置图片地址 :
var imgobj = document.getElementsByTagName( 'img' )[ 0 ];
imgobj.src = './imgs/1.png';

操纵类名

操作类样式使用的是 className, 而不是 class. 因为 class 是一个关键字.

几个特殊的属性

.innerText
表示标签内部的文本
其与 innerHTML 的区别是
1> 读取的时候忽略标签
2> 设置的时候标签形式的字符串不会被转换成 DOM, 而是转义( 例如: > > )
.innerHTML
inner 表示的是内部的, 与之对应的有一个 outer 叫外部的
innerHTML 内部的 html
```
这个属性的作用是读取或设置标签中的 内容( 子标签等 )
```

处理行内样式

样式的分类:
1> 行内样式: 直接写在标签中的样式

2> 嵌入样式: 写在页面的 style 标签中的样式, 一般使用的是选择器来定位元素
3> 外部样式: 独立的利用一个 css 文件写到外面, 然后利用 link 标签引入 css
        专一原则, 就近原则
    标签的行内样式写到一个 style 属性中( 注意这个属性是一个很长的字符串 )
    对应的 DOM 对象, 也有一个 style 属性. 

    但是 DOM 对象的 style 属性不是一个字符串. DOM 的 style 属性也是一个对象,
    这个对象就是 样式属性名 与 样式属性值 构成的键值对.

    DOM对象.style.样式属性名 = 样式属性值

非行内样式-样式操作

style 只能处理行内样式, 无法处理嵌入样式
如果第一次获取元素的样式值的时候, 样式不是行内样式, 是写在外部的, 就无法使用 style 获取
应该使用 “计算样式”
window.getComputedStyle( 元素 )
该方法会返回这个元素的所有计算样式的对象
其使用方法与 style 属性的使用方法是一模一样的( 只读 ).
    var left = box.style.left || window.getComputedStyle( box ).left;

    function func( arg ) {
        // 对参数进行操作
        // 加入我们需要的参数是一个数组
        arg = arg || [];  
        // 如果传入数组了, 那么这句话无效, 如果没有传入参数则使用 [] 给 arg 赋值
        // ...

    }


利用标准 DOM 的方式创建 页面中的 元素
思路: 将写 html 标签的顺序改成代码的顺序即可

javascript API笔记

#dom操作

操作dom属性与样式

http://www.dwyblog.cn/2020/07/20/操作dom属性与样式/

作者

幸福来敲门

发布于

2020年7月20日

许可协议

操作dom获取宽高和坐标上一篇

vue随笔_vuex 下一篇