document.querySelector(cssSelector);document.querySelectorAll(cssSelector);例子：

letfirstParagraph=document.querySelector("p.text");//匹配class为"text"的第一个

letallParagraphs=document.querySelectorAll("p");//匹配所有

元素allParagraphs.forEach(p=>console.log(p.textContent));//遍历所有

元素2.5parentNode和childNodes例子：

letheader=document.getElementById("header");console.log(header.parentNode);//输出元素console.log(document.body.childNodes);//输出body下的所有子节点三、修改DOM元素JavaScript允许对DOM中的元素进行动态修改，例如更改内容、样式、属性等。

例子：

letheader=document.getElementById("header");header.textContent="NewTitle";//修改文本内容header.innerHTML="UpdatedTitle";//插入HTML内容3.2修改元素属性例子：

letheader=document.getElementById("header");//修改内联样式header.style.color="blue";header.style.fontSize="24px";//操作classheader.classList.add("highlight");header.classList.remove("text-large");header.classList.toggle("active");//切换class，若存在则移除，若不存在则添加3.4创建与删除元素例子：

//创建新的

元素letnewParagraph=document.createElement("p");newParagraph.textContent="Thisisanewparagraph.";//将新元素添加到document.body.appendChild(newParagraph);//移除元素document.body.removeChild(newParagraph);四、操作节点关系通过JavaScript可以访问DOM树中的节点关系，例如父节点、子节点和兄弟节点。

letparent=document.getElementById("parent");letfirstChild=parent.firstChild;//获取第一个子节点（可能是文本节点）letfirstElementChild=parent.firstElementChild;//获取第一个子元素4.2兄弟节点例子：

letcurrent=document.querySelector("p");letnextElement=current.nextElementSibling;//获取下一个兄弟元素letpreviousElement=current.previousElementSibling;//获取上一个兄弟元素4.3克隆节点例子：

letoriginal=document.getElementById("header");letclone=original.cloneNode(true);//深度克隆header及其子节点document.body.appendChild(clone);//将克隆的节点添加到body五、DOM事件处理DOM事件处理允许我们响应用户在网页上的交互。前文已经提到的事件机制，如addEventListener()，在实际开发中极其重要。

letbutton=document.getElementById("myButton");functionhandleClick(){console.log("Buttonclicked");}//添加事件监听button.addEventListener("click",handleClick);//移除事件监听button.removeEventListener("click",handleClick);5.2事件类型常见的DOM事件类型：

//捕获键盘按下的事件document.addEventListener("keydown",function(event){console.log("Keypressed:",event.key);//输出按下的键});//捕获窗口大小调整事件window.addEventListener("resize",function(){console.log("Windowresizedto:",window.innerWidth,"x",window.innerHeight);});5.3事件委托事件委托是一种优化事件处理的技术。通过将事件绑定到祖先元素而不是每个子元素上，利用事件冒泡机制，可以减少事件处理程序的数量。

letparent=document.getElementById("parent");parent.addEventListener("click",function(event){if(event.target.tagName==="BUTTON"){console.log("Buttonclicked:",event.target.textContent);}});在这个例子中，即使父元素parent内有多个按钮，事件只会被委托到父元素上，而不是为每个按钮分别添加事件监听器。这样提高了性能，尤其是在动态添加子元素的情况下。

在事件处理过程中，某些事件会触发默认行为，例如点击链接会跳转页面，提交表单会刷新页面。可以通过event.preventDefault()来阻止这些默认行为。类似地，event.stopPropagation()可以阻止事件的冒泡，防止事件传播到父元素。

letlink=document.querySelector("a");link.addEventListener("click",function(event){event.preventDefault();//阻止链接的跳转行为console.log("Linkclickedbutdefaultactionprevented");});letbutton=document.getElementById("myButton");button.addEventListener("click",function(event){event.stopPropagation();//阻止事件冒泡console.log("Buttonclickedwithouteventbubbling");});六、文档与窗口对象的操作除了直接操作DOM元素外，JavaScript还提供了对整个文档(document)和窗口(window)对象的操作。这些对象是浏览器提供的全局对象，用于控制和操作整个页面和浏览器窗口。

document是整个网页的入口，它代表整个HTML文档。你可以通过document对象访问和操作DOM树。

console.log(document.title);//输出页面标题document.title="NewPageTitle";//修改页面标题console.log(document.URL);//输出当前页面URL6.2window对象window对象代表整个浏览器窗口，提供了大量与浏览器和页面交互的API。

//延时执行代码lettimeoutId=setTimeout(function(){console.log("Thiswillrunafter2seconds");},2000);//每隔1秒重复执行代码letintervalId=setInterval(function(){console.log("Thiswillrunevery1second");},1000);//停止定时器clearTimeout(timeoutId);clearInterval(intervalId);七、表单操作JavaScript对HTML表单有强大的操作能力，包括读取和设置表单字段的值、验证用户输入以及响应表单的提交。

可以通过value属性读取和设置表单元素的值，例如输入框、选择框、单选按钮等。

letinput=document.getElementById("nameInput");//获取输入框的值console.log(input.value);//设置输入框的值input.value="JohnDoe";7.2表单提交与验证通过监听表单的submit事件，可以对表单提交进行验证或控制，常用于阻止无效表单的提交。

letform=document.getElementById("myForm");form.addEventListener("submit",function(event){letinput=document.getElementById("nameInput");if(input.value===""){event.preventDefault();//阻止表单提交alert("Namecannotbeempty!");}});7.3表单字段验证APIHTML5提供了一些内建的表单验证属性（如required、pattern），同时可以通过JavaScript使用checkValidity()方法进行验证。

letform=document.getElementById("myForm");letemailInput=document.getElementById("email");form.addEventListener("submit",function(event){if(!emailInput.checkValidity()){event.preventDefault();alert("Invalidemailformat!");}});八、JavaScript中的异步编程在浏览器环境中，很多操作是异步的，例如网络请求、定时器、文件读取等。为了防止阻塞主线程（影响用户体验），JavaScript提供了多种方式处理异步任务。

回调函数是最基本的异步编程方法。它是指把函数作为参数传递给另一个函数，并在某些操作完成后调用这个函数。

functionfetchData(callback){setTimeout(()=>{callback("Datareceived");},1000);}fetchData(function(result){console.log(result);//输出"Datareceived"（1秒后）});在这段代码中，setTimeout模拟一个耗时1秒的异步操作，完成后调用传入的回调函数。

Promise是ES6引入的一种异步操作解决方案，提供了更加优雅的异步编程方式。Promise对象代表一个未来的值，可能是异步操作成功的结果，也可能是失败的原因。

基本语法：

letpromise=newPromise((resolve,reject)=>{//异步操作letsuccess=true;if(success){resolve("Success");}else{reject("Error");}});//处理Promise结果promise.then(result=>{console.log(result);//成功时输出"Success"}).catch(error=>{console.error(error);//失败时输出"Error"});2.3async/awaitasync/await是基于Promise的语法糖，提供了更加简洁的方式来编写异步代码。通过await，你可以暂停函数的执行，直到Promise完成，并获得其返回的结果。

asyncfunctionfetchData(){try{letresult=awaitnewPromise((resolve)=>{setTimeout(()=>resolve("Datareceived"),1000);});console.log(result);//输出"Datareceived"}catch(error){console.error("Error:",error);}}fetchData();在这段代码中，await使得代码看起来像同步代码，但它实际上是在等待异步操作完成后继续执行。