【JavascriptDay13、14、15、16】

人工智能
2025-09-08 10:27:01

html的DOM操作

// JS 是为了让页面实现动态网页效果 // 动态和静态区分取决于JS的和页面标签的数据交互 // 动态网页：有数据交互 // 静态网页：无数据交互

// JS 和元素的关联操作对象 DOM // 整个HTML页面的整体代码叫做 DOM文档 // 每个标签阶段叫做DOM对象|DOM元素|DOM节点

// JS 查询、修改、删除、更新 DOM元素的方式实现页面数据交互效果 document.write("<h1>DOM元素添加操作</h1>") // document ： DOM文档 => 整个页面代码 console.log(document); // 元素查询，必须先保证元素存在 => dom查询必须晚于DOM的渲染 console.log( window.onload ); window.onload = function(){ console.log("HTML页面渲染完成"); // 1. 基于标签ID查询元素 => 从上向下查询第一个符合规则的DOM元素 var h1Dom = document.getElementById("a"); console.log(h1Dom); // DOM对象.innerHTML 通过js = 赋值运算符，完成标签内容的填充 h1Dom.innerHTML = new Date().toLocaleString(); }

html的DOM查询方法

window.onload = function(){ // 1. 基于标签ID查询元素 => 从上向下查询第一个符合规则的DOM元素 var h1Dom = document.getElementById("a"); // 2. 基于标签名称查询元素集合 // => 返回的是一个类似数组结构但不能使用数组方法的类数组数据 var liList = document.getElementsByTagName("li"); console.log(liList);

// 3. 基于class样式查询元素集合 var tipList = document.getElementsByClassName("tip"); console.log( tipList ); // 基于el查询元素 // el|selecter:element select css选择器 // 4. document.querySelector => 从上而下查询第一个符合选择器规则元素，返回一个元素 // 5. document.querySelectorAll => 查询所有符合规则的元素，返回一个集合 var aDom = document.querySelector("#a"); console.log(aDom); var tipDom = document.querySelector(".tip"); console.log(tipDom); var tipDoms = document.querySelectorAll(".tip"); console.log(tipDoms); var ulTipDoms = document.querySelectorAll("ul .tip"); console.log(ulTipDoms); var ulDom = document.querySelector("#b"); console.log(ulDom); // 从ulDom元素内部查找class=tip的所有元素 var ulTipDoms2 = ulDom.querySelectorAll(".tip") console.log(ulTipDoms2); console.log( document ); // 文档类型标识，html-DOM对象 // 6. 快速获取HTML console.log( document.documentElement ); // html-DOM对象 // 7. 快速获取body console.log( document.body ); // body-DOM对象 // 8. 快速获取head console.log( document.head ); // head-DOM对象 }

元素事件

function showTip(){ alert("111") }

window.onload = function(){ // 步骤1:获取DOM对象 var btnDom1 = document.querySelector("#btn1"); // 步骤2:通过对象属性 onclick 取值方法完成事件绑定 btnDom1.onclick = function(){ alert("2222") } // console.log(btnDom1); console.dir(btnDom1); // 输出对象格式

var liDoms = document.querySelectorAll("li"); for (var i = 0; i < liDoms.length; i++) { // console.log( liDoms[i] ); liDoms[i].onclick = function(){ alert("li提示") } } }

// 完整事件文档: developer.mozilla.org/zh-CN/docs/Web/API/Element#%E4%BA%8B%E4%BB%B6

元素的内容控制

<hr> <div id="content"> html3的原始内容 <span style="color: red;">标签</span> </div> <input type="button" value="textContent操作" οnclick="editContent()"> <script> // textContent 属性用于获取或覆盖标签内容 // 特性等同于 innerText 的 // 和innerText区别 // 取值：不会删除换行，和空格 // 赋值：不会将\n转换为<br> function editContent(){ var contentDom = document.querySelector("#content"); console.log( contentDom.textContent ); contentDom.textContent = 'aaaa\nbbbb\nccccc'; } </script>

元素的属性操作

// 标签的自定义属性，被存放在 DOM对象的 attributes 属性对象上 // attributes 存储的自定义属性以属性名作为对象key,value取值是一个对象提供value记录属性值

// attributes 属性在DOM对象上存在两个专用方法 // DOM对象.getAttribute("自定义属性名") => 获取自定义属性对应的值 // DOM对象.setAttribute("自定义属性名","属性值")

function getDomAttr(){ var pDom = document.querySelector("#pDom"); console.dir(pDom) // console.log( pDom.username ); // console.log( pDom.attributes.username.value ); var v = pDom.getAttribute("username"); console.log(v); } function setDomAttr(){ var pDom = document.querySelector("#pDom"); console.log(1111); // pDom.username = "李四"; // pDom.attributes.username.value = "李四" pDom.setAttribute("username","李四") }

元素样式操作

function setStyle(){ var pDom = document.querySelector("#pDom");

// JS获取的DOM对象，存在一个行内样式的记录属性 style // dom对象.style.样式名 => 取样式 // dom对象.style.样式名="样式有效值" => 设置样式 console.log(pDom.style); console.log( pDom.style.color ); // pDom.style.color = "blue"; // pDom.style.color = "rgb(0,255,0)"; // pDom.style.color = "rgba()"; // pDom.style.color = "#00FF00"; pDom.style.color = "#FF000099";

console.log( pDom.style.border ); // pDom.style.border = "2px solid red"; // pDom.style.border-color = "red"; // 报错 // pDom.style.borderColor = "red"; // 正确 pDom.style["border-color"] = "red"; // 正确

// 修改后的样式依然需要遵受样式优先级 }

// class 是所有代码系统的关键字 => 类 // class 在JS中是关键字

function editDomClass(){ var pDom = document.querySelector("#pDom"); // 因为class是关键字，所有元素的类样式，没有使用class作为属性名 console.log( pDom.class ); // 标签的类样式，使用 className 作为DOM属性名 console.log( pDom.className ); // 取值 // className 赋值是和标签定义class属性的规则一致 // 类样式名只有在样式代码中定义，才会存在样式 // 多个类样式直接以空格隔开 // pDom.className = "border"; // 完全覆盖

// 方法1 ：以字符分割数组操作 // var str = pDom.className; // var arr = str.split(" "); // console.log(arr); // arr.push("border"); // pDom.className = arr.join(" ");

// 方式2 ：字符串操作 // pDom.className = pDom.className + " border";

// 方法3 : h5辅助属性 classList console.log( pDom.classist );

// pDom.classList.add("border"); // 添加新样式 // pDom.classList.remove("fc"); // 删除已有样式 pDom.classList.toggle("fc"); // 样式切换，当操作的样式存在则删除，不存在则添加 }

标签的dataset数据

<p data-chw="张三" id="p1">dataset数据</p> <input type="button" value="获取数据" οnclick="getDataSet1()"> <script> function getDataSet1(){ var pDom1 = document.querySelector("#p1"); console.log( pDom1.attributes['data-chw'].value ); console.log( pDom1.getAttribute("data-chw") );

console.dir( pDom1 ); console.log( pDom1.dataset );

console.log( pDom1.dataset.chw );

}

</script>

页面组成

</script>

<hr> <ul id="abc"> <li>元素1</li> <li>元素2</li> <li>元素3</li> <li>元素4</li> <li>元素5</li> </ul> <input type="button" value="获取子节点" οnclick="printChildEle()"> <script> function printChildEle(){ var lis = document.querySelectorAll("#abc li"); var ulDom = document.querySelector("#abc"); console.log( ulDom.childNodes ); console.log( ulDom.children ); } </script>

节点的创建和添加

var boxDom = document.querySelector("#box"); // innerHTML需要字符串作为值，但DOM是对象，会被转换为 [object HTML标签名Element] // boxDom.innerHTML = divDom1; boxDom.appendChild( divDom1 ) } </script>

<hr>

<div class="singBox"> <p>asdasdasdads</p>  </div>

for (var i = 0; i < list.length; i++) { // console.log(list[i]); var imgDom = document.createElement("img"); imgDom.src = list[i].pic; // console.log(imgDom); var titleP = document.createElement("p"); titleP.innerHTML = list[i].title; // console.log(titleP); var infoP = document.createElement("p"); infoP.innerHTML = list[i].info; // console.log(infoP); var peP = document.createElement("p"); peP.innerHTML = list[i].pe; // console.log(peP); var divInfoBox = document.createElement("div"); divInfoBox.classList.add("info"); divInfoBox.appendChild(titleP); divInfoBox.appendChild(infoP); divInfoBox.appendChild(peP); // console.log(divInfoBox); var singBox = document.createElement("div"); singBox.classList.add("sing"); singBox.appendChild(imgDom); singBox.appendChild(divInfoBox); // console.log(singBox); box.appendChild(singBox); } } initSingDom() </script>

节点的操作方法

<div class="box" id="box"> <h5>默认第一个元素</h5> <h5 id="a">默认第二个元素</h5> </div>

function appendChildDom(){ // 元素创建 var h5Dom = document.createElement("h5"); h5Dom.innerHTML = "appendChild标签内容"; // 在父元素的末尾追加新元素 boxDom.appendChild(h5Dom); }

function insertChildDom(){ var h5Dom = document.createElement("h5"); h5Dom.innerHTML = "insertBefore标签内容" + Math.random() ; // 元素DOM.insertBefore() 在父元素内部，指定已存在的子元素前面进行新元素的插入 // boxDom.insertBefore(h5Dom, boxDom.children[1] ) boxDom.insertBefore(h5Dom, boxDom.children[0] ); }

function removeChildDom(){ // boxDom.removeChild( boxDom.children[1] ) var h5Dom = document.querySelector("#a"); boxDom.removeChild( h5Dom ) } </script> <hr>  <div class="tr"> <div class="box" id="box1"> <p>元素1</p> <p>元素2</p> <p>元素3</p> </div> <div> <input type="button" value=">" οnclick="moveChild()"> </div> <div class="box" id="box2"></div> </div> <script> var box1 = document.querySelector("#box1"); var box2 = document.querySelector("#box2")

function moveChild(){ // 元素的唯一性 box2.appendChild( box1.children[1] ) } </script>

元素事件注册

<input type="button" value="按钮1" οnclick="showTip1()" οnclick="showTip2()"> <input type="button" value="按钮2" id="btn2"> <input type="button" value="按钮3" id="btn3"> <script> // 传统事件注册 => DOM对象的事件属性的赋值操作 // + 同类型事件只能注册一次，HTML标签的后续注册不生效，JS的后续的注册属于覆盖操作 function showTip1(){ alert(1) } function showTip2(){ alert(11) }

var btn2 = document.querySelector("#btn2"); // console.dir(btn2) btn2.onclick = function(){ alert(2) } btn2.onclick = function(){ alert(22) }

// 事件监听 => 独立于DOM属性之外的事件控制 // 事件监听的注册不是DOM对象的事件属性赋值 // 事件监听在同事件类型上，可以完成多方法的绑定 => 方法按照绑定先后触发 var btn3 = document.querySelector("#btn3"); // dom对象.addEventListener("事件名",执行方法) // 事件名是不包含on btn3.addEventListener( "click", function(){ alert(3) } ); btn3.addEventListener( "click", function(){ alert(33) } ); btn3.addEventListener( "click", function(){ alert(333) } );

// 浏览器在元素选项卡中，提供两个页面事件监听属性 // 事件监听：包含当前元素的所有事件 // 属性：包含当前元素的所有属性 // console.log(btn3);

</script>

标签：

【JavascriptDay13、14、15、16】由讯客互联人工智能栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“【JavascriptDay13、14、15、16】”

上一篇
基因组数据分析中涉及基因结构的问题

下一篇
【练习】【双指针】力扣热题100283.移动零