玩具网站建设方案,台州seo快速排名,外包优化是什么意思,网站下载软件入口Bom
dom: document object model(文档对象模型), 是处理html、xml的标准编写接口。
节点和元素 整个页面也就是整个文档我们称之为文档节点; 文档节点使用document来表示; 页面中的所有标签我们称之为元素#xff0c;使用element来表示; 如此处的文本、属性、注释等…Bom
dom: document object model(文档对象模型), 是处理html、xml的标准编写接口。
节点和元素 整个页面也就是整个文档我们称之为文档节点; 文档节点使用document来表示; 页面中的所有标签我们称之为元素使用element来表示; 如此处的文本、属性、注释等我们称之为节点使用node进行表示;即注释也叫注释节点、文 本也叫文本节点、属性也叫属性节点;元素也可以称为元素节点。 获取元素对象 /*通过document 对象 获取元素*///通过id获取元素对象 传入id的名称//id不能重复let div document.getElementById(one);console.log(div)// 通过class名获取元素对象 返回的是一个数组//如果要去操作具体的对象需要通过索引获取到对象let div2 document.getElementsByClassName(box1);console.log(div2)//通过标签的名称获取元素对象 返回一个数组let liList document.getElementsByTagName(li);console.log(liList)//通过name属性的值获取元素 返回一个数组 了解let nameList document.getElementsByName(dzh);console.log(nameList)//通过选择器获取一个元素对象let box1 document.querySelector(.box1);console.log(box1)//通过选择器获取多个元素对象var box2 document.querySelectorAll(div);console.log(box2)
操作文本超文本
// 通过class名获取元素对象 返回的是一个数组//如果要去操作具体的对象需要通过索引获取到对象let div document.getElementsByClassName(box1);console.log(div)console.log(div[0].innerText)//操作元素的文本内容// div[0].innerText span我是span/span;//操作元素的 超文本内容div[0].innerHTMLspan classone我是span/span
操作对象的属性
id和class
//操作元素对象的属性// 对象名.属性名console.log(div.id)div.idtwo;//操作类名console.log(div.className)//覆盖class名// div.classNamebox2// 添加类名div.classList.add(box2)// 删除类名// div.classList.remove()//替换类名// div.classList.replace()
操作自定义属性
//获取到所有的li 给每一个li添加一个唯一的index标识let liList document.getElementsByTagName(li);for (let i 0; i liList.length; i) {const element liList[i];// 设置属性名和属性值element.setAttribute(index,i)console.log(element.getAttribute(index))} 操作元素行内样式 //设置当前元素的行内样式 div.style.colorred; div.style.width100px; div.style.height100px // font-size fontSize background-color backgroundColor div.style.backgroundColorgreen; 获取元素的外部样式 //获取元素的外部样式 console.log(window.getComputedStyle(div).backgroundColor) console.log(window.getComputedStyle(div).width) 操作checkbox的checked属性
//先判断 有没有选中if(checkbox.checked){//如果是选中 就取消选中checkbox.checkedfalse;btn.innerText点击选中}else{checkbox.checkedtrue;btn.innerText点击取消选中}
节点操作 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodybutton onclickdel()删除/buttonbutton onclickreplace()替换/button/body
script// 创建一个元素节点 传入元素的名称let div document.createElement(div);div.style.width100pxdiv.style.height100pxdiv.style.backgroundColorred//创建文本节点 等同于 innerText属性
// let text document.createTextNode(我是div);
// div.appendChild(text)
div.innerText我是divconsole.log(div)//获取到body标签的对象let body document.querySelector(body);console.log(body)//追加子节点body.appendChild(div)function del(){//点击按钮 删除div节点//前提需要有这个节点否则会报错body.removeChild(div)}function replace(){//点击按钮 将原来的div节点 替换成 span节点let span document.createElement(span);span.style.colorpink;span.style.fontSize25pxspan.innerText我是span//(插入的节点被替换的节点) //要保证 被替换节点存在body.replaceChild(span,div)}//查看当前元素的所有子节点let childList body.childNodesconsole.log(childList)
/script
/html
