js学习笔记（DOM~文档页面元素获取）

最新推荐文章于 2024-06-16 18:09:06 发布

甜甜今天学了吗

最新推荐文章于 2024-06-16 18:09:06 发布

阅读量125

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/dawanhjiao/article/details/104294379

版权

js特效

WebAPIs
1.组成
（1）BOM—浏览器对象模型：
一套操作浏览器功能的API,通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
（2）DOM—文档对象模型：
一套操作页面元素的API，DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
2.DOM
（1）基本概念：文档对象模型，是W3C组织提供推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口，它可以动态地访问程序和脚本，更新其内容、结构和文档的风格
（2）DOM又称文档树模型
①图示
在这里插入图片描述
②概念
a.文档：一个网页可以成为文档
b.节点：网页中所有内容都是节点（标签、属性、文本、注释等）
c.元素：网页中的标签
d.属性：标签的属性
③DOM常用操作
a.获取文档元素
b.对文档元素进行增删改查操作
c.事件操作
（3）window和document
①window（属于BOM）
a.所有的浏览器都支持window对象，它支持浏览器窗口
b.所有的js全局对象、函数以及变量都自动成为window对象的成员
c.全局变量是window对象的属性，全局函数是window对象的方法
②document（属于DOM）
a.document也是window对象的属性之一
b.document对象是documentHTML的一个实例，也是window对象的一个属性，因此可以将document对象作为一个全局对象来访问
c.常用属性
（4）事件
①基本概念
a.事件：触发、响应机制，用户和浏览器之间的交互行为，比如：点击按钮、鼠标进入/离开、双击······
b.事件三要素
A.事件源：触发（被）事件的元素
B.事件名称：如：click是点击事件
C.事件处理程序：事件触发后要执行的代码（函数形式）
②使用方式
我们可以在事件对应的属性中实现一些js代码，这样当事件被触发时，这些代码将会执行
比如：点击按钮
a.方法一
结构和行为耦合，不方便维护，不推荐使用

<body>
<button id="btn" onmousemove="alert('你找到我啦！')">按钮</button>
</body>

b.方法二
为按钮的对应事件绑定处理函数的形式来响应事件,推荐

<body>
<button id="btn">按钮</button>
</body>
<script>
var btn = document.getElementById('btn');
    btn.onclick = function (ev) {
        alert('你又找到我啦！');
    }
</script>

（5）文档的加载过程
①存在问题
浏览器在加载一个页面时，是按照自上向下的顺序加载的。读取到一行就运行一行，如果将script标签写到head内部，在代码执行时，页面还没有加载，页面中的DOM对象也没有加载，会导致js无法获取到页面中的DOM对象。
②解决方案
a.onload事件
onload事件会在整个页面加载完成之后才触发
b.把script标签放到body尾部
最好两者结合着写

<body>
<button id="btn">按钮</button>
</body>
<script>
window.onload = function (ev) {
        var btn = document.getElementById('btn');
        btn.onclick = function (ev) {
            alert('你找到我啦！');
        }
    }
</script>

③onunland当用户退出页面时执行

<script>
window.onunload = function () {
//当用户退出页面时 执行
    }
</script>

（6）文档页面元素获取
①根据id获取元素

<body>
<button id="btn">按钮</button>
</body>
<script>
window.onload = function (ev) {
        var btn = document.getElementById('btn');
        btn.onclick = function (ev) {
            alert('你找到我啦！');
        }
    }
</script>

②根据标签名获取元素
得到的是一个数组，所以要用下标获取

<body>
<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
</body>
<script>
window.onload = function (ev) {
//得到的是一个数组，所以要用下标获取
   var btn1 = document.getElementsByTagName('button')[0];
   var btn2 = document.getElementsByTagName('button')[1];
   btn1.onclick = function (ev) {
       alert('你找到我啦!！');
   };
   btn2.onclick = function (evv) {
       alert('你又找到我啦!！');
   }
}

③根据name获取元素

<body>
<button name="an">按钮1</button>
<button name="an">按钮2</button>
</body>
<script>
window.onload = function (ev) {
//得到的是一个数组，所以要用下标获取
   var btn1 = document.getElementsByName('an')[0];
   var btn2 = document.getElementsByName('an')[1];
   btn1.onclick = function (ev) {
       alert('你找到我啦!');
   };
   btn2.onclick = function (evv) {
       alert('你又找到我啦!');
   }
}

④根据类名获取元素

<body>
<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
</body>
<script>
window.onload = function (ev) {
//得到的是一个数组，所以要用下标获取
    var btn1 = document.getElementsByClassName('btn')[0];
    var btn2 = document.getElementsByClassName('btn')[1];
    btn1.onclick = function (ev) {
         alert('你找到我啦！');
    };
    btn2.onclick = function (evv) {
         alert('你又找到我啦！');
    }
}
</script>

⑤根据选择器获取元素

<body>
<button name="an" class="btn" id="btn">按钮</button> 
</body>
<script>
window.onload = function (ev) {
        var btn = document.querySelector('button');
        //'#btn' 、 '.btn'都可以，只要是选择器就行
        btn.onclick = function (ev) {
            alert('你找到我啦!');
        }
    }

<body>
<button name="an" class="btn" id="btn">按钮</button> 
</body>
<script>
window.onload = function (ev) {
//得到的是一个数组，所以要用下标获取
        var btn = querySelectorAll('button')[0];
        //'#btn' 、 '.btn'都可以，只要是选择器就行
        btn.onclick = function (ev) {
            alert('你找到我啦!');
        }
    }

3.BOM

甜甜今天学了吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js学习笔记（DOM~文档页面元素获取）

js特效WebAPIs1.组成（1）BOM—浏览器对象模型：一套操作浏览器功能的API,通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等（2）DOM—文档对象模型：一套操作页面元素的API，DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作2.DOM（1）基本概念：文档对象模型，是W3C组织提供推荐的处理可扩展标记语言的标准编程...
复制链接

扫一扫