上海制作网站的公司,个人简历范本,松江建设网站,望城做网站JavaScript青少年简明教程#xff1a;DOM和CSS简介
DOM简介
DOM#xff08;Document Object Model#xff09;将文档表示为一个树形结构#xff0c;其中每个节点都是一个对象#xff0c;每个对象都有其自身的属性和方法。
通过对DOM的操作#xff0c;开发者可以使用编…JavaScript青少年简明教程DOM和CSS简介
DOM简介
DOMDocument Object Model将文档表示为一个树形结构其中每个节点都是一个对象每个对象都有其自身的属性和方法。
通过对DOM的操作开发者可以使用编程语言如JavaScript动态地更新页面内容、样式以及处理用户交互为用户提供丰富的体验。
【DOM元素和HTML文档标签的关系 HTML标签是定义网页内容和结构的标记语言元素存在于HTML文件中。比如title,a,h1等。它们是静态的决定了网页最初的内容布局。
而DOM(文档对象模型)元素是HTML标签在浏览器中的对象表示形式。当浏览器解析HTML文档时,会根据标签生成对应的DOM元素形成一个树状结构。DOM元素是动态的对象模型,可以通过JavaScript等脚本语言来访问和操作。
说明
HTML标签是编写网页内容和结构的标记。
DOM元素是标签在浏览器内存中的对象表示和数据模型。
DOM元素与HTML标签并不是一一对应的关系因为一个HTML标签在DOM中可能对应多个节点对象。这是由于浏览器解析HTML时除了构建对应元素节点外还会创建其他节点比如文本节点、属性节点等。
举个例子对于HTML标签p idtestHello World/p
在DOM中会存在如下节点:
元素节点 - p元素
属性节点 - idtest的属性节点
文本节点 - Hello World的文本节点
所以一个看似简单的HTML标签在DOM树中可能会有多个节点来表示它的不同部分而不是简单的一一对应。
另外除了HTML解析出的节点DOM还提供了一些附加的节点对象比如document对象、window对象等它们在HTML中没有直接对应的标签。】 下面给出一个通过JavaScript操作DOM的示例
html langzh
head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDOM操作示例/title
/head
body h1 idgreeting你好世界/h1 button onclickchangeGreeting()点击我改变问候语/button script// 定义一个函数来改变问候语 function changeGreeting() { // 使用getElementById方法来获取id为greeting的元素 let greetingElement document.getElementById(greeting); // 修改该元素的内容为新的问候语 greetingElement.textContent 你好JavaScript!; }/script /body
/html在这个示例中当你点击按钮时会触发changeGreeting函数。该函数首先使用document.getElementById方法获取页面上id为greeting的元素即h1元素然后修改该元素的textContent属性来改变其显示的内容。这样h1元素的内容将从“你好世界”更改为“你好JavaScript!” 以下是一些常见的DOM操作介绍 以下是一些常见的DOM操作介绍
1. 访问DOM元素
通过ID获取元素
let element document.getElementById(myElement); 通过类名获取元素
返回一个包含所有匹配元素的HTMLCollection。
let elements document.getElementsByClassName(myClass); 通过标签名获取元素
返回一个包含所有匹配元素的HTMLCollection。
let elements document.getElementsByTagName(div); 通过CSS选择器获取元素
返回第一个匹配的元素。
let element document.querySelector(.myClass);
返回所有匹配的元素返回的是一个NodeList。
let elements document.querySelectorAll(.myClass); 2. 修改DOM元素内容和属性
修改元素内容
a)修改元素的文本内容
element.textContent 新的文本内容;
例如操作网页的文档对象模型 (DOM)例如修改元素内容
p idmyParagraphHello, world!/p
script
document.getElementById(myParagraph).textContent Hello, JavaScript!;
/scriptb)修改元素的HTML内容
element.innerHTML span新的HTML内容/span; 修改元素属性
element.setAttribute(src, image.png); 获取元素属性
let src element.getAttribute(src); 删除元素属性
element.removeAttribute(src); 3. 修改元素样式
通过style属性修改内联样式
element.style.color blue;
element.style.fontSize 16px; 添加或删除类名
element.classList.add(newClass);
element.classList.remove(oldClass);
element.classList.toggle(activeClass); // 如果类名存在则移除否则添加 4. 创建和删除元素
创建新元素
let newElement document.createElement(div);
newElement.textContent 我是一个新元素; 添加新元素到DOM
let parentElement document.getElementById(parent);
parentElement.appendChild(newElement); 删除元素
parentElement.removeChild(newElement); 在JavaScript中操作表单元素是一个常见的任务它允许你读取用户输入、验证数据、动态地更改表单内容等。下面给出获取表单元素示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleForm Example/title
/head
bodyform idmyFormlabel fornameName:/labelinput typetext idname namenamebrlabel forageAge:/labelinput typenumber idage nameagebrinput typesubmit valueSubmit/formscriptconst form document.getElementById(myForm);form.addEventListener(submit, function(event) {event.preventDefault(); // 防止表单实际提交const name document.getElementById(name).value;const age document.getElementById(age).value;alert(Name name Ageage);});/script
/body
/html此例使用document.getElementById 获取表单元素然后访问其 value 属性来获取用户输入的数据。 CSS 简介
CSS (Cascading Style Sheets) 是一种样式表语言,用于描述和控制网页中元素的呈现效果包括布局、字体、颜色、背景等方面的样式。CSS 是网页设计中最重要的技术之一它可以使网页内容和样式相分离有利于内容的重复使用和样式的统一管理。
CSS 的主要作用如下:
布局和排版:通过设置元素的宽高、边距、填充、浮动、定位等属性可以实现不同的布局和排版方式。字体和文本样式:可以设置文本的字体family、大小、颜色、加粗、倾斜、行高、对齐方式等样式。背景和边框:可以为元素设置背景颜色、背景图片、背景重复方式以及边框的样式、颜色、宽度等。盒模型:CSS 将网页元素视为矩形盒子通过设置 margin、padding、border 等属性来控制盒子的样式。过渡和动画:CSS3 引入了过渡和动画功能可以实现元素的平滑过渡和动画效果。
CSS 可以通过多种方式与 HTML 页面关联:内联样式、内部样式表、外部样式表等。在实际开发中通常推荐使用外部样式表的方式利于样式的复用和维护。CSS 的语法包括选择器、属性和值通过不同的选择器可以精准地选中页面中的元素并设置其样式。 CSS 选择器用于“查找”或选取要设置样式的 HTML 元素。
要对HTML页面中的元素实现一对一一对多或者多对一的控制可用CSS 规则集rule-set实现CSS 规则集也称为css样式定义CSS 规则集由选择器和声明块组成CSS语法
CSS规则由选择器和声明块组成
选择器 { 属性: 值;
}
选择器selector用于选择要应用样式的HTML元素。常用选择器
元素选择器如 p、div、span 等选择指定的元素
类选择器如 .classname选择指定类的元素类名以点.开头
ID选择器如 #idname选择指定ID的元素ID名以井号#开头。
属性选择器如 [attrvalue]选择指定属性的元素。
伪类选择器如 :hover、:active 等选择特定状态的元素。
等
声明块declaration block包含一个或多个声明每个声明由属性property和属性值value组成属性和值之间用冒号分隔声明之间用分号分隔。
属性 (Property): 要改变的样式特性如颜色、字体、布局等。
值 (Value): 指定给属性的值即你希望样式特性具有什么样的表现。
换句话说声明块指明了样式选择器指明了 “样式”的作用对象也就是“样式”作用于网页中的哪些元素。
CSS注释
CSS中的注释以 /* 开头以 */ 结尾。注释内容不会被浏览器解析。
CSS示例 /* 选择器 */ body { /* 声明块 */ background-color: lightblue; /* 属性: 值; */ }
h1 { color: navy; font-size: 24px; }
p { color: green; } CSS层叠样式表可以通过多种方式应用到HTML文档中主要有三种内联样式Inline Styles、内部样式表Internal Stylesheets和外部样式表External Stylesheets。
1. 行内样式Inline Styles
直接在HTML元素的style属性中定义样式。这种方式仅适用于单个元素。但一般不推荐使用因为它和HTML代码混杂在一起不易于维护。例如
!DOCTYPE html
html
head /head
body p stylecolor: blue; font-size: 20px;这是一个段落。/p
/body
/html2. 内部样式表Internal Style Sheet
在HTML文件的head标签内的style标签中的定义样式。这种方式在HTML文件内将将样式代码与HTML代码进行了适当分离——写在不同部分。例
!DOCTYPE html
html
head style p { color: blue; font-size: 20px; } /style
/head
body p这是一个段落。/p
/body
/html3. 外部样式表External Stylesheets
外部样式表是将样式代码写在单独的.css文件中并通过HTML文件的link标签引入。这种方式是最推荐的方式因为它可以实现样式代码的复用提高代码的可维护性。
假设创建的css的文件名为styles.css内容如下
p { color: blue; font-size: 20px;
}在HTML文件中引入这个CSS文件
!DOCTYPE html
html
head link relstylesheet typetext/css hrefstyles.css
/head
body p这是一个段落。/p
/body
/html进一步学习可参考
HTML网页文档和DOM结构介绍 https://blog.csdn.net/cnds123/article/details/136901800
BOM和DOM入门 https://blog.csdn.net/cnds123/article/details/109635554
CSS选择器介绍https://blog.csdn.net/cnds123/article/details/125926256
