JavaScrip——原生JS（个人学习）

本文链接：https://blog.csdn.net/weixin_47295135/article/details/109747227

本文详细介绍了JavaScript中的原生事件绑定，包括html事件处理程序、DOM0级事件处理程序和DOM2级事件处理程序，并讨论了各自的优缺点。此外，还讲解了JS原生DOM操作，如查找、插入、克隆和设置/获取属性的方法，为日常的JavaScript开发提供了实用的参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生JS

文章目录

一、原生JS
总结

一、原生JS

1、JS原生事件如何绑定

JS原生绑定事件主要为三种：

一是html事件处理程序
二是DOM0级事件处理程序
三是DOM2级事件处理程序

* html事件处理程序

html事件现在早已不用了，就是在html各种标签上直接添加事件，类似于css的行内样式，缺点是不好维护，因为散落在标签中,也就是耦合度太高。
例如：

		<button onclick="事件处理函数">点点点</button>

* DOM0级事件处理程序

目前在PC端用的还是比较多的绑定事件方式，兼容性也好，主要是先获取dom元素，然后直接给dom元素添加事件

var btn=document.getElementById(‘id元素’)
   btn.onclick=function() {
     //要处理的事件逻辑
   }

DOM0事件如何移除呢？很简单：btn.οnclick=null;置为空就行
优点：兼容性好
缺点：只支持冒泡，不支持捕获

* DOM2级事件

移动端用的比较多，也有很多优点，提供了专门的绑定和移除方法

var btn=document.getElementById(‘id元素’)
    //绑定事件
   btn.addEventListener(‘click’,绑定的事件处理函数名,false)
   //移除事件
   btn.removeEventListener(‘click’,要移除的事件处理函数名，false)

优点：支持给个元素绑定多个相同事件，支持冒泡和捕获事件机制

2、JS原生常用dom操作方法

js原生dom操作方法有

* 查找

getElementByid => 根据指定的 id 属性值得到对象
getElementByTagName =>获取一个元素合集
querySelector => 返回文档中匹配指定 CSS 选择器的一个元素。
querySelectorAll => 返回所有的元素

* getElementByTagName =>获取一个元素合集

查找dom获取body标签有两种写法，第二种简单明了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .ztt-box {
            width: 100px;
            height: 100px;
            background: rgb(143, 211, 231);
        }
    </style>
</head>
<body>
    <div class="ztt-box"></div>
</body>
<script>
    window.onload = function () {
        // 获取body标签
        // var body = document.getElementsByTagName("body")[0]

        // 在document中有个属性body，它保存的是body的引用
        var body = document.body
        console.log(body)
    }
</script>
</html>

// document.documentElement保存的是html标签
        var html = document.documentElement
         console.log(html)

* querySelectorAll => 返回所有的元素

document.querySelector（）
需要一个选择器的字符串作为参数，可以根据一个元素节点对象
虽然IE8中没有getElementsByClassName（）但是可以使用querySelector
使用该方法总会返回唯一一个元素，如果满足条件的元素有多个，但只会返回第一个

// 需要一个选择器的字符串作为参数，可以根据一个元素节点对象
        var div = document.querySelector('.ztt-box  div')
        console.log(div.innerHTML)

* 插入

* appendChild => 给一个父节点插入子节点

* insertBefore => 在已有的子节点前插入一个新的子节点

相同之处：插入子节点
不同之处：实现原理方法不同。
　　　　　appendChild方法是在父级节点中的子节点的末尾添加新的节点（相对于父级节点来说）。
　　　　 insertBefore 方法是在已有的节点前添加新的节点（相对于子节点来说的）。

var div=document.createElement("div");//新建一个div元素节点

document.body.appendChild(div);//把div元素节点添加到body元素节点中成为其子节点，但是放在body的现有子节点的最后

使用appendChild()给一个父节点插入子节点，这种方法插入的位置都是在父节点元素最后一个子元素之后插入的。
但是，如果插入的子节点是DOM文档树里面已经存在的节点的话，这个节点会被移动到用appendChild()插入的位置，而不会被复制。

* 克隆

* cloneNode

cloneNode() 方法可创建指定的节点的精确拷贝。

cloneNode() 方法拷贝所有属性和值。

该方法将复制并返回调用它的节点的副本。
如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。
否则（也就是默认值，或者false），它只复制当前节点。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
 
<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk<p>牛奶</p></li></ul>
 
<p id="demo">单击按钮将项目从一个列表复制到另一个列表中</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var itm=document.getElementById("myList2").lastChild;
	var cln=itm.cloneNode(true);
	document.getElementById("myList1").appendChild(cln);
}
</script>
<p>尝试更改<em>deep</em>参数为假，只有一个空的li元素将被克隆</p>
	
</body>
</html>

*设置和获取属性

* setAttribute(“属性名”,”值”) => 增加一个指定名称和治的新属性，或者把一个现有属性设定为指定的值

* getAttibute(“属性名”)=> 只能通过元素节点对象调用的函数。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
  <p id="intro">我的课程</p>  
  <ul>  
    <li title="JS">JavaScript</li>  
    <li title="JQ">JQuery</li>  
    <li title="">HTML/CSS</li>  
    <li title="JAVA">JAVA</li>  
    <li title="">PHP</li>  
  </ul>  
  <h1>以下为li列表title的值,当title为空时，新设置值为"WEB前端技术":</h1>
<script type="text/javascript">
  var Lists=document.getElementsByTagName("li");
  for (var i=0; i<Lists.length;i++)
  {
    var text = Lists[i].getAttribute("title");
    document.write(text +"<br>");
    if(text=="")
    {
    Lists[i].setAttribute("title","WEB前端技术");
    document.write(Lists[i].getAttribute("title")+"<br>");
    }
  }
</script>
</body>
</html>