【JS】快速入门DOM

简介: 【JS】快速入门DOM

节点树

概述:节点即为标签。节点之间这种关系,我们称之为‘节点树’。因为很想一颗大树扎根。

DOM【document object model】:文档对象模型,你可以理解为是整个节点树最外层‘根元素’。

DOM其实就是JS语言中内置引用类型document对象,DOM对象经常用来操作节点(标签)

比如:操作节点样式、属性、文本等等。

DOM属性

1. <script type="text/javascript">
2. //DOM:常用属性
3. //documentElement:获取到节点树的html标签
4. console.log(document.documentElement);
5. //head:获取到节点树的head标签
6. console.log(document.head);
7. //title:获取到节点title标签的文本
8. console.log(document.title);
9. //body:获取到节点body
10. console.log(document.body);
11.   </script>

DOM方法

  1. getElementById方法:可以通过标签ID选择器获取对应节点。
  2. 一般我们将script标签放在程序最底部。
  3. 不管节点(标签)在网页中嵌套关系如何复杂。都可以通过这个方法获取到。
  4. 注意:标签(节点)在JS当中属于引用类型数据。
1. <script type="text/javascript">
2. //getElementById方法:可以获取到节点树上任意节点
3. //【需要给标签添加id属性,通过id选择器获取】
4. var element = document.getElementById("box");
5. var eleCur = document.getElementById("cur");
6. var eleLi = document.getElementById("me");
7. console.log(element);
8. console.log(eleCur);
9. console.log(eleLi);
10. console.log(typeof element);
11.  </script>

操作节点属性

1. <script type="text/javascript">
2. var div=document.getElementById("box");
3. div.id='box2';
4. console.log(div.id);
5. console.log(div.className);
6.  </script>

box2

cur

操作节点文本

表单元素:value

其他元素:innerHTML

1. <script type="text/javascript">
2. var div=document.getElementById("box");
3. var inp=document.getElementById("inp");
4. console.log(inp.value);
5. console.log(div.innerHTML);
6. inp.value="默认value";
7.  </script>

操作节点样式

  • 行内样式
<div id="box" style="width: 60px;color: red;background-color: aquamarine;">coleak1</div>
  • 内部样式
  • 外部样式(link引入)
1. <script type="text/javascript">
2. var div=document.getElementById("box");
3. console.log(div.style['width']);
4. div.style['width']="900px";
5.  </script>

事件绑定

  • onclick||ondblclick
1. <script type="text/javascript">
2. var div=document.getElementById("box");
3. // div.onclick=function()
4. // {
5. //    alert("我单击了"); 
6. // }
7. div.ondblclick=function()
8. {
9. alert('我双击了');
10. }
11.  </script>
1. <script type="text/javascript">
2. var div=document.getElementById("box");
3. // div.onmouseenter=function()
4. // {
5. //    alert("我进入了"); 
6. // }
7. div.onmouseleaves=function()
8. {
9. alert('我离开了');
10. }
11.  </script>
  • onfocus||onblur
1. <script type="text/javascript">
2. var input=document.getElementById("inp");
3. input.onfocus=function()
4. {
5.     input.style.color='green';
6. }
7. input.onblur=function()
8. {
9.     input.style.color='black';
10. }
11.  </script>
  • onmousedown / onmouseup
1. <script type="text/javascript">
2. var box=document.getElementById("box");
3. box.onmousedown =function()
4. {
5.     box.style.color='green';
6. }
7. box.onmouseup=function()
8. {
9.     box.style.color='black';
10. }
11.  </script>
  • onmousemove
1. <script type="text/javascript">
2. document.onmousedown=function()
3. {
4. document.body.style.background="red";
5. 
6. }
7. document.onmousemove = function()
8. {
9. var R=parseInt(Math.random()*255);
10. var G=parseInt(Math.random()*255);
11. var B=parseInt(Math.random()*255);
12. document.body.style.background="rgb("+R+","+G+","+B+")";
13. }
14. document.onmouseup=function()
15. {
16. document.body.style.background="black";
17. 
18. }
19.  </script>

节点获取方法

  1. document.getElementById
  2. document.getElementsByTagName
  3. document.getElementsByClassName
  4. document.getElementsByName
1. <script type="text/javascript">
2. var arr=document.getElementsByTagName('li');
3. for (var i=0;i<arr.length;i++)
4. {
5.     arr[i].style.color="red";
6. }
7.  </script>

批量添加事件

1. <script type="text/javascript">
2. var arr=document.getElementsByTagName('li');
3. for(var i=0;i<arr.length;i++)
4. {
5.     arr[i].onclick=function()
6.     {
7. this.style.color="red";
8.     }
9. }
10.  </script>

事件对象

  1. 当事件处理函数执行的时候,系统会自动注入实参,我们用形参接受【事件对象】
  2. 在不同浏览器中事件对象是有兼容问题。使用短路语句进行兼容。
1. <script type="text/javascript">
2. //获取节点
3. var div = document.querySelector("div");
4.     div.onclick = function(event){  
5. //对于高级浏览器:谷歌、IE8以上的浏览器---->event
6. //对于低级浏览器:IE8以下的,事件对象作为BOM对象属性
7. var e = event||window.event;
8. console.log(e);
9.     }
10.   </script>

获取鼠标位置

  • screenX||screenY
1. <script type="text/javascript">
2. //获取节点
3. var inn = document.querySelector('.inner');
4. //鼠标在整个网页当中移动
5. document.onmousemove = function(event){
6.      //短路语法进行兼容
7.      var e = event||window.event;
8.          inn.innerHTML  = "screenX:"+ e.screenX + "screenY"+e.screenY;
9.    }
10. </script>
  • pageX||pageY
1. <script type="text/javascript">
2. //获取节点
3. var inn = document.querySelector('.inner');
4. //鼠标在整个网页当中移动
5. document.onmousemove = function(event){
6.      //短路语法进行兼容
7.      var e = event||window.event;
8.          inn.innerHTML  = "screenX:"+ e.screenX + "screenY"+e.screenY+"<br/>";
9.          inn.innerHTML  += "pageX:"+e.pageX +"pageY:"+e.pageY;
10.    }
11. </script>
  • clientX||clinetY
  • offsetX||offsetY
1. <script type="text/javascript">
2. //获取节点
3. var inn = document.querySelector('.inner');
4. //鼠标在整个网页当中移动
5. document.onmousemove = function(event){
6.      //短路语法进行兼容
7.      var e = event||window.event;
8.          inn.innerHTML  = "screenX:"+ e.screenX + "screenY"+e.screenY+"<br/>";
9.          inn.innerHTML  += "pageX:"+e.pageX +"pageY:"+e.pageY+"<br/>";
10.         inn.innerHTML +="clientX"+e.clientX +"clinetY"+e.clientY+"<br/ >";
11.         inn.innerHTML +="offsetX"+e.offsetX +"offsetY"+e.offsetY;
12.    }
13. </script>


目录
相关文章
|
3天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
3天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
10 2
|
3天前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
14 0
|
3天前
|
JavaScript 前端开发 容器
js操作dom元素
js操作dom元素
16 0
|
3天前
|
前端开发 JavaScript 数据安全/隐私保护
前端javascript的DOM对象操作技巧,全场景解析(二)
前端javascript的DOM对象操作技巧,全场景解析(二)
|
3天前
|
移动开发 缓存 JavaScript
前端javascript的DOM对象操作技巧,全场景解析(一)
前端javascript的DOM对象操作技巧,全场景解析(一)
|
3天前
|
JavaScript 前端开发
JavaScript DOM 文档对象模型(获取、改变html元素)
JavaScript DOM 文档对象模型(获取、改变html元素)
|
3天前
|
JavaScript
js_操作dom(委托和冒泡事件)
js_操作dom(委托和冒泡事件)
16 0
|
3天前
|
移动开发 JavaScript 前端开发
webgl学习笔记3_javascript的HTML DOM
webgl学习笔记3_javascript的HTML DOM
19 0
webgl学习笔记3_javascript的HTML DOM
|
3天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。