简单建网站,公司注册代理机构,个人网站制作模板图片,网站广告形式html的DOM操作 // JS 是为了让页面实现动态网页效果 // 动态和静态区分取决于JS的和页面标签的数据交互 // 动态网页#xff1a;有数据交互 // 静态网页#xff1a;无数据交互 // JS 和 元素的关联操作对象 DOM // 整个HT…html的DOM操作 // JS 是为了让页面实现动态网页效果 // 动态和静态区分取决于JS的和页面标签的数据交互 // 动态网页有数据交互 // 静态网页无数据交互 // JS 和 元素的关联操作对象 DOM // 整个HTML页面的整体代码叫做 DOM文档 // 每个标签阶段叫做DOM对象|DOM元素|DOM节点 // JS 查询、修改、删除、更新 DOM元素的方式实现页面数据交互效果 document.write(h1DOM元素添加操作/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元素内部 查找classtip的所有元素 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提示) } } } // 完整事件文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Element#%E4%BA%8B%E4%BB%B6 元素的内容控制
script // innerText 属性用于获取或覆盖标签内容 // 区别 // 取值去除换行首尾空格去除标签和标签属性只保留文本文本之间的空格只保留一个 // 赋值如果字符串符合标签格式覆盖时不会进行标签解析 // 会将\n转换为br标签 function editTextContent(){ var textDom document.querySelector(#text1) var oldText1 textDom.innerText; console.log(oldText1); // textDom.innerText h3 stylecolor:red;标签规则定义的字符串/h3; textDom.innerText aaaa\nbbbb\nccccc; } /script hr div idcontent html3的 原始内容 span stylecolor: red;标签/span /div input typebutton valuetextContent操作 οnclickeditContent() 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数据 !-- DOM dataset 数据 提供一种简单的自定义属性的赋值和取值操作 1. 在标签上以 data-自定义属性名 属性值 的方式记录数据 2. 通过DOM对象的 dataset 直接调用 自定义属性名即可 -- p data-chw张三 idp1dataset数据/p input typebutton value获取数据 οnclickgetDataSet1() 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
页面组成 !-- body 定义在 html 内部所以 body是html子节点html是body的父节点 -- !-- head body 兄弟节点 -- div classad div classcontent img src./img/831e0481607ea2a3.png alt srcset input typebutton value关闭 idcloseBtn /div /div script var closeBtn document.querySelector(#closeBtn); closeBtn.onclick function(){ console.log( this.parentNode ); console.log( this.parentNode.parentNode ); this.parentNode.parentNode.style.display none; } /script hr ul idabc li元素1/li li元素2/li li元素3/li li元素4/li li元素5/li /ul input typebutton value获取子节点 οnclickprintChildEle() script function printChildEle(){ var lis document.querySelectorAll(#abc li); var ulDom document.querySelector(#abc); console.log( ulDom.childNodes ); console.log( ulDom.children ); } /script 节点的创建和添加 input typebutton value创建DIV οnclickcreateDom() div idbox /div script // document.createElement(标签名称) 基于标签名称创建DOM节点 // 任意的DOM元素.appendChild(DOM对象) 向指定的元素内部添加子DOM节点追加 function createDom(){ var divDom1 document.createElement(div); console.log(divDom1); divDom1.innerHTML 内容: Math.random(); divDom1.classList.add(fs); divDom1.style.color red; console.log(divDom1); var boxDom document.querySelector(#box); // innerHTML需要字符串作为值但DOM是对象会被转换为 [object HTML标签名Element] // boxDom.innerHTML divDom1; boxDom.appendChild( divDom1 ) } /script hr div classsingBox pasdasdasdads/p !-- div classsing img srchttps://imgessl.kugou.com/custom/150/20201207/20201207134716994336.jpg alt srcset div classinfo p乡村之旅安静惬意·与自然同在/p p介绍/p p作者/p /div /div -- /div script src./js/singData.js/script script console.log(list); function initSingDom(){ var box document.querySelector(.singBox); box.innerHTML ; // 清空旧数据 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 节点的操作方法
input typebutton value添加元素 οnclickappendChildDom() input typebutton value插入元素 οnclickinsertChildDom() input typebutton value删除元素 οnclickremoveChildDom() div classbox idbox h5默认第一个元素/h5 h5 ida默认第二个元素/h5 /div script var boxDom document.querySelector(#box); 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 !-- https://element.eleme.cn/#/zh-CN/component/transfer 穿梭框 -- div classtr div classbox idbox1 p元素1/p p元素2/p p元素3/p /div div input typebutton value οnclickmoveChild() /div div classbox idbox2/div /div script var box1 document.querySelector(#box1); var box2 document.querySelector(#box2) function moveChild(){ // 元素的唯一性 box2.appendChild( box1.children[1] ) } /script 元素事件注册
input typebutton value按钮1 οnclickshowTip1() οnclickshowTip2() input typebutton value按钮2 idbtn2 input typebutton value按钮3 idbtn3 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
