JS基本语法7：DOM元素的增删改 \指定位置的插入\ 仿写留言板案例\dataset对象
1. DOM元素的增删改 2. DOM元素内容的增删改查 3.指定位置的插入 4. 仿写留言板案例 5. dataset对象
1. DOM元素的增删改1.createElement:新增元素2.append:尾部追加元素3.createDocumentFragment:增加片断4.after:后面插入元素5.before：前同插入元素6.cloneNode(true):克隆元素(深度克隆)7.replaceChild(new,old):替换子元素8.remove:删除元素,自杀, removeChild:被(项目搭建网点我wcqh.cn父元素)删除<script>/** * 1.createElement:新增元素 * 2.append:尾部追加元素 * 3.createDocumentFragment:增加片断 * 4.after:后面插入元素 * 5.before：前同插入元素 * 6.cloneNode(true):克隆元素(深度克隆) * 7.replaceChild(new,old):替换子元素 * 8.remove:删除元素,自杀, removeChild:被(父元素)删除 *///1.createElement()//参数:预定义的html标签字符串//新增元素,第1步创建新元素,保存在变量中const ul = document.c项目搭建网点我wcqh.cnreateElement(“ul”)//2.append():追加到页面中//参数：添加的对象或内容// document.querySelector(“body”).append(ul) document.body.append(ul)//添加多个元素//let li = document.createElement(“li”)//为新的元素添加文本内容// li.append(“item”)//ul.append(li)/* for (let i = 1; i <= 5; i++) { let li = document.createElement(“li”)li.append(“item” 项目搭建网点我wcqh.cn+ i) ul.append(li) } *///3.createDocumentFragment()//无参数//在页面中避免因新加元素频繁,影响页面加载的效率,先将新加的元素存入一个片断中//最后一次性添加到页面中 let frag = document.createDocumentFragment()for(let i =1; i <=5; i++){ let li = document.createElement(“li”) li.append(“item”+ i) frag.append(li)} ul.append(frag)//4.after():后面插入元素//在插入的位置上调用after()方法//参数：插项目搭建网点我wcqh.cn入的元素及内容//先找到插入元素的位置 let three = ul.querySelector(“:nth-child(3)”) console.log(three)//创建要插入的元素 let li = document.createElement(“li”) li.append(“new-item-after”)//插入 three.after(li)//5.before():前面插入元素//在插入的位置上调用before()方法//参数：插入的元素及内容//先找到插入元素的位置 three = ul.querySelector(“:nth-child(3)”) li = document.createElement项目搭建网点我wcqh.cn(“li”) li.append(“new-item-before”) three.before(li)//6.cloneNode(true):克隆/复制元素//先找到需要克隆的元素//然后再追加或插入到指定的位置中 let last = ul.lastElementChild let copy = last.cloneNode(true)//参数:true,代表深度克隆,会把子元素及其内容一起复制//不加参数true,只复制元素,不复制元素中的内容 ul.append(copy) three.before(copy)//7.replace(new,old)：替换子元素//父元素调此方法替换子元素//参数:new项目搭建网点我wcqh.cn元素,old元素 let four = ul.querySelector(“:nth-child(4)”) console.log(four) li = document.createElement(“li”) li.append(“replace-li”) ul.replaceChild(li, four)//8.removeChild:父元素删除子元素 remove：自己把自己删除,自杀 ul.removeChild(ul.querySelector(“:nth-child(2)”)) ul.querySelector(“:first-child”).remove()</script>
2 DOM元素的内容增删改
1项目搭建网点我wcqh.cn.textContent:查看元素内容,是全部内容,包括js,css,隐藏内容
2.innerText:查看已渲染的(可见)内容
3.innerHTML:查看/替换/删除子元素内容(html),原样显示出来了
4.outerHTML:查看/替换/删除元素‘自身’(html)及所有的子元素 <body><h3>HELLO WORLD</h3><divclass=“box”><style> h2 { color: red;}</style><h2>通知</h2><spanstyle=“display: none“>试用期员工不参加</span><p>今天下午17:00开会, 开发部, 运营部全体参加~~</p></项目搭建网点我wcqh.cndiv></body><script>/** * 1.textContent:查看元素内容,是全部内容,包括js,css,隐藏内容 * 2.innerText:查看已渲染的(可见)内容 * 3.innerHTML:查看/替换元素内容(html),原样显示出来了 * 4.outerHTML:替换元素‘自身’(html) */ console.log(document.querySelector(“h3”).textContent) console.log(document.querySelector(“.box”).textContent) console.log(document.querySelector(项目搭建网点我wcqh.cn“.box”).innerText) console.log(document.querySelector(“.box”).innerHTML) document.querySelector(“.box”).innerHTML =“<h2>查看/替换元素内容</h2>”//.outerHTML = null === .remove()// document.querySelector(“.box”).outerHTML = null document.querySelector(“.box”).remove()</script>
3 指定位置插入元素
(1)插入位置1.`beforebegin`:元素自身项目搭建网点我wcqh.cn的前面（起始标签）2.`afterbegin`:插入元素内部的第一个子节点之前3.`beforeend`:插入元素内部的最后一个子节点之后4.`afterend`:元素自身的后面（结束标签）(2) API 方法1.`insertAdjacentElement()`:指定位置插入元素2.`insertAdjacentText()`:指定位置插入文本节点3.`insertAdjacentHTML()`:指定位置插入元素节点(DOMString)<body><ulclass=“list”><li>item1</li><li>item2</li><li>item3</li><li>item4</li><l项目搭建网点我wcqh.cni>item5</li></ul><script>//1.insertAdjacentElement():指定位置插入元素//有两个参数：1 插入元素的位置 2 插入的元素标签//插入元素的位置const ul = document.querySelector(“.list”)//插入元素的内容const h3 = document.createElement(“h3”) h3.append(“商品列表”)//在ul起始标签的前面插入h3// ul.insertAdjacentElement(“beforebegin”, h3)//在元素内容的第一个子节点之前 插入h3// ul.insertAdjacen项目搭建网点我wcqh.cntElement(“afterbegin”, h3)//在元素内容的最后一个子节点之后插入h3// ul.insertAdjacentElement(“beforeend”, h3)//在元素ul结束标签的后面插入h3//ul.insertAdjacentElement(“afterend”, h3)//2.insertAdjacentText()//有两个参数：1 插入元素的位置 2 插入的文本内容//在ul起始标签的前面插入文本// ul.insertAdjacentText(“beforebegin”, “(特价商品)”)//在ul元素内容的第一个子节点之前 插入文本内容//ul.ins项目搭建网点我wcqh.cnertAdjacentText(“afterbegin”, “(特价商品)”)//在ul元素内容的最后一个子节点后面 插入文本内容//ul.insertAdjacentText(“beforeend”, “(特价商品)”)//在ul结束标签的后面插入文本//ul.insertAdjacentText(“afterend”, “(特价商品)”)// 3.insertAdjacentHTML():指定位置插入元素节点(DOMString)//在指定的位置插入html元素//可以将html字符串,直接解析成html元素 let p =`<p style=“color:red”>商品数量：5件</p>`u项目搭建网点我wcqh.cnl.insertAdjacentHTML(“beforebegin”, p) ul.insertAdjacentHTML(“afterbegin”, p)/**指定位置插入 * (1)指定位置 * 1.beforebegin：元素自身起始标签的前面 * 2.afterbegin：插入元素内部的第一个子节点之前 * 3.beforeend：插入元素内部的最后一个子节点之后 * 4.afterend：元素自身结束标签的后面 * (2)插入API方法 * 1.insertAdjacentElement():指定位置插入元素 * 2.insertAdjacentText():指定位置插入文本节点* 3.insertAdja项目搭建网点我wcqh.cncentHTML():指定位置插入元素节点(DOMString) */</script></body>4.读取自定义属性的方法
预定义属性: id,class,style, title…自定义属性: data-前缀注: data-不要写,蛇形->驼峰 <body><!– 1.预定义属性：id,style,class,name… 2.自定义属性：data- 前缀的属性 有两个方法获取 1.通过dataset 2.通过getAttribute() –><h3style=“color: red“>Hello world</h3><divdata-email=“abc@qq.com”data-my-name=项目搭建网点我wcqh.cn“朱老师”>我的邮件地址</div><script>const h3 = document.querySelector(“h3”) console.log(h3.style.color)const div = document.querySelector(“div”)//无法使用以下方法获取自定义属性// console.log(div.data – email)//1.通过dataset对象方法获取//省去前缀data- ,dataset.email//my-name:转为小驼峰,myName dataset.myName console.log(div.dataset.email) console.log(项目搭建网点我wcqh.cndiv.dataset.myName)//2.使用getAttribute(data-email) getAttribute(data-my-name) console.log(div.getAttribute(“data-email”)) console.log(div.getAttribute(“data-my-name”))</script></body>5.getComptedStyle()
计算样式: 元素上的全样样式,包括行内,文档,外部等只读
<head><metacharset=“UTF-8”/><metaname=“viewport”content=“width=device-wid项目搭建网点我wcqh.cnth, initial-scale=1.0″/><title>getComputedStyle</title><linkrel=“stylesheet”href=“style.css”/><style> h3 { width:200px; height:50px;}</style></head><body><h3style=“color: red“>Hello World</h3><script>const h3 = document.querySelector(“h3”) console.log(h3.style.color)//querySelector 无法获取对除行内样式以外的样式信息 console.l项目搭建网点我wcqh.cnog(h3.style.width) console.log(window.getComputedStyle(h3).backgroundColor)//rgb(255, 255, 0) console.log(window.getComputedStyle(h3).width)//200px let width = window.getComputedStyle(h3).width//返回的是字符串//通过 parseInt()转成数值型 width = parseInt(width)+100+“px” console.log(width)//通过行内样式改变width的值 h3.style.width =par项目搭建网点我wcqh.cnseInt(width)+100+“px”/** * getComputedStyle对象 * 计算样式：元素上的全部样式,包括行内,文档,外部样式 * 返回值：只读, * 想修改样式在行内样式里修改 */</script></body>
批改状态：未批改
老师批语：
© 版权声明
1.如需技术支持联系QQ：1339833655
2. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
3. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
4. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
5. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
6. 如有链接无法下载、失效或广告，请联系管理员处理！
7. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
8. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员！
THE END
会员专属
暂无评论内容