【初入前端】第六课课前预习

最新推荐文章于 2024-07-23 11:32:13 发布

iwEternal.

最新推荐文章于 2024-07-23 11:32:13 发布

阅读量75

点赞数

文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/PPofficer/article/details/124955129

版权

文章目录

一、DOM

1. DOM树

下面为DOM树：
在这里插入图片描述

2. 获取元素

getElementById 通过 id 获取

<body>
        <div id="time">2019-9-9</div>  //id
        <script>
            var timer = document.getElementById('time');
            console.log(timer);  //返回object
        </script>
</body>

getElementsByTagName 通过标签名获取

    <ul>
        <li> pink </li> 
        <li> pink </li>
    </ul>
    <script>
        var lis = document.getElementsByTagName('li');
        console.log(lis);   //返回的是 获取元素对象的集合 以伪数组形式存储
    </script>

获取指定元素：如 ol 中的 li

        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));

获取 body 元素和 html 元素

document.body //获取 body 元素
document.documentElement  //获取 html 元素

3. 修改元素内容

Element.innerText 与 Element.innerHTML

var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onclick = function (){
    div.innerText = '2022-1-1'
}
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onclick = function (){
    div.innerHTML = '2022-5-20'
}

4.事件

4.1 执行事件步骤：

获取事件源
注册事件
添加事件处理程序（采取函数赋值形式）

4.2 常见的鼠标事件
在这里插入图片描述

5. 节点

节点：元素节点、属性节点、文本节点
5.1 访问节点

getElementById() ： 获取特定ID元素的节点
getElementsByTagName() ：获取相同元素的节点列表
getElementsByClassName： 获取相同类型名称的节点列表
getAttribute() ：获取特定元素节点属性的值
setAttribute() ： 设置特定元素节点属性的值
removeAttribute() ： 移除特定元素节点属性

5.2 元素节点属性

nodeName：返回一个字符串，其内容是节点的名字
nodeType：返回一个整数，这个数值代表给定节点的类型
nodeValue：返回给定节点的当前值
tagName：获取原酸节点的标签名

5.3 遍历节点树

firstChild：Node，指向在childNodes列表中的第一个节点
lastChild：Node，指向在childNodes列表中的最后一个节点
parentNode：Node，指向父节
ownerDocument：Document，指向这个节点所属的文档
firstChild：Node，指向在childNodes列表中的第一个节点
lastChild：Node，指向在childNodes列表中的最后一个节点
parentNode：Node，指向父节点
childNodes：NodeList，所有子节点的列表
previousSibling：Node，指向前一个兄弟节点：如果这个节点就是第一个节点，那么该值为 null
nextSibling：Node，指向后一个兄弟节点：如果这个节点就是最后一个节点，那么该值为null
hasChildNodes()：Boolean，当childNodes包含一个或多个节点时，返回真值

二、BOM

1. window对象事件

窗口加载事件

window.onload = function () { }
or
window.addEventListener(‘load’,function () { } );

2.调整窗口大小事件

window.onresize = function () { }
or
window.addEventListener(‘resize’,function () { } );

2. location对象

用于获取当前页面地址并把浏览器重定向到新页面。
属性
对象方法

3. navigator对象

包含大量有关Web浏览器的信息，在检测浏览器及操作系统上非常有用

4. history对象

包含浏览器历史
方法：

在这里插入图片描述

iwEternal.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【初入前端】第六课课前预习

文章目录一、DOM1. DOM树![在这里插入图片描述](https://img-blog.csdnimg.cn/881f9b48f7514dd2b5b5e373b3328b8a.png)2. 获取元素3. 修改元素内容二、EOM一、DOM1. DOM树2. 获取元素getElementById 通过 id 获取<body> <div id="time">2019-9-9</div> //id <script>
复制链接

扫一扫