【JS】快速入门DOM
目录
节点树
DOM属性
DOM方法
操作节点属性
操作节点文本
操作节点样式
事件绑定
节点获取方法
批量添加事件
事件对象
获取鼠标位置
节点树
概述:节点即为标签。节点之间这种关系,我们称之为‘节点树’。因为很想一颗大树扎根。
DOM【document object model】:文档对象模型,你可以理解为是整个节点树最外层‘根元素’。
DOM其实就是JS语言中内置引用类型document对象,DOM对象经常用来操作节点(标签)
比如:操作节点样式、属性、文本等等。
DOM属性
<script type="text/javascript">//DOM:常用属性//documentElement:获取到节点树的html标签console.log(document.documentElement);//head:获取到节点树的head标签console.log(document.head);//title:获取到节点title标签的文本console.log(document.title);//body:获取到节点bodyconsole.log(document.body);</script>
DOM方法
- getElementById方法:可以通过标签ID选择器获取对应节点。
- 一般我们将script标签放在程序最底部。
- 不管节点(标签)在网页中嵌套关系如何复杂。都可以通过这个方法获取到。
- 注意:标签(节点)在JS当中属于引用类型数据。
<script type="text/javascript">//getElementById方法:可以获取到节点树上任意节点//【需要给标签添加id属性,通过id选择器获取】var element = document.getElementById("box");var eleCur = document.getElementById("cur");var eleLi = document.getElementById("me");console.log(element);console.log(eleCur);console.log(eleLi);console.log(typeof element);</script>
操作节点属性
<script type="text/javascript">
var div=document.getElementById("box");
div.id='box2';
console.log(div.id);
console.log(div.className);</script>
box2
cur
操作节点文本
表单元素:value
其他元素:innerHTML
<script type="text/javascript">
var div=document.getElementById("box");
var inp=document.getElementById("inp");
console.log(inp.value);
console.log(div.innerHTML);
inp.value="默认value";</script>
操作节点样式
- 行内样式
<div id="box" style="width: 60px;color: red;background-color: aquamarine;">coleak1</div>
- 内部样式
- 外部样式(link引入)
<script type="text/javascript">
var div=document.getElementById("box");
console.log(div.style['width']);
div.style['width']="900px";</script>
事件绑定
onclick||ondblclick
<script type="text/javascript">
var div=document.getElementById("box");
// div.onclick=function()
// {
// alert("我单击了");
// }
div.ondblclick=function()
{alert('我双击了');
}</script>
onmouseenter||onmouseleave
onmouseover||onmouseout
<script type="text/javascript">
var div=document.getElementById("box");
// div.onmouseenter=function()
// {
// alert("我进入了");
// }
div.onmouseleaves=function()
{alert('我离开了');
}</script>
- onfocus||onblur
<script type="text/javascript">
var input=document.getElementById("inp");
input.onfocus=function()
{input.style.color='green';
}
input.onblur=function()
{input.style.color='black';
}</script>
- onmousedown / onmouseup
<script type="text/javascript">
var box=document.getElementById("box");
box.onmousedown =function()
{box.style.color='green';
}
box.onmouseup=function()
{box.style.color='black';
}</script>
- onmousemove
<script type="text/javascript">
document.onmousedown=function()
{
document.body.style.background="red";}
document.onmousemove = function()
{var R=parseInt(Math.random()*255);var G=parseInt(Math.random()*255);var B=parseInt(Math.random()*255);document.body.style.background="rgb("+R+","+G+","+B+")";
}
document.onmouseup=function()
{
document.body.style.background="black";}</script>
节点获取方法
document.getElementById
document.getElementsByTagName
document.getElementsByClassName
document.getElementsByName
<script type="text/javascript">
var arr=document.getElementsByTagName('li');
for (var i=0;i<arr.length;i++)
{arr[i].style.color="red";
}</script>
批量添加事件
<script type="text/javascript">
var arr=document.getElementsByTagName('li');
for(var i=0;i<arr.length;i++)
{arr[i].onclick=function(){this.style.color="red";}
}</script>
事件对象
- 当事件处理函数执行的时候,系统会自动注入实参,我们用形参接受【事件对象】
- 在不同浏览器中事件对象是有兼容问题。使用短路语句进行兼容。
<script type="text/javascript">//获取节点var div = document.querySelector("div");div.onclick = function(event){ //对于高级浏览器:谷歌、IE8以上的浏览器---->event//对于低级浏览器:IE8以下的,事件对象作为BOM对象属性var e = event||window.event;console.log(e);}</script>
获取鼠标位置
- screenX||screenY
<script type="text/javascript">//获取节点var inn = document.querySelector('.inner');//鼠标在整个网页当中移动document.onmousemove = function(event){//短路语法进行兼容var e = event||window.event;inn.innerHTML = "screenX:"+ e.screenX + "screenY"+e.screenY;}
</script>
- pageX||pageY
<script type="text/javascript">//获取节点var inn = document.querySelector('.inner');//鼠标在整个网页当中移动document.onmousemove = function(event){//短路语法进行兼容var e = event||window.event;inn.innerHTML = "screenX:"+ e.screenX + "screenY"+e.screenY+"<br/>";inn.innerHTML += "pageX:"+e.pageX +"pageY:"+e.pageY;}
</script>
- clientX||clinetY
- offsetX||offsetY
<script type="text/javascript">//获取节点var inn = document.querySelector('.inner');//鼠标在整个网页当中移动document.onmousemove = function(event){//短路语法进行兼容var e = event||window.event;inn.innerHTML = "screenX:"+ e.screenX + "screenY"+e.screenY+"<br/>";inn.innerHTML += "pageX:"+e.pageX +"pageY:"+e.pageY+"<br/>";inn.innerHTML +="clientX"+e.clientX +"clinetY"+e.clientY+"<br/ >";inn.innerHTML +="offsetX"+e.offsetX +"offsetY"+e.offsetY;}
</script>
【JS】快速入门DOM相关推荐
- 54 Node.js快速入门
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.Node开发概述 1.1 为什么要学习服务器端开发基础 能够与后端程序员更加紧密的配合 ...
- (vue基础试炼_01)使用vue.js 快速入门hello world
文章目录 一.需求案例 二.案例实现 2.1. 原始js写法 2.2. 怎样使用vue.js ? 2.3. 使用vue.js 写法 三.案例vue简述? 四.案例趣味延伸 五.表达值作用及嘱咐语 一. ...
- TensorFlow.js快速入门
by Pau Pavón 通过保罗·帕文(PauPavón) TensorFlow.js快速入门 (A quick introduction to TensorFlow.js) TensorFlow ...
- Vue.js快速入门之八:实现登录功能
系统登录是指用户必须提供满足一定条件的信息后,才可以进入系统.最早系统一般是指用户名和密码,如今,登录方式已多元化,系统一般登录方式有:用户名+密码.二维码扫码登录.第三方授权登录.手机号+短信登录等 ...
- Three.js快速入门
ThreeJS快速入门 ThreeJS开发 学习准备 安装 基本使用 效果图 控制器 物体移动 效果图 物体缩放与旋转 Clock跟踪时间 Gsap动画 自适应 Gui 效果图 BufferGeome ...
- html+css+js+快速入门
html 1.a标签 <!--使用name作为标记--> <a name="top">顶部</a> <!--target:表示窗口在哪里打 ...
- Node.js快速入门
一.简介 1.什么是Node.js 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎, ...
- vue.js快速入门
以前看到多少天学习系列,我都深感烦躁,短短几天怎么可以精通,那是对于他们而言.但是,今天我要写一个快速入门,本人觉得还是有一点用处,因为,我不可能在一天之内精通某种东西,却可以在一两小时入门. 回到v ...
- doodoo.js快速入门教程
快速入门 我们通过3步演示如何快速创建一个doodoo项目 第一步 # 创建doodoo-demo目录 mkdir doodoo-demo && cd doodoo-demo# 初始化 ...
- doodoo.js快速入门教程 1
快速入门 我们通过3步演示如何快速创建一个doodoo项目 第一步 # 创建doodoo-demo目录 mkdir doodoo-demo && cd doodoo-demo# 初始化 ...
最新文章
- Ext 3.0 +ASP.NET2.0 可视化开发介绍
- 【ZOJ - 3778】Talented Chef(贪心)
- python ssh实现_SSH协议的Python实现paramiko
- JS 入门经典 第三章 判断、循环和函数
- 简历v岗位实时智能匹配算法
- [Pro]斐波那契数列阿【斐波那契数列】
- android虚拟机的使用教程,Android 虚拟机可以这么用了 ?
- eclipse 常用操作 持续更新
- 【韩顺平 零基础30天学会Java】(第一阶段)(自用)
- Ext2、Ext3、Ext4的区别
- PreferenceActivity之 Subclasses of PreferenceActivity must override isValidFragment(String)
- er2100虚拟服务器,华三er2100n路由器恢复出厂设置
- 一副好的平面设计作品,来自优秀的字体
- 家装建材行业解决方案
- python中合法的八进制数是_0o12f 是合法的八进制数字。 (2.0分)_学小易找答案
- java 维基百科_wikipedia
- 机器视觉(相机、镜头、光源)详细解析
- 1.docker基础用法
- 信号与系统自动控制理论实训QY-DPJ01
- 适合入门的一些现成的人工智能项目