js操作DOM节点及JSON数据格式

最新推荐文章于 2024-06-21 09:44:49 发布

待俺洗个sá

最新推荐文章于 2024-06-21 09:44:49 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/qq_45038782/article/details/90708557

版权

JS操作DOM节点及JSON数据格式

JS操作DOM元素

DOM节点分为三大类: 元素节点(标签节点)、属性节点和文本节点，属性节点和文本节点都属于元素节点的子节点。在利用js操作DOM节点时，首先要先获取DOM元素，然后对其进行相关操作.

1.获取元素：通过元素的相关属性进行操作，如id，classname。
var id=document.getElementById("id");
2.获取子节点：
childElementCount //获取子元素节点个数
childNodes //获取子节点个数
nodeType //当前节点类型
nodeName //节点名称
nodevalue //节点值
3.获取同胞兄弟元素：
nextSibling //下一个节点
nextElementSibling //下一个元素
previousSibling //上一个节点
previousElementSibling //前一个元素
4.获取子元素里面的第一个或最后一个：
firstElementChild //第一个元素
firstChild //第一个节点
lastChild //最后一个节点
lastElementChild //最后一个元素
5.元素的追加：
appendChild
6.DOM的动态创建：

var s = document.createElement("li"); //动态创建元素
    s.innerHTML = "5";  //进行操作
    s.className = "lilast"

7.给元素添加事件：

nav.appendChild(s); //将创建的元素追加到父元素后面
    var last = document.getElementsByClassName("lilast")[0];
    last.onclick = function () {  //创建点击事件函数
        console.log(2);
    }

获取页面的高和宽

window里面的方法属性可以省略window，主要方法如下：

window.screen  //获取页面所有属性
window.screen.availHeight  //获取工作区的高
window.screen.availWidth  //获取工作区的宽
window.screen.height  //获取页面高
window.screen.width  //获取页面宽
document.documentElement.clientWidth; //可视区域的宽
document.documentElement.clientHeight;
window.pageYOffset  //滚动条上偏移
window.pageXOffset
window.innerWidth; //浏览器可视区域的宽和高
window.innerHeight;
window.close(); //关闭页面
window.open(); //打开页面

window.navigator //包含有关访问者的信息

JS对象

js主要内置对象包括window、document、history、location。

建立所有的全局变量和方法全部是window属性和方法，window的其他主要属性：
1.提示框：alert();
2.输入框：prompt();
3.常用事件
onload：加载完成事件
onresize：窗口大小改变的事件
window.onresize = function () {
console.log(1);
}
history：存储用户访问页面前进倒退
go(1)、forward() //前进
go(-1)、back() //后退
location：
href：获取地址，也可以做页面的跳转

JS内置对象

js中主要的内置对象包括：Array、Math、Date、String、Setinterval、settimeout。

Math的主要属性有：
Math.random(); //获取随机数
Math.floor(); //向下取整
Math.ceil(); //向上取整
Math.round(); //四舍五入
Math.sqrt(); //开方
Math.pow(); //幂
Data的主要属性有：
1.时间的转化：
time.toUTCString()；//Thu May 30 2019 23:14:08 GMT+0800 (中国标准时间)
time.toDateString(); //Thu, 30 May 2019 15:14:08 GMT
time.toISOString(); //Thu May 30 2019
time.toLocaleDateString() //2019-05-30T15:14:08.614Z
2.使用 date中的方法设置 times.setFullYear(2018); //年
times.setDate(3); //天
times.setHours(12); //时
times.setMinutes(59); //分
times.setSeconds(20); //秒
times.setMilliseconds(200); //毫秒
3.时间的获取
var times=new Date(); //通过方法来获取
times.getDate(); //天
times.getDay(); //周几
times.getFullYear(); //年
times.getHours(); //时
times.getMilliseconds(); //毫秒
times.getMinutes(); //分
times.getMonth(); //月
times.getSeconds(); //天
times.getTime(); //从1970年至的总毫秒数
times.getYear(); //从1900年至的总年数
String的主要属性：
charAt()； //取值类似数组
concat(s2); //两个字符串对象
toString() //转化为字符串
基本类型的变量是存放在栈区的（栈区指内存里的栈内存）；
引用类型的值是同时保存在栈内存和堆内存中的对象；

 var m = "abc";//值类型  转化引用
        var m1 = new String(m);
        console.log(m1);//引用类型转化为值类型
        console.log(m1.toString());

三大计时器
settimeout及setinterval中时间可以设置但是在网页被缩小或者切换选项卡之后计时器继续执行
1.setTimeout()：

    //一次性计时器  延迟多少时间去执行
    setTimeout(function (){
        console.log(1);
    },1000);
    //将settimeout  改造为循环计时器
    var t=null;
    showtime();
    function showtime(){
        console.log(1);
        t=setTimeout("showtime()",1000);
    }
    //关闭计时器
    clearTimeout(t);

2.setInterval();

//循环计时器
    var t=null;
    t=setInterval(function(){
        console.log(1);
    },1000);
    clearInterval(t);

3.requestAnimationFrame();

var time=new Date().getTime();
    loop();
    function loop(){
        /*console.log(1);*/
        /*setTimeout(function (){
            window.requestAnimationFrame(loop);
        },1000);*/
        //根据日期的时间计算1000ms
        var times=new Date().getTime();
        if(times-time>=1000)
        {
            time=times;
            console.log(1);
        }
        times=null;
        window.requestAnimationFrame(loop);
    }

JSON数据格式

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成。

var stus = [
        {name: "maodou", age: 1},
        {name: "maodou1", age: 2},
        {name: "maodou2", age: 3},
        {name: "maodou3", age: 4},
        {name: "maodou4", age: 5}
    ];