网站搭建商上海,蝉知使用WordPress模板,云南省城乡与住房建设厅网站,网站建设流程平台Web API
作用#xff1a;就是使用JS去操作html和浏览器
分类#xff1a;DOM#xff08;文档对象模型#xff09;、BOM#xff08;浏览器对象模型#xff09;
DOM
DOM是用来呈现以及与任意HTML或XML文档交互的API#xff0c;简单来说就是操作网页的内容。 DOM树
将H…Web API
作用就是使用JS去操作html和浏览器
分类DOM文档对象模型、BOM浏览器对象模型
DOM
DOM是用来呈现以及与任意HTML或XML文档交互的API简单来说就是操作网页的内容。 DOM树
将HTML文档以树状结构直观的表现出来称之为文档树或DOM树。直观的体现了标签与标签之间的关系。 DOM对象
DOM对象 浏览器根据html标签生成的JS对象
所有的标签属性都可以在这个对象上面找到修改这个对象的属性会自动映射到标签身上
核心思想将网页当做对象处理 获取DOM元素
根据CSS选择器来获取DOM元素查找DOM元素就是利用JS选择页面中标签元素 1.选择匹配的第一个元素 document.querySelector(css选择器) 返回值css选择器匹配的第一元素一个 HTMLElement对象如果没有匹配到则返回null。
bodydiv classbox选择第一个元素/divdiv classbox第二个元素/divscriptconst box document.querySelector(div)console.dir(box)/script
/body 2.选择匹配的多个元素
语法 document.querySelectorAll(css选择器) 返回值css选择器匹配的NodeList对象集合
bodyulli1/lili2/lili3/li/ulscriptconst lis document.querySelectorAll(ul li)console.dir(lis)/script
/body 得到的是一个伪数组有长度和索引号没有pop()push()等方法。想得到里面的每一个对象则需要遍历(for)的方式获得。 操作元素内容
innerText
将文本内容添加/更新到任意标签位置
显示纯文本不解析标签 div classbox我是内容/divscriptconst box document.querySelector(.box)console.log(box.innerText);//直接获取元素box.innerText strong我是新内容/strong//修改文字内容/script innerHTML
会解析标签多标签建议使用模板字符 将上面innerText修改成innerHTML。 操作元素属性 常用属性还可以通过JS设置或修改标签元素属性比如通过src更换图片。
语法对象.属性值 样式属性 通过style属性操作css 语法对象.style.样式属性 值 如果是css中有短横线的例如background-color就按小驼峰命名法backgroundColor
