DOM文档对象模型

DOM树

Dom节点操作

1.获取dom节点对象

原生js指的是不使用任何框架或者js库,只使用js原本提供的功能
1.使用原生js获取js节点对象
2.使用jq获取dom节点对象
3.原生jsdom节点对象和jq对象互相转换
4.jquery对象的一些方向
1.获取节点
原生js:
(1).document.querySeletor();//略
(2).document.querySeletorAll();//略
(3).document.getElementById();

<div id='box'></div>
<script>
var box=document.getElementById('box');
</script>

jQuery获取dom节点对象

<div id='box'></div>
<script>
var box=$('#box');
</script>

原生js dom节点对象和jQuery节点对象互转
//只有jQuery对象才可以使用jQuery提供的方法,所以有些时候需要将原生js dom 对象装换为jQuery dom对象
1.原生转jq:${原生dom节点对象}
2.jq转原生 jq对象[0]

<div class='box'>dom</div>
<script>
//dom节点对象
var box=document.querySelector(".box");
//jq对象
var $box=$('.box');
//dom对象转jq对象
$(box)---->$(box)
//jq对象转dom对象
$(box)[0]-->box
</script>

jquery对象相关方法
1.获取元素的兄弟节点（siblings()）

<div></div>
<p></p>
<script>
	var $div=$('p').siblings('div');//div
</script>

2.获取元素的父节点（parent）

<div class='box'>
<div class='item'></div>
</div>
<script>
	var $box=$('.item').parent('.box')//box
</script>

3.获取元素的在兄弟元素中的排列位置(index)

<ul>
	<li></li>
</ul>
<script>
	var $li=$('li').index();//0
</script>

4.查找元素中的后代某个节点 (用find)

<ul>
	<li class='item'><span></span></li>
</ul>
<script>
	var $span=$(ul).find('span');//span
</script>

2.获取和修改dom节点内容
//原生dom节点获取内容（略）//修改内容lue
//jQuery获取和修改内容
1.html()//获取的是元素的内容(包括标签)

<div class='box'>
	<div>我是子盒子</div>
</div>
<script>
	$('.box').html()//<div>我是子盒子</div>
</script>

2.text()//获取的是元素的内容（不包括标签）

<div class='box'>
	<div>我是子盒子</div>
</div>
<script>
	$('.box').html()//我是子盒子
</script>

3.val()//获取的是输入框中的值
3.获取和修改dom节点属性
4.获取和修改dim节点样式

获取和修改dom节点的属性
//原生获取属性

<div class="box">
      <div>我是子盒子</div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      var box=document.querySelector('.box');
      var index=box.getAttribute('class');//得到class属性值
      // box.setAttribute()//设置属性
    </script>

//jq获取属性值

<div class="box">
      <div>我是子盒子</div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      var $index=$('.box').attr('class');//得到class属性值
      //我们一般获取和修改属性值使用的是attr，但是当attr不好使的时候，用prop
    </script>
  

4.获取和修改元素的样式
//注意:在原生js中，元素.style样式名称操作行内样式,非行内样式需要使用window.getComputedStyle来操作//原生js修改节点样式(略)
(2).jq获取和修改节点样式

<div>1.xxxxxx</div>
<script>
	var $div=$('div').css('color');//获取的是div字体的颜色
</script>

DOM节点增删
原生jsDOM节点的增删

<ul>
      <li>1.xxxx</li>
      <li>2.xxxx</li>
    </ul>
    <script>
      var ul=document.querySelector('ul');
      var li=document.createElement('li');
      li.innerText='我是新的文本';
      ul.appendChild(li);//添加新的DOM元素

      var li1=document.querySelector("ul>li:nth-child(2)");
      li1.remove();//删除DOM元素
    </script>

用jq来进行DOM的增删

  <ul>
      <li>1.xxxx</li>
      <li>2.xxxx</li>
    </ul>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
     var $li=`<li>我是新的文本</li>`
     $('ul').append($li);//添加新的DOM元素
     $('li:nth-child(1)').remove();//删除DOM元素
    </script>

DOM事件分类

1.DOM 0级事件
行内事件.在标签中写事件
元素对象.on事件名=事件处理函数

<button onclick='alert(222)'>点击</button>

注意:jq事件绑定函数(属于二级事件)
其中jq事件提供了this指向，谁调用了这个函数，this指向谁

<button>点击我</button>
<script>
	button.click(function(){alert(2222);})
	button.on('click',function(){alert(2222);})
</script>

2.DOM 1级问题 DOM级别1于1998年10月1日成为 W3c推荐标准。
3.DOM 2及事件
监听方法:有两种方法来添加和移除处理程序
1.原生js方面：addEventListener()和removeEventListener().其中可传三个参数,第一个参数是你的事件名,第二个参数是你的事件函数,第三个参数是true或则false,如果为true表示在捕获阶段调用,false表示在冒泡阶段调用.
注意:0级事件只能添加1个事件处理函数
不能移除匿名添加的函数。

<div class='arr'>我是一个简单的div</div>
<script>
var arr=document.querySelector('.arr');
arr.addListener('click',function(){alert(222)})
arr.addListener('click',function(){alert('ewwq')})
</script>

4.Dom 3级事件

html5新事件api，拖拽,视频放播等
触碰事件touchstart、touchmove和touchend
自定义事件
拖拽例子
1.对需要拖拽的容器添加属性draggable-‘true’
2.对目标容器添加dragover事件,目的是阻止默认事件
3.对目标容器添加drop事件,执行元素的移动操作

<style>
      .box{
        width: 400px;
        height: 400px;
        border: 1px solid;
      }
      .item{
        width: 200px;
        height: 200px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <div class="item" draggable="true"></div>
    <script>
      var item=document.querySelector('.item');
      var box=document.querySelector('.box');
      box.addEventListener('dragover',function(even){
        even.preventDefault();
      })
      box.addEventListener('drop',function(){
        this.appendChild(item);
      })
    </script>