JS——BOM&事件

BOM：

Browser Object Model（浏览对象模式）

  • 允许JavaScript与浏览器对话
  • 不存在浏览器对象模型（BOM）的官方标准
  • 现代的浏览器已经实现了JavaScript狡猾相同的方法和属性，因此它经常作为BOM的方法和属性被提到

Window对象：

  • 所有浏览器都支持window对象，它代表浏览器的窗口。
  • 所有全局JavaScript对象，函数和变量自动成为window对象的成员
  • 全局变量是window对象的属性和对象的方法。
window.document.getElementById("header");
等同于：
document.getElementById("header");

window窗口尺寸：

两个属性可用于确定浏览器的尺寸。

  • window.innetHeight-浏览器窗口的内高度（以像素计）
  • window.innetWidth-浏览器窗口的内高度（以像素计）
<html>
<body>

<p id="demo"></p>

<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

var x = document.getElementById("demo");
x.innerHTML = "浏览器内窗宽度：" + w + "，高度：" + h + "。";
</script>

</body>
</html>

窗口其他方法：

window.open() - 打开新窗口

window.close() - 关闭当前窗口

window.moveTo() -移动当前窗口

window.resizeTo() -重新调整当前窗口

弹出框：

window.alert

弹出警告框，当弹出时，用户将需要单击“确定”来继续。

window.alert("sometext");
//可以不带window前缀使用
alert("我是一个警告框！");

如果想要在弹出框中折行，那么使用\n来进行。

alert("Hello\nHow are you?");

window.confirm

  1. 确认框，弹出确认或取消来继续进行。
  2. 如果用户单击“确定”，该框返回true，如果用户单击“取消”，该框返回false
var r = confirm("请按按钮");
if (r == true) {
    x = "您按了确认！";
} else {
    x = "您按了取消！";
}

 window.prompt

  1. 如果希望用在进入页面前输入值，通常会使用提示框。
  2. 用户将输入值后单击“确定”或“取消”来继续进行。
  3. 如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回NULL

基本语法：

window.prompt("sometext","defaultText");

实例：

var person = prompt("请输入您的姓名", "比尔盖茨");
if (person != null) {
    document.getElementById("demo").innerHTML = "你好 " + person + "！今天过的怎么样？";
}
//比尔盖茨是默认显示。

事件：

即做特定动作时，更改其原有的属性和方法。

特点：

  • 在事件定义的function的this是指的绑定事件的对象。
  • 全部行为内添加，优先级最高
  • 事件相同时，后面会覆盖前面的事件。
  • 注意，当元素没有加载完成时，就运行绑定事件的话，那么就会产生无法绑定的情况，这时就需要进行委托。（on方法）

onclick（点击事件）

在鼠标点击时，产生的事件

<body>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<script>
			var lis = document.getElementsByTagName('li');
			for(var i=0; i < lis.length;i++){
				lis[i].onclick = function() {
					console.log(this)
				};
			};
	</script>
</body>

onmouseover（鼠标悬浮事件） 

当鼠标悬浮时，所产生的事件

onmouseout（鼠标离开事件）

当鼠标离开时，产生的事件。

onselect（内容选中事件）

当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。

	<body>
		<input type="text" value="xb" onselect="func()">
		<ul id='uul'></ul>
		<script>
			function func(){
				alert('内容被选中。')
			};
		</script>
	</body>

onchange（文本框内容改变事件）

通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。

onfocus（光标聚焦事件）

当网页中的元素获得焦点时，会执行该事件。

onblur（光标失焦事件）

当光标离开当前聚焦元素的时候，触发onblur事件。

className（增加class属性）

  1. 可以为其进行属性的增加
  2. 可以为其进行当前class名字的获取
  3. 如果要在原有基础上增加则使用+=，需要注意中间要加空格分开。并加判断结束不间断的添加。

为匹配到的标签进行class属性的增加

<body>
    <li>1</li>
<script>
    var lis = document.getElementsByTagName('li');
    lis[0].className = 'active'
</script>
</body>

获取class名字

<body>
    <div id="box" class="hh"></div>
<script>
        // 1. 获取事件源对象
        var lis = document.getElementById('box');
console.log(lis.className);
</script>
</body>

children（获取子元素，包括子元素属性）

<body>
    <ul id = 'box'>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

<script>
        var lis = document.getElementById('box');
console.log(lis.children
           ); 
</script>
</body>

getAttribute（获取标签上属性名称）

<body>
    <div id="box"></div>
    <script>
            var lis = document.getElementById('box');
    console.log(lis.getAttribute('id'));
    </script>
</body>

setAttribute（更改标签上属性名称）

  1. 自定义的属性，使用setAttribute是在网页中可以看到的。而如果使用lis.abc=123这种方式来进行添加，那么就无法看到，需要使用dir来查看。
<body>
    <div id="box"></div>
    <script>
            // 将id更改为hh
            var lis = document.getElementById('box');
    console.log(lis.setAttribute('id','hh'));
    </script>
</body>

appendChild（添加标签）

搭配createElement使用。

<body>
    <ul id='uul'></ul>
    <script>
        var lis = document.getElementById('uul');
        var jli = document.createElement('li')
        lis.appendChild(jli)
    </script>
</body>

insetBefore（插入新标签）

<body>
    <ul id='uul'></ul>
    <script>
        var lis = document.getElementById('uul');
        var jli1 = document.createElement('li')
        var jli2 = document.createElement('li')
        lis.appendChild(jli1)
        jli1.innerText='111';
        lis.insertBefore(jli2,jli1)
        jli2.innerHTML='222'
    </script>
</body>

innerHTML（添加内容，可以以标签形式添加）

  • innertext（添加内容，只能以文本形式添加）
  • 这俩属于同一个项，会进行覆盖。
<body>
    <ul id='uul'></ul>
    <script>
        var lis = document.getElementById('uul');
        var jli = document.createElement('li')
        lis.appendChild(jli)
        jli.innerText='bbb';
        jli.innerHTML='aaa';
    </script>
</body>

removerChild（删除标签）

<body>
    <ul id='uul'></ul>
    <script>
        var lis = document.getElementById('uul');
        var jli1 = document.createElement('li')
        var jli2 = document.createElement('li')
        lis.appendChild(jli1)
        jli1.innerText='111';
        lis.insertBefore(jli2,jli1)
        jli2.innerHTML='222'
        lis.removeChild(jli1)
    </script>
</body>

 

posted @   新兵蛋Z  阅读(54)  评论(0)  编辑  收藏  举报
相关博文：
· JS——DOM
· jQuery——事件方法
· 前端之BOM与DOM
· JavaScript之BOM与DOM
· JS之BOM、DOM
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
历史上的今天：
2019-12-25 Python——装饰器
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛