JS(二)

1. DOM

1.1 改变HTML

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

可用于直接向 HTML 输出流写内容。

document.getElementById("").innerHTML=新的 HTML用于修改变 HTML 元素的内容

语法语法描述

document.write("") 直接向 HTML 输出流写内容

document.getElementById("id").attribute=新属性值改变 HTML 元素的属性

document.getElementById("id").innerHTML=新的 HTML 改变 HTML 元素的内容

document.getElementById("id").value 设置或者获取input标签的value值

document.getElementById("id").innerText 设置或者是获取标签中间的内容

语法	语法描述
document.write("")	直接向 HTML 输出流写内容
document.getElementById("id").attribute=新属性值	改变 HTML 元素的属性
document.getElementById("id").innerHTML=新的 HTML	改变 HTML 元素的内容
document.getElementById("id").value	设置或者获取input标签的value值
document.getElementById("id").innerText	设置或者是获取标签中间的内容

1.2 操作样式

语法:节点对象.style.属性名= 属性值

 <body>
    <p>改变第一个段落p的颜色</p>
    <p>第二个p段落</p>
    <button onclick="showInfo()">点击改变样式</button>
    <script>
        function showInfo(){
            // [0]表示第一个元素，eg.只改变第一个p的颜色
            document.getElementsByTagName("p")[0].style.color="red";
        }
    </script>
</body>

1.3 绑定事件

1.3.1 直接在标签中绑定

 <body>
    <p>一个段落</p>
    <button onclick="document.getElementsByTagName('p')[0].style.color='red'">点击</button>
</body>

1.3.2 使用函数绑定

1.3.2.1 方式一

 <body>
    <input type="button" name="" id="tv_btn" value="点击">
    <script>
        document.getElementById("tv_btn").onclick=function(){
            alert("弹一个框");
        }
    </script>
</body>

1.3.2.2 方式二

 <body>
    <input type="button" name="" id="" value="点击" onclick="showInfo()">
    <script>
        function showInfo(){
            console.log("点击我!有惊喜");
        }
    </script>
</body>

1.3.3 使用js提供的方法绑定

方法	描述
addEventListener()	用于向指定元素添加事件句柄。允许在目标事件中注册监听事件
removeEventListener()	移除由 addEventListener() 方法添加的事件句柄。运行一次注册在事件目标上的监听事件

 <p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
    alert("Hello World!");
});
</script>

1.4 创建/删除节点

方法	描述
document.createElement()	创建节点对象
document.createTextNode()	创建文本节点
节点对象.appendChild()	添加父子关系
节点对象.removeChild()	删除子节点

 <body>
    <input type="button" name="" id="" onclick="addEle()" value="增加"/>
    <input type="button" name="" id="" onclick="deleEle()" value="删除第2个段落"/>
    <div id="tv_div">
        <p>第一个段落p</p>
        <p id="tv_p">第2个段落p</p>
        <p>第3个段落p</p>
    </div>
    <script>
        function addEle(){
            //创建节点
            var tv_node = document.createElement("p");
            //创建文本节点
            var tv_ele = document.createTextNode("新增的段落p");
            //添加上下级关系    
            tv_node.appendChild(tv_ele);
            //根据id获取节点对象
            var tv_div = document.getElementById("tv_div");
            tv_div.appendChild(tv_node);
        }
 
        function deleEle() {
            //根据id获取节点对象
            var tv_p = document.getElementById("tv_p");
            //获取父节点
            var tv_div = document.getElementById("tv_div");
            //根据父节点删除子节点
            tv_div.removeChild(tv_p);
        }
    </script>

1.5 定时函数

方法	描述
setInterval("执行操作","间隔的时间(毫秒值)")	间隔多长时间多次执行操作
clearInterval("定时函数")	清除定时函数
setTimeout("执行操作","间隔的时间")	间隔多长时间执行一次
clearTimeout("定时函数")	清除定时函数

 js 定时器有以下两个方法：
setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
setTimeout() ：在指定的毫秒数后调用函数或计算表达式。

2. BOM

2.1 简介

 浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。
浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。

2.2 组成

 DOM对象也是BOM对象的一部分

2.3 window

 所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。

2.4 window document

属性	描述
offsetWidth	获取标签的宽度
offsetHeight	获取标签的高度
window.innerHeight	浏览器窗口的内部高度(包括滚动条)
window.innerWidth	浏览器窗口的内部宽度(包括滚动条)

2.5 window screen

 window.screen对象在编写时可以不使用 window 这个前缀。
一些属性：
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

2.6 window location

 window.location 对象在编写时可不使用 window 这个前缀。
一些实例:
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）
location.href 属性返回当前页面的 URL
location.assign() 方法加载新的文档

2.7 window history

 window.history对象在编写时可不使用 window 这个前缀。
一些方法：
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同

2.8 window navigator

 window.navigator 对象在编写时可不使用 window 这个前缀。
navigator.appCodeName 浏览器代号 navigator.appName 浏览器名称 navigator.appVersion 浏览器版本 avigator.cookieEnabled 启用Cookies navigator.platform 硬件平台 navigator.userAgent 用户代理
警告!!!来自 navigator 对象的信息具有误导性.

上一篇JS(一)

下一篇jQuery

本文作者：Ritchie里其

本文链接：https://www.cnblogs.com/wang-zeyu/p/16856342.html

posted @ 2022-11-04 00:09 Ritchie里其阅读(41) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

Ritchie

JS(二)

1. DOM

1.1 改变HTML

1.2 操作样式

1.3 绑定事件

1.3.1 直接在标签中绑定

1.3.2 使用函数绑定

1.3.2.1 方式一

1.3.2.2 方式二

1.3.3 使用js提供的方法绑定

1.4 创建/删除节点

1.5 定时函数

2. BOM

2.1 简介

2.2 组成

2.3 window

2.4 window document

2.5 window screen

2.6 window location

2.7 window history

2.8 window navigator

公告

常用链接

我的标签

合集

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

	<body>
	<p>改变第一个段落p的颜色</p>
	<p>第二个p段落</p>
	<button onclick="showInfo()">点击改变样式</button>
	<script>
	function showInfo(){
	// [0]表示第一个元素，eg.只改变第一个p的颜色
	document.getElementsByTagName("p")[0].style.color="red";
	}
	</script>
	</body>

	<body>
	<p>一个段落</p>
	<button onclick="document.getElementsByTagName('p')[0].style.color='red'">点击</button>
	</body>

	<body>
	<input type="button" name="" id="tv_btn" value="点击">
	<script>
	document.getElementById("tv_btn").onclick=function(){
	alert("弹一个框");
	}
	</script>
	</body>

	<body>
	<input type="button" name="" id="" value="点击" onclick="showInfo()">
	<script>
	function showInfo(){
	console.log("点击我!有惊喜");
	}
	</script>
	</body>

	<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
	<button id="myBtn">点我</button>
	<script>
	document.getElementById("myBtn").addEventListener("click", function(){
	alert("Hello World!");
	});
	</script>

	<body>
	<input type="button" name="" id="" onclick="addEle()" value="增加"/>
	<input type="button" name="" id="" onclick="deleEle()" value="删除第2个段落"/>
	<div id="tv_div">
	<p>第一个段落p</p>
	<p id="tv_p">第2个段落p</p>
	<p>第3个段落p</p>
	</div>
	<script>
	function addEle(){
	//创建节点
	var tv_node = document.createElement("p");
	//创建文本节点
	var tv_ele = document.createTextNode("新增的段落p");
	//添加上下级关系
	tv_node.appendChild(tv_ele);
	//根据id获取节点对象
	var tv_div = document.getElementById("tv_div");
	tv_div.appendChild(tv_node);
	}

	function deleEle() {
	//根据id获取节点对象
	var tv_p = document.getElementById("tv_p");
	//获取父节点
	var tv_div = document.getElementById("tv_div");
	//根据父节点删除子节点
	tv_div.removeChild(tv_p);
	}
	</script>

	js 定时器有以下两个方法：
	setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
	setTimeout() ：在指定的毫秒数后调用函数或计算表达式。

	浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。
	浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。

	所有浏览器都支持 window 对象。它表示浏览器窗口。
	所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
	全局变量是 window 对象的属性。
	全局函数是 window 对象的方法。

	window.screen对象在编写时可以不使用 window 这个前缀。
	一些属性：
	screen.availWidth - 可用的屏幕宽度
	screen.availHeight - 可用的屏幕高度

	window.location 对象在编写时可不使用 window 这个前缀。
	一些实例:
	location.hostname 返回 web 主机的域名
	location.pathname 返回当前页面的路径和文件名
	location.port 返回 web 主机的端口（80 或 443）
	location.protocol 返回所使用的 web 协议（http: 或 https:）
	location.href 属性返回当前页面的 URL
	location.assign() 方法加载新的文档

	window.history对象在编写时可不使用 window 这个前缀。
	一些方法：
	history.back() - 与在浏览器点击后退按钮相同
	history.forward() - 与在浏览器中点击向前按钮相同

	window.navigator 对象在编写时可不使用 window 这个前缀。
	navigator.appCodeName 浏览器代号 navigator.appName 浏览器名称 navigator.appVersion 浏览器版本 avigator.cookieEnabled 启用Cookies navigator.platform 硬件平台 navigator.userAgent 用户代理
	警告!!!来自 navigator 对象的信息具有误导性.