【JavaScript笔记】BOM、DOM知识总结

最新推荐文章于 2021-04-27 22:39:56 发布

吾昂王sun

最新推荐文章于 2021-04-27 22:39:56 发布

阅读量206

点赞数

分类专栏： JS 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_39264561/article/details/107068200

版权

JS 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

BOM：

【滚动条事件】

//scrollTo(x,y) 方法可把内容滚动到指定的坐标。
document.onclick = function() {
    scrollTo(100, 200);
}

【定时器】

1.间隔定时器：反复执行定时器，规定的时间内不断的执行

// window.setInterval(函数名、函数体, 时间ms);
var num = 0;
var timer = window.setInterval(function() {
    num++;
    console.log(num);
}, 1000);

// function sum() {
//     num++;
//     console.log(num);
// }
// var timer = window.setInterval(sum(), 1000);//定时器无效，执行一次
// var timer = window.setInterval('sum()', 1000); //可以，不建议

//关闭间隔定时器
//window.clearInterval(定时器开启的返回值)
document.onclick = function() {
    window.clearInterval(timer);
}

2.延时定时器：在规定的时间之后执行一次

// window.setTimeout(函数名、函数体, 时间ms);
alert('hello');
    var timer1 = window.setTimeout(function() {
    alert('hi');
}, 3000);

// window.clearTimeout(定时器的返回值)
window.clearTimeout(timer1);

【同步与异步】

js是一门单线程语言，所谓"单线程"，就是指一次只能完成一件任务

js的执行模式分为两种：同步和异步

【同步模式】就是上一段的模式，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的；

【异步模式】则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的

【异步运行机制】如下：

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。

（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。

（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行

open和close：

Window 接口的 open() 方法，是用指定的名称将指定的资源加载到浏览器上下文（窗口 window ，内嵌框架 iframe 或者标签 tab ）。如果没有指定名称，则一个新的窗口会被打开并且指定的资源会被加载进这个窗口的浏览器上下文中。

close：此只读属性表示所引用的窗口是否关闭。

DOM：

概念：DOM是”Document Object Model”的首字母缩写，即文档对象模型。用来描绘一个层次化的节点树，允许开发人员获取、添加、移除和修改页面的某一部分元素

HTML结构组成：

<div><span> : 标签tagName 元素element 节点Node

href src title alt class id : 属性 Attribute

标签内部的文本内容 : 文本text

核心：document对象

获取元素的方法：

<body>
    <div class="box1">
        <ul>
            <li>11111</li>
            <li>11111</li>
            <li>11111</li>
            <li>11111</li>
        </ul>
    </div>
    <div class="box2">
        <ul>
            <li>222222</li>
            <li>222222</li>
            <li>222222</li>
            <li>222222</li>
        </ul>
    </div>
    <script>
        // 一.获取元素的方法
        // css选择器当做参数。

        // 1.querySelector()： 通过选择器获取元素，如果获取多个只返回第一个元素。
        var boxs = document.querySelector('.box1');
        console.log(boxs); //返回第一个元素
        // console.log(document.querySelector('.box1 ul'));

        // 2.querySelectorAll()： 通过选择器获取元素，可同时获取多个元素，类数组。
        console.log(document.querySelectorAll('.box2 li'));
        // var oUl = document.querySelector('ul');
        // console.log(oUl.querySelectorAll('li'));

        // 3.getElementsByClassName()： 获取相同类名的节点列表（IE8及以下不支持），返回类数组
        console.log(document.getElementsByClassName('box1')[0]);
    </script>
</body>

【创建、添加、删除、插入、克隆、替换】

1. 创建元素 - document.createElement(标签名)

var cDiv = document.createElement('div'); //元素对象
alert(cDiv); //元素对象 [object HTMLDivElement]
cDiv.innerHTML = '我是创建出来的div元素';
cDiv.style.cssText = 'width:200px;height:200px;background:red;';

2. 追加元素 - appendChild(元素对象)；父节点.appendChild(元素节点) 把元素节点插入到父节点的内部最后的位置

document.body.appendChild(cDiv); //将创建的div元素添加到body元素内部的下面

//document.getElementById('id名').appendChild(创建的元素);

<table>
    <tr id="box1">
        
    </tr>
</table>

//1.创建元素 - document.createElement(标签名)
var cTable = document.createElement('td');

cTable.innerHTML = '这是创建出来的tr元素';
cTable.style.cssText = 'width:0px;height:30px;background:red';

//2.追加元素 - appendChild(元素对象)
document.getElementById('box1').appendChild(cTable);

3. 删除元素对象 - 删除子元素 - removeChild()；父元素删除内部的子元素；parentNode:获取元素对象的父节点

document.body.removeChild(cDiv);
// parentNode:获取元素对象的父节点
// body.parentNode : html元素
// div.parentNode.parentNode:div的父元素的父元素

4. 插入元素 - 父节点.insertBefore(新的元素节点,存在元素节点) 在父节点内,把新的元素节点插入到已经存在的元素节点的前面；children:获取元素对象的子元素，类数组(length和索引下标)

oUl.children:获取oUl内部的子元素。

5. obj.cloneNode()克隆(复制)obj节点，可以传一个布尔值为参数，如果参数为true，连同obj子元素一起克隆

var oBox = document.querySelector('.box');
var clonebox = oBox.cloneNode(true); //克隆元素
document.body.appendChild(clonebox); //追加

6. 父节点.replaceChild(新添加的节点 , 被替换的节点) 替换子节点

var cP = document.createElement('p'); //创建p元素
cP.innerHTML = oBox.innerHTML; //oBox里面的内容追加
document.body.replaceChild(cP, oBox); //替换。

元素类型：

1、节点可以分为元素节点、属性节点和文本节点...，他们分别用不同的数字代表类型

2、元素(1) 属性(2) 文本(3)

3、每个节点又有三个非常有用的属性，分别为： nodeName、 nodeType、 nodeValue

吾昂王sun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript笔记】BOM、DOM知识总结

BOM：【滚动条事件】//scrollTo(x,y) 方法可把内容滚动到指定的坐标。document.onclick = function() { scrollTo(100, 200);}【定时器】 1.间隔定时器：反复执行定时器，规定的时间内不断的执行// window.setInterval(函数名、函数体, 时间ms);var num = 0;var timer = window.setInterval(function() { num++...
复制链接

扫一扫

专栏目录