【JS】快速入门DOM

最新推荐文章于 2024-05-24 13:39:19 发布

coleak

最新推荐文章于 2024-05-24 13:39:19 发布

阅读量374

点赞数 1

分类专栏： # JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_63701832/article/details/128699219

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

节点树

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

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:获取到节点body
    console.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>