网站左下角广告代码,企业网站搭建多少钱,阜阳网站优化,网站建设营销策划书DOM Document Object Model 简单而言#xff0c;就是JavaScript将HTML文档的各个组成部分封装为对象。 封装的对象分别为#xff1a; Document#xff1a;整个HTML的文档对象 Element#xff1a;元素对象#xff08;也就是HTML中的标签#xff09; Attribute#xff1a;… DOM Document Object Model 简单而言就是JavaScript将HTML文档的各个组成部分封装为对象。 封装的对象分别为 Document整个HTML的文档对象 Element元素对象也就是HTML中的标签 Attribute属性对象HTML标签中的属性 Text文本对象标签中的文本 Comment注释对象 js获得了HTML中各个组成部分的对象就可以添加和删除HTML元素、改变HTML元素的内容、样式和对HTML DOM事件做出反应。 DOM核心思想将网页的所有内容当作对象进行处理标签的所有属性在该对象上都可以找到并且修改这个对象的属性就会自动映射到对应标签上。 document对象 网页中所有内容都封装在document对象中 document对象提供的属性和方法都是用来访问和操作网页内容的如document.write() DOM操作步骤 1.获取DOM元素对象 2.操作DOM对象的属性或方法
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJavaScriptDOM使用/title
/head
bodyh1我是用于测试JavaScriptDOM的h1/h1h1我是用于测试JavaScriptDOM的h1 2.0/h1h2我是用于测试JavaScriptDOM的h2/h2script// JS DOM// DOMDocument Object Model 文档对象模型。也就是JavaScript将HTML文档的各个组成部分封装为对象// 封装的对象分别为// Document整个HTML的文档对象// Element元素对象也就是HTML中的标签// Attribute属性对象HTML标签中的属性// Text文本对象标签中的文本// Comment注释对象// js获得了HTML中各个组成部分的对象就可以添加和删除HTML元素、改变HTML元素的内容、样式和对HTML DOM事件做出反应// DOM核心思想将网页的所有内容当作对象进行处理标签的所有属性在该对象上都可以找到// 并且修改这个对象的属性就会自动映射到对应标签上// document对象// 网页中所有内容都封装在document对象中// document对象提供的属性和方法都是用来访问和操作网页内容的如document.write()// DOM操作步骤// 1.获取DOM元素对象// 2.操作DOM对象的属性或方法// 如何获取DOM元素// 1.通过CSS的选择器获取document.querySelector(CSS选择器); 获取选择器匹配到的第一个元素// 2.通过CSS的选择器获取document.querySelectAll(CSS选择器); 获取选择器匹配到的所有元素// 获取到的所有元素会封装到一个NodeList对象中返回NodeList就相当于一个伪数组有长度、索引的数组但是不完全是数组// 测试// HTML中有两个h1标签通过querySelector(h1)只能获取匹配到的第一个h1let hs document.querySelector(h1);hs.innerHTML 我是h1我将被修改;// 通过querySelector(h1)可以获得所有匹配的h1存储到了NodeList中let allHs document.querySelectorAll(h1);allHs[0].innerHTML 我是第一个h1我将被修改;allHs[1].innerHTML 我是第二个h1我将被修改;/script/body
/html
