Javascript(六)（Js2）（Dom操作，一些设计思想）

最新推荐文章于 2022-12-15 09:51:32 发布

ERiver_Anthony

最新推荐文章于 2022-12-15 09:51:32 发布

阅读量231

点赞数

文章标签： JavaScript

本文链接：https://blog.csdn.net/ERiver_Anthony/article/details/99978801

版权

Dom

一，浏览器解析文件

浏览器如何把html文件变为UI页面
//bom操作（browser object model）（不是w3c的规范，是所有浏览器都做了这些）
1.浏览器去翻译HTML文件中的代码：
生成window对象
浏览器缓存相关的对象也在这个对象中
浏览器信息与系统信息也在这个对象中
所有标签（节点对象中）都在这个对象中
navigatior
screen：设备和显示效果
history
location
document // Dom

//Dom（document object model）
2.把标签按照文档流顺序进行解析= 》像树一样的数据结构（Dom树）
3.把css样式按照顺序进行解析（css样式结构体）
4.把dom树和css样式结构体结合 = 》renderTree呈现树
5.GPU绘制引擎，按照呈现树的顺序去绘制整个界面

主要学习的是Dom树的操作（了解十二大节点）
Dom操作的的顺序实际上是按照呈现树的顺序执行，然后用这个顺序去执行Dom操作。

二，获取文档树中的节点（没事强迫自己用）

1.var div1=document.getElementById（“xxx”）（填id名）//如果没有，返回null（速度最快）
2.var div1=document.getElementsByClassName（“xxx”）（填类名）//如果没有，返回空容器
3.var div1=document.getElementsByName（“xxx”）//如果没有，返回空容器
4.var div1=document.getElementsByTagName（“xxx”）//通过标签名获取，如果没有，返回空容器（不区分大小写）
(contenteditable:style属性，使该标签可操作)

新出的方法

1.document.querySelector（".div1"）//返回选择器选中元素们的第一个，没有则返回null
2.document.querySelectorAll（".div1"）//返回选择器选中元素们，没有则返回空容器

示例

将微博JSON数据转换成UI界面
在这里插入图片描述
代码：

<!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>微博</title>
    <script type="text/javascript" charset="UTF-8" src="js/sina.js"></script>
    <script>
    	function fn(str) {
			
			
            var dt1 = new Date() //当前时刻 打包成时间object
            // var dt2=new Date(1000*60)//把时间格式的字符串传入函数,打包成一个时间对象
            // var dt2=new Date("2018-06-35 12:30:12")
            // var dt2=new Date(2018,06,35)
            var dt2 = new Date(str)
            //1 分钟内 ==> "刚刚"
            //1分钟-1小时 ==>"xx分钟前"
            //1小时以上 ==> xx-xx 17:28
        
            var re = dt1 - dt2
            console.log(re)
        
            if (0 <= re && re < 1000 * 60) {
                return "刚刚"
            }
            else if(1000 * 60 <= re && re < 1000 * 60*60){
                var absdt=new Date(re)
                return  absdt.getMinutes()+"分钟前"
            }
            else {
                return `${dt2.getFullYear()}-${dt2.getMonth()+1}-${dt2.getDate()}  ${dt2.getHours()}:${dt2.getMinutes()}`
            }
            
        }

    </script>
</head>
<style type="text/css">
    .sina{
        width: 700px;
        height: auto;
        background-color: lavenderblush;
        margin: 20px auto;
        padding: 20px;
        position: relative;
    }
    .img1{
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
    .p1{
        position: absolute;
        top: 5px;
        left: 90px;
    }
    .p2{
        position: absolute;
        top: 40px;
        left: 90px;
        font-size: 10px;
        color: red;
    }
    .p3{
        padding-left: 35px;
    }
</style>
<body>
    <script>
        console.log(sinadata);
        
        var arr=sinadata.statuses;
            for(var i=0;i<arr.length;i++){
            var sinaObj=arr[i];
            var sina=document.createElement("div");
            sina.className="sina";
            document.body.appendChild(sina);

            var img1=document.createElement("img");
            img1.className="img1";
            sina.appendChild(img1);
            img1.src=sinaObj.user.profile_image_url;

            var p1=document.createElement("p");
            p1.className="p1";
            sina.appendChild(p1);
            p1.innerHTML=sinaObj.user.screen_name;

            var p2=document.createElement("p");
            p2.className="p2";
            sina.appendChild(p2);
            p2.innerHTML=fn(sinaObj.created_at);

            var p3=document.createElement("p");
            p3.className="p3";
            sina.appendChild(p3);
            p3.innerHTML="&nbsp"+"&nbsp"+"&nbsp"+"&nbsp"+"&nbsp"+"&nbsp"+"&nbsp"+sinaObj.text;
            }
    </script>

元素的操作

1.外观：例：xxx.style.backgroundColor=“red”
2.事件：xxx.οnclick=function(){}
3.属性：xxx.name1=“Karen”（老师最喜欢的女明星，上课例子只要是name全都是她，其次就是marry啦（明明是Mary）还有Jack（估计是泰坦尼克号深入他心））

第二天

一，节点的增删改查（整合前面的）

查（选择）

1.xxx.appendChild()：给谁添加子元素

2.xxx.insertbefore(c1，c2)：给xxx父元素下c2子元素的前面添加一个子元素c1

3.xxx.innerHTML="" ：给xxx元素添加字符串

4.xxx.parentElement.insertBefore()：在xxx之前添加一个同级的元素

5.xxx.nextElementSibling：选中下一个兄弟元素

6.xxx.previousElementSibling：选中下一个兄弟元素

7.document.querySelector（".div1"）//返回选择器选中元素们的第一个，没有则返回null

8.document.querySelectorAll（".div1"）//返回选择器选中元素们（是个数组），没有则返回空容器

9.var div1=document.getElementById（“xxx”）（填id名）//如果没有，返回null（速度最快）

10.var div1=document.getElementsByClassName（“xxx”）（填类名）//如果没有，返回空容器

11.var div1=document.getElementsByName（“xxx”）//如果没有，返回空容器

12.var div1=document.getElementsByTagName（“xxx”）//通过标签名获取，如果没有，返回空容器（不区分大小写）

13.getComputedStyle：方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。

（Ps：创建表格的时候如果没有th标签在Chrome element显示台上会自动创建tbody，如果不注意，会影响选择器的效果）

节点移动

获取的节点不会导致内存的增大
先获取要移动的节点（包含子节点），将其添加至想要移动的节点
所以达成了节点移动的效果，但是重复移动几次只会出现一个
但是这种效果是浅克隆，是引用的同一个对象
如果要达成深克隆则使用系统提供的方法
xxx.cloneNode()（但是只会克隆父元素，不会克隆子元素和事件,括号内填上参数true，就会克隆子元素和事件）（不增加在界面上，那就只在内存中）

删除

1.xxx.remove（）：把调用者从文档树移除（也就是自己）（同样的也可以删除子元素，见第四条）

2.删除代码…（听完过后觉得老师真的是个zz，hhhh，我以为他要讲个多神奇的办法）

3.element控制台直接删除（这个是真神奇！）

4.xxx.removeChild（）：把调用者的子元素从文档树移除

5.innerHTML=""：清空字符串

改

JS改样式的话是直接添加到行内样式

增

document.createElement：增加一个元素（不增加在界面上，那就只在内存中）

document.body.appendChild：给body增加子元素

xxx.insertbefore(c1，c2)：给xxx父元素下c2子元素的前面添加一个子元素c1

设计思想

排它思想：事件触发时，同一类型所有元素，只有某一个改变
先把所有"归零"
再针对希望改变的元素做出相应的变化

开关（交替）设计：在点击事件中添加flag，每次点击改变flag的值，通过flag的值作为if语句的分支选项来控制菜单的开关

给上几个实例吧
tab菜单和点击下拉菜单两个示例

ERiver_Anthony

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript(六)（Js2）（Dom操作，一些设计思想）

Dom一，浏览器解析文件浏览器如何把html文件变为UI页面//bom操作（browser object model）（不是w3c的规范，是所有浏览器都做了这些）1.浏览器去翻译HTML文件中的代码：生成window对象浏览器缓存相关的对象也在这个对象中浏览器信息与系统信息也在这个对象中所有标签（节点对象中）都在这个对象中navigatiorscreen：设备和显示效果//D...
复制链接

扫一扫