山西省网站,wordpress强大的主题,房屋竣工验收备案表网上查询,怎么做网站注册推广本文题目来源于全网收集#xff0c;答案来源于 ChatGPT 和 博主#xff08;的小部分……#xff09;
格式#xff1a;题目 h3 回答 text 参考大佬博客补充 text 示例代码 code 解释 quote 补充 quote 目录 No.1 - No.20 本文题目来源于全网收集#xff0c;答案来源于…本文题目来源于全网收集答案来源于 ChatGPT 和 博主的小部分……
格式题目 h3 回答 text 参考大佬博客补充 text 示例代码 code 解释 quote 补充 quote 目录 No.1 - No.20 本文题目来源于全网收集答案来源于 ChatGPT 和 博主的小部分……格式题目 h3 回答 text 参考大佬博客补充 *text* 示例代码 code 解释 quote 补充 quote1. 简述一下你对 HTML 语义化的理解补充SEO表现 2. 谈谈 Iframe 3. 介绍一下 CSS 的盒子模型4. 讲讲 css 选择器的优先级5. 垂直居中几种方式6. CSS link 与 import 的区别和用法7. 谈谈元素的隐藏方式及其区别display:none visibility:hidden rgba opacity8. relative和absolute分别是相对于谁进行定位的9. 画一条0.5px的直线个人觉得似乎有点不妥10. 1rem、1em、1vh、1px、1rpx各自代表的含义11. HTML5、CSS3 里面都新增了那些新特性HTML5 新特性CSS3 新特性 12. JS 数据类型有哪些? || JS 有哪些内置对象原始数据类型Primitive data types引用数据类型Reference data types 13. 基本数据类型和引用数据类型有什么区别基本数据类型Primitive data types引用数据类型Reference data types 14. innerHTML 和 innerText 和 documen.write 的区别innerHTMLinnerTextdocument.write() 15. JavaScript 由哪三部分组成16. DOM 元素e的 e.getAttribute(propName)和 e.propName 有什么区别和联系区别联系 17. offsetWidth / offsetHeight, clientWidth / clientHeight, scrollWidth / scrollHeight 的区别?18. 检测浏览器版本版本有哪些方式19. 元素节点、文本节点、属性节点的nodeType、nodeName、nodeValue分别是什么20. HTTP 请求的时候 get 和 post 方式的区别 1. 简述一下你对 HTML 语义化的理解
HTML语义化是指在编写网页代码时选择恰当的HTML标签来表达文档的结构和内容含义而不是仅仅为了实现特定的样式效果。通过使用语义化的标签我们可以提高代码的可读性、可维护性和可访问性同时有助于搜索引擎更好地理解页面内容。 HTML 语义化是指在编写 HTML 代码时使用恰当的标签来传达文档结构和内容的含义、目的和作用而不仅仅是为了呈现某种样式或布局效果。它可以提高代码的可读性、可维护性和可访问性有助于用户和搜索引擎等对网页进行更准确和有效的解读。 具体来说HTML 语义化的特点包括 使用恰当的标签根据文档结构和内容的含义选择适合的 HTML 标签来标记元素如 article、section、header、nav、aside、footer 等。按重要性排序将页面中的内容按照重要性排序先显示最重要的内容后显示较不重要的内容可以使用 h1 到 h6 标签表示标题的重要性。避免滥用无语义的标签尽量避免使用 div 和 span 等无语义的标签来布局而是使用具有语义含义的标签来表达意图。使用 alt 属性对于图片等非文本内容应该使用 alt 属性来提供替代文本以便于屏幕阅读器等工具能够正确地解读和呈现。表示关联关系使用 a 标签来表示链接同时利用 href 属性来指定链接地址title 属性来提供额外信息rel 属性来表示关联关系等。 HTML 语义化的优点包括 增强可读性使用语义化的标签可以使代码更加易读易懂更符合人类阅读习惯也有助于其他开发者快速理解和维护代码。提高可访问性语义化的 HTML 代码可以提高网站的可访问性使得视障用户、搜索引擎等能够更准确地解读网页内容。便于 SEO搜索引擎会根据页面内容的语义结构来评估网站的质量因此语义化的 HTML 代码能够提高网站的 SEO 效果。方便维护使用语义化的 HTML 代码可以使得代码更容易维护和修改因为代码的结构和意图更加清晰和明确。 总之HTML 语义化是一种良好的编程实践有助于提高网站的质量、可访问性和可维护性值得开发者在日常工作中积极应用。 补充SEO表现 SEOSearch Engine Optimization搜索引擎优化表现指的是网站在搜索引擎中的排名和展示情况。一个网站的良好SEO表现意味着它在搜索引擎结果页面SERP中能够获得较高的排名吸引更多的有意向访问者。 良好的SEO表现通常包括以下几个方面 排名优化网站在搜索引擎中的关键词排名靠前特别是在重要关键词上获得较高位置。流量增长通过搜索引擎带来的有机流量增加即用户通过搜索引擎输入相关关键词后点击进入网站的访问量增加。点击率提升搜索结果中网站的标题和描述吸引用户点击的概率增加提高搜索结果的点击率。页面曝光网站的页面数量被搜索引擎索引的程度增加提高网站在搜索引擎中的曝光度。用户满意度网站内容质量、页面加载速度、用户体验等因素得到优化提升用户对网站的满意度和停留时间。 这些因素综合起来可以帮助网站获得更多的有机流量和有效的访问从而提升网站的知名度、品牌价值和业务转化率。SEO表现不仅仅关注排名更注重如何通过优化网站内容、结构和用户体验等方面为用户提供有价值的信息和良好的访问体验。 2. 谈谈 Iframe
Iframe是HTML中的一个标签用于在网页中嵌入其他独立的HTML文档或外部内容。可以使用Iframe来实现在网页中嵌入视频、地图、表单等内容。比如可以通过在Iframe的src属性中指定Bilibili视频或Baidu地图的URL来将它们嵌入到网页中。此外也可以利用Iframe来在网页中实现广告展示、内嵌其他网站的内容等功能。对于Iframe的使用要注意设置合适的尺寸、避免对页面布局产生混乱以及关注对网页性能、安全性和可访问性的影响。在实际开发中要根据具体的需求和最佳实践来灵活运用Iframe并权衡其优缺点来达到最佳的效果。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleIframe Example/title
/head
bodyh1嵌入视频示例/h1p以下是一个嵌入视频的示例/piframe width560 height315 srchttps://www.bilibili.com/video/BV1V3411N7a2 frameborder0 allowfullscreen/iframe
/body
/htmlIframeInline Frame是HTML中的一个标签用于在一个网页中嵌入另一个独立的HTML文档。使用Iframe标签可以实现在当前页面内嵌入其他网页、广告、地图等内容。Iframe的优缺点如下 优点 可嵌入任何类型的文档Iframe可以嵌入任何类型的文档包括视频、音频、地图、表单等。这使得在一个网页中集成多种类型的内容变得更加容易。 让网页加载更快Iframe可以让网页的不同部分分别加载这样可以提高网页的响应速度和性能。 增强了页面的交互性通过Iframe在网页中嵌入互动性的内容例如视频、表单或游戏可以增强网页的交互性和吸引力。 提供了一定的隔离性由于被嵌入的文档在Iframe中运行因此可以提供一定的隔离性防止外部脚本或代码对主页面造成影响。缺点 会导致网页布局混乱如果Iframe的尺寸没有设置好或者被嵌入的文档尺寸发生变化可能会导致网页布局混乱。 降低了网页的可访问性Iframe中的内容对于搜索引擎不友好可能会影响页面的SEO表现和可访问性。此外屏幕阅读器等辅助技术也可能无法识别Iframe中的内容。 可能会降低网页的安全性通过Iframe嵌入的文档可能包含恶意脚本或代码从而导致网页的安全性受到威胁。 不利于网页的响应式设计由于Iframe的尺寸固定因此不容易进行响应式设计这可能会对移动设备用户造成不便。 总的来说Iframe是一种方便的HTML元素可以在网页中嵌入其他类型的文档。但是在使用它时需要权衡其优缺点并谨慎考虑其对网站性能、安全性和可访问性的影响。 3. 介绍一下 CSS 的盒子模型
CSS 盒子模型是指在网页布局中将每个元素看作一个矩形的盒子这个盒子包含内容、内边距、边框和外边距四个部分。具体来说它包括内容区域、内边距、边框和外边距这四个部分。内容区域是盒子的实际内容内边距是内容与边框之间的空间边框用于界定内容区域的边界而外边距则是盒子与相邻元素之间的空白区域。 在 CSS 中盒子模型有两种标准标准盒子模型和 IE 盒子模型。标准盒子模型计算元素的宽度和高度仅包括内容区域不包括内边距、边框和外边距而IE 盒子模型计算宽度和高度包括内容区域、内边距和边框但不包括外边距。我们可以通过 box-sizing 属性来指定使用哪种盒子模型。 CSS 的盒子模型是指在 Web 页面中每个元素如文本、图像、块级元素等都被看作是一个矩形的盒子这个盒子包含内容、内边距、边框和外边距四个部分。这些部分的组合形成了元素在页面中所占据的空间。 盒子模型的四个部分如下 内容区域Content盒子的实际内容例如文本或图像。内边距Padding内容区域与边框之间的空间可以通过 CSS 属性设置。边框Border内边距之外的边框用于界定内容区域的边界。外边距Margin盒子与相邻元素之间的空白区域可以通过 CSS 属性设置。 在 CSS 中可以通过设置不同的属性来控制盒子模型的各个部分例如 padding 属性用于设置内边距的大小border 属性用于设置边框的样式、宽度和颜色margin 属性用于设置外边距的大小。 盒子模型在页面布局和设计中起着重要作用通过调整盒子模型的不同部分可以控制元素之间的间距、边框样式以及元素的尺寸和位置。理解和熟练运用盒子模型是开发网页布局的基础之一。 在 CSS 中盒子模型主要有两种标准标准盒子模型Content Box和IE 盒子模型Border Box。它们在计算元素的宽度和高度时略有不同。 标准盒子模型Content Box 元素的宽度width和高度height仅包括内容区域不包括内边距padding、边框border和外边距margin。计算公式width/height content width/height IE 盒子模型Border Box 元素的宽度width和高度height包括内容区域、内边距padding和边框border但不包括外边距margin。计算公式width/height content width/height padding border 在 CSS 中可以通过 box-sizing 属性来指定使用哪种盒子模型 box-sizing: content-box;使用标准盒子模型默认值box-sizing: border-box;使用IE 盒子模型 选择不同的盒子模型取决于布局需求和个人偏好。使用 IE 盒子模型可能更便于控制元素的尺寸因为内边距和边框不会影响元素的实际宽度和高度而使用标准盒子模型则更符合传统的 CSS 盒子模型定义。 4. 讲讲 css 选择器的优先级
在 CSS 中选择器优先级用于确定当多个选择器同时应用于同一个元素时哪个选择器的样式规则将被应用。CSS 选择器优先级是根据选择器的特定性和重要性来计算的。 特定性是用于衡量选择器的权重的一个值它是由选择器中各种组件的数量和类型来决定的。通常选择器中包含的ID 选择器的数量越多特定性就越高因为 ID 选择器是最具体的选择器。其次是类选择器和属性选择器再其次是标签选择器。 当特定性相等时样式规则的顺序将起作用后定义的规则将覆盖先定义的规则。但有一种情况例外即使用!important声明的样式规则它具有最高的优先级可以覆盖其他所有规则。
大佬博客补充 通配符 继承 浏览器默认属性
-- CSS选择器优先级按照以下规则进行计算--1. 内联样式Inline Styles通过style属性直接添加到HTML元素中的样式具有最高的优先级。例如--
p stylecolor: red;这是一个红色的段落。/p2. ID选择器ID Selectors使用#前缀定义的ID选择器具有较高的优先级。例如
style
#myElement {color: blue;
}
/style3. 类选择器、属性选择器和伪类选择器Class Selectors, Attribute Selectors, and Pseudo-Class Selectors类选择器、属性选择器和伪类选择器具有相同的优先级它们通过.class、[attribute]或:pseudo-class来定义。
style
.myClass {color: green;
}
[typetext] {font-weight: bold;
}
a:hover {text-decoration: underline;
}
/style4. 元素选择器和伪元素选择器Element Selectors and Pseudo-Element Selectors元素选择器和伪元素选择器具有最低的优先级它们通过元素名称或::pseudo-element来定义。例如
style
h1 {font-size: 24px;
}
::first-letter {text-transform: uppercase;
}
/style5. 垂直居中几种方式
在CSS中有几种常见的方法可以实现垂直居中。一种常用的方法是使用Flexbox布局通过设置父元素的display: flex; align-items: center; justify-content: center;子元素就可以在垂直和水平方向上居中显示。 另一种方法是使用position和transform属性可以将子元素相对于父元素进行绝对定位并使用top: 50%; left: 50%; transform: translate(-50%, -50%);来使其在垂直和水平方向上居中。 此外还可以使用Grid布局和表格布局来实现垂直居中。Grid布局可以通过设置父元素的display: grid; place-items: center;来实现居中而表格布局可以使用display: table; vertical-align: middle;来实现垂直居中。
大佬博客补充单行文本: line-height height
-- 在CSS中实现垂直居中可以使用多种方式以下是一些常见的方法--1. 使用Flexbox布局Flexbox是一种现代的布局方式可以轻松实现元素的水平和垂直居中。通过设置父元素的display: flex;以及align-items: center; justify-content: center;子元素就可以在垂直和水平方向上居中显示。
style
.container {display: flex;align-items: center;justify-content: center;height: 300px; /* 需要有明确的高度 */
}
/style2. 使用Grid布局类似于FlexboxGrid布局也可以轻松实现元素的水平和垂直居中。通过设置父元素的display: grid; place-items: center;子元素可以在垂直和水平方向上居中显示。
style
.container {display: grid;place-items: center;height: 300px; /* 需要有明确的高度 */
}
/style3. 使用position和transform可以使用绝对定位和transform属性来实现垂直居中这种方法适用于不知道高度的情况。
style
.container {position: relative;height: 300px; /* 父元素需要有明确的高度 */
}.centered {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
/style4. 使用表格布局可以将元素以表格的形式布局然后使用vertical-align: middle;来实现垂直居中。
style
.container {display: table;height: 300px; /* 需要有明确的高度 */
}.centered {display: table-cell;vertical-align: middle;
}
/style以上是一些常见的实现垂直居中的方法每种方法都有其适用的场景具体选择哪种方法取决于布局的需求和兼容性考虑。6. CSS link 与 import 的区别和用法
Link 标签是 HTML 中的一个标签用于将外部样式表链接到 HTML 文档。它支持并行加载不会阻塞页面的渲染并且可以定义多个 link 标签引入多个外部样式表方便管理和维护。 import 是 CSS 的指令用于在 CSS 文件中引入外部样式表。它必须写在 CSS 文件的最前面放在其他样式规则之前并且会在页面加载时按顺序串行加载可能导致页面加载速度较慢。 因此一般情况下我们推荐使用 link 标签来引入外部样式表因为它具有更好的性能表现和灵活性。而 import 则适用于一些特殊需求比如根据媒体查询条件加载不同的样式表。
大佬博客补充link 支持使用 Javascript 控制 DOM 去改变样式而 import 不支持 CSS 中的 link 标签和 import 指令都可以用来引入外部样式表但它们有一些区别和不同的用法 Link 标签 Link 标签是 HTML 中的一个标签在 head 部分使用用于将外部样式表链接到 HTML 文档。通过 link 标签引入的样式表会以并行方式加载不会阻塞页面的渲染。可以定义多个 link 标签引入多个外部样式表方便管理和维护。 link relstylesheet typetext/css hrefstyles.css import 指令 import 是 CSS 的一个指令用于在 CSS 文件中引入外部样式表。import 必须写在 CSS 文件的最前面放在其他样式规则之前。 通过 import 引入的样式表会在页面加载时按顺序串行加载可能会导致页面加载速度较慢。 import url(styles.css); 主要区别 Link 标签在 HTML 中使用而 import 是 CSS 的一部分写在 CSS 文件中。 -Link 标签支持并行加载import 会串行加载。Link 标签没有特定的加载顺序要求而 import 必须写在 CSS 文件的最前面。 一般来说推荐使用 link 标签来引入外部样式表因为它具有更好的性能表现和灵活性。而 import 则适用于一些特殊需求比如根据媒体查询条件加载不同的样式表。 7. 谈谈元素的隐藏方式及其区别display:none visibility:hidden rgba opacity
首先display: none可以完全移除元素并且不占据文档流中的位置。它对其他元素的布局没有影响同时元素也不可见无法与用户交互。
其次visibility: hidden也可以隐藏元素但仍然保留了元素在文档流中的位置。虽然元素不可见但它仍然会影响其他元素的布局。
此外我们还可以使用 rgba来设置元素的背景色为透明。通过将背景颜色的 rgba值的 alpha 通道设为 0可以实现元素的隐藏。这种方式下元素仍然占据位置但不可见。与 visibility: hidden不同元素可以与用户交互。
最后opacity属性可以通过设置元素的透明度来隐藏元素。与前面的方法不同opacity不会移除元素或改变其位置。元素仍然存在于文档流中占据位置但是变得透明不可见。与其他方式相比opacity可以实现渐变效果的隐藏同时仍然可以与用户交互。
示例测试代码
!DOCTYPE html
html
headstyle#myButton {/* opacity: 0; *//* visibility: hidden; */display: none;}/style
/head
bodybutton idmyButton onclickalert(按钮被点击了)点击我/buttonscriptdocument.getElementById(myButton).addEventListener(click, function() {alert(按钮被点击了);});/script
/body
/html8. relative和absolute分别是相对于谁进行定位的
position: relative定位是相对于元素自身在文档流中的位置进行定位。换句话说元素的定位参考点是自身通过设置 top、right、bottom 和 left 属性来调整元素的位置但不会影响其他元素的布局。
position: absolute定位是相对于元素最近的已定位祖先元素进行定位。如果没有已定位的祖先元素则相对于最初包含它的块级容器通常是 body元素进行定位。这意味着绝对定位元素的定位参考点是最近的已定位祖先元素通过设置 top、right、bottom 和 left 属性来调整元素相对于该祖先元素的位置。如果没有已定位的祖先元素那么相对于最初包含它的块级容器进行定位。此时绝对定位元素可能会影响其他元素的布局因为它在正常文档流中不再占据位置。 9. 画一条0.5px的直线个人觉得似乎有点不妥
在屏幕上直接绘制出 0.5 像素宽度的直线是不可能的因为屏幕的物理像素是一个固定大小的单元无法以小于 1 像素的尺寸显示。 不过在网页设计中我们可以通过一些技巧来模拟出 0.5 像素宽度的效果。例如
使用 CSS 的 transform 属性对元素进行缩放来达到这个效果。具体做法是创建一个 1px 宽度的线条并将其水平缩放为原始宽度的一半从而实现看起来像是 0.5px 宽度的线条。transform: scaleX(0.5);使用 CSS 的 border 属性并将线条颜色设置为半透明黑色。具体做法是创建一个高度为 1px 的 div 元素并将其 border-top 属性设置为 1px 宽度、半透明黑色。 border-top: 1px solid rgba(0, 0, 0, 0.5); 10. 1rem、1em、1vh、1px、1rpx各自代表的含义
1rem表示相对于根元素通常是 元素的字体大小。例如如果根元素的字体大小为 16 像素那么 1rem 等于 16 像素。1em表示相对于当前元素的字体大小。例如如果某个元素的字体大小为 14 像素那么 1em 等于 14 像素。1vh表示相对于视口高度的百分比。视口高度是指浏览器窗口可见区域的高度。例如如果视口高度为 800 像素那么 1vh 等于 8 像素即 800 * 1%。1px表示一个像素单位。像素是屏幕上最小的显示单元。实际显示效果会因设备像素密度DPI/PPI而有所不同。1rpx是微信小程序中的单位表示相对于屏幕宽度的适配像素。它是微信小程序框架提供的一种相对单位用于实现在不同设备上的屏幕适配。个人补充
需要注意的是rem 和 em 是相对单位其大小取决于父元素或根元素的字体大小。而 vh 和 px 是绝对单位其大小固定不变。可以根据需要选择适合的单位来进行布局和样式设计。 11. HTML5、CSS3 里面都新增了那些新特性
HTML5 新特性
语义化标签包括 header、footer、nav、article、section等使得页面结构更清晰明了。新的表单元素如 input typedate、input typeemail、input typeurl等简化了表单设计。音频和视频支持通过 和 元素实现在网页中嵌入音频和视频内容。Canvas 绘图提供了一个使用 JavaScript 进行绘图的 API用于动态生成图形、动画等。本地存储包括 Web StoragelocalStorage 和 sessionStorage和 IndexedDB用于在客户端存储数据。Web Workers允许在后台运行脚本以提高多线程处理能力。WebSocket实现了浏览器与服务器之间全双工通信的功能。Geolocation API提供了获取用户地理位置信息的能力。
CSS3 新特性
选择器新增了许多新的选择器如属性选择器、伪类选择器等增强了样式选择的灵活性。盒子模型引入了 box-sizing 属性可以更方便地控制盒子模型的尺寸。阴影效果通过 box-shadow 和 text-shadow 属性可以为元素添加阴影效果。渐变新增了渐变颜色的支持包括线性渐变linear-gradient和径向渐变radial-gradient。过渡和动画引入了 transition 和 animation 属性使得实现元素过渡和动画效果更加简单。媒体查询允许根据设备特性如屏幕大小、分辨率等调整样式实现响应式设计。Flexbox 布局提供了一种更灵活的布局方式使得实现复杂布局更加容易。Grid 布局引入了网格布局系统更好地支持多列布局和对齐方式。
以上只是 HTML5 和 CSS3 中的一部分新特性它们使得网页开发更具创造力和交互性为用户带来更好的浏览体验。 12. JS 数据类型有哪些? || JS 有哪些内置对象
原始数据类型Primitive data types
String字符串表示文本数据使用单引号或双引号表示。Number数字表示数值包括整数和浮点数带小数点的数值。Boolean布尔值表示逻辑值只有两个值true 和 false。Undefined未定义表示声明了变量但未赋值的数据类型变量默认值为 undefined。Null空值表示空值或者不存在的值。Symbol符号ES6 新增表示唯一且不可变的值。
引用数据类型Reference data types
Object对象表示复杂数据结构可以包含多个键值对。Array数组一种特殊的对象用于存储按索引顺序排列的值。Function函数函数也是对象的一种可以执行代码块。Date日期表示日期和时间。RegExp正则表达式用于匹配字符串的模式。Error错误表示错误对象。 在 JavaScript 中对象类型和引用数据类型其实是同一个概念的不同表达方式。JavaScript 中的对象类型就是引用数据类型。 当我们谈到引用数据类型时我们指的是存储在内存中的引用地址而不是实际的数据本身。在 JavaScript 中所有的对象都是引用数据类型。当我们创建一个对象时实际上在内存中分配了一块空间并且变量存储的是指向该内存空间的引用。 因此当我们将一个对象赋值给另一个变量时实际上是将对象的引用地址复制给了另一个变量而不是复制整个对象。这意味着两个变量实际上指向了内存中的同一个对象因此它们共享同一块内存空间对一个变量所做的修改会影响到另一个变量。 总之对象类型就是引用数据类型它们指的是存储在内存中的对象并且变量存储的是对象的引用地址。对于 JavaScript 开发者来说理解对象类型/引用数据类型的工作原理对于正确地处理对象的赋值、传递和操作非常重要。 13. 基本数据类型和引用数据类型有什么区别
基本数据类型Primitive data types
存储方式存储在栈内存中。访问直接访问变量的值。拷贝通过值进行拷贝。比较比较的是值是否相等。
引用数据类型Reference data types
存储方式存储在堆内存中变量存储的是指向堆内存的地址。访问先访问地址再根据地址访问堆内存中的对象。拷贝拷贝的是地址多个变量指向同一块内存空间。比较比较的是引用是否指向同一块内存空间。 14. innerHTML 和 innerText 和 documen.write 的区别
innerHTML 和 innerText 都是用于操作 HTML 元素内容的属性它们之间有一些重要的区别
innerHTML
作用innerHTML 是一个属性可以获取或设置元素的 HTML 内容包括标签和文本。HTML 解析innerHTML 返回的是解析过的 HTML 内容在设置时会解析字符串中的 HTML 标签并将其作为 HTML 元素展示。安全性由于 innerHTML 会解析 HTML因此存在安全风险可能被用于注入恶意脚本XSS 攻击。使用方式只能在 JavaScript 代码中使用不能在 HTML 元素中使用 JavaScript 调用。局部作用只会影响元素内部的 HTML 内容不会改变其他元素或文档结构。
innerText
作用innerText 是一个属性用于获取或设置元素的文本内容会忽略 HTML 标签只返回可见文本内容。文本内容innerText 返回的是元素内部的纯文本内容不包含 HTML 标签。性能由于 innerText 不涉及解析 HTML在某些情况下可能比 innerHTML 更快。
document.write()
作用在文档中写入 HTML 或文本内容。使用方式可以直接在 JavaScript 代码中使用也可以在 HTML 元素中使用 JavaScript 调用。覆盖现象如果 document.write() 在页面加载后调用它会覆盖整个文档包括 HTML、CSS 和其他脚本。支持性能document.write() 可以在没有 DOM 的情况下操作文档但在大多数情况下使用它来操作 DOM 是不推荐的。 15. JavaScript 由哪三部分组成 ECMAScriptES这是 JavaScript 的核心描述了该语言的语法和基本对象。它规定了变量、数据类型、操作符、控制结构、对象和函数等基本的语言元素。 文档对象模型DOMDOM 是一种让程序可以对 HTML 和 XML 文档进行访问和操作的方法。通过 DOM开发者可以使用 JavaScript 来操作页面上的元素比如改变内容、样式和结构等。 浏览器对象模型BOMBOM 提供了与浏览器交互的方法和接口包括处理浏览器窗口、历史记录、定时器等功能。BOM 并没有标准化因此不同的浏览器可能提供不同的 BOM 接口。 16. DOM 元素e的 e.getAttribute(propName)和 e.propName 有什么区别和联系
区别 适用范围 e.getAttribute(propName) 可以获取任意属性的值包括标准属性和自定义属性。e.propName 只能获取标准的 HTML 属性的值。 返回值类型 e.getAttribute(propName) 返回的始终是一个字符串即属性的值。e.propName 可以根据属性的类型返回不同的值比如布尔值、数值等。 属性是否存在 e.getAttribute(propName) 在属性不存在时返回 null。e.propName 在属性不存在时返回 undefined。
联系 获取属性值 当属性存在且为字符串类型时可以通过 e.getAttribute(propName) 和 e.propName 都能够获取到属性的值。但对于非字符串类型的属性如布尔值或数值只能使用 e.propName 来获取其原始类型的值因为 e.getAttribute(propName) 始终返回字符串类型。 设置属性值 通过 e.setAttribute(propName, value) 方法可以设置属性的值其中属性名 propName 可以是任意字符串。通过直接赋值 e.propName value 的方式也可以设置标准 HTML 属性的值。
大佬博客补充 e.getAttribute获取的是标签上属性 e.propName获取的是元素对象上属性
bodyinput idmyInput typecheckbox checkedchecked data-number100
scriptvar inputType1 document.getElementById(myInput).type;var inputType2 document.getElementById(myInput).getAttribute(type);console.log(inputType1:, inputType1); // 输出inputType1: checkboxconsole.log(inputType2:, inputType2); // 输出inputType2: checkboxvar checkedValue1 document.getElementById(myInput).checked;var checkedValue2 document.getElementById(myInput).getAttribute(checked);console.log(checkedValue1:, checkedValue1); // 输出checkedValue1: trueconsole.log(checkedValue2:, checkedValue2); // 输出checkedValue2: checkedvar numberValue1 document.getElementById(myInput).getAttribute(data-number);var numberValue2 document.getElementById(myInput).dataset.number;console.log(numberValue1:, numberValue1); // 输出numberValue1: 100console.log(numberValue2:, numberValue2); // 输出numberValue2: 100
/script
/body17. offsetWidth / offsetHeight, clientWidth / clientHeight, scrollWidth / scrollHeight 的区别?
offsetWidth 和 offsetHeight content padding border 滚动条clientWidth 和 clientHeight content padding不含滚动条scrollWidth 和 scrollHeight content padding 溢出尺寸不含滚动条均不含margin
!DOCTYPE html
html
headtitleBox Model Example/titlestyle#myElement {width: 200px;height: 150px;padding: 20px;margin: 30px;border: 5px solid black;overflow: scroll;}/style
/head
bodydiv idmyElementpContent that causes overflow when added repeatedly. /ppContent that causes overflow when added repeatedly. /ppContent that causes overflow when added repeatedly. /p/divscriptvar element document.getElementById(myElement);console.log(offsetWidth: element.offsetWidth , offsetHeight: element.offsetHeight);console.log(clientWidth: element.clientWidth , clientHeight: element.clientHeight);console.log(scrollWidth: element.scrollWidth , scrollHeight: element.scrollHeight);/script
/body
/html18. 检测浏览器版本版本有哪些方式 navigator.userAgent: 可以通过 navigator.userAgent 属性获取包含了浏览器信息的用户代理字符串。通过解析这个字符串可以获取到浏览器的名称和版本信息。例如可以使用正则表达式匹配某些关键字来判断浏览器类型和版本。 navigator.appVersion: 类似于 navigator.userAgentnavigator.appVersion 属性也提供了浏览器的版本信息。通常结合 navigator.appName 和 navigator.appVersion 来判断浏览器类型和版本。 navigator.platform: navigator.platform 属性返回用户操作系统的平台信息。结合浏览器类型和版本信息可以更准确地判断浏览器版本。 Feature Detection: 使用特性检测来检测浏览器是否支持某些特定的功能或属性。根据不同浏览器对特性的支持程度来推断浏览器版本。例如检测某些新特性、API 或 CSS 属性在不同浏览器中的支持情况。 JavaScript 库: 使用现有的 JavaScript 库如 Modernizr来检测浏览器版本和支持的特性。这些库会处理复杂的浏览器兼容性问题让开发者更方便地编写跨浏览器兼容的代码。 HTTP 请求头: 在服务器端获取浏览器版本信息可以从 HTTP 请求头中读取 User-Agent 字段其中包含了浏览器信息。 19. 元素节点、文本节点、属性节点的nodeType、nodeName、nodeValue分别是什么
节点类型nodeTypenodeNamenodeValue元素节点1元素的标签名null文本节点3“#text”文本内容属性节点2属性的名称属性的值 20. HTTP 请求的时候 get 和 post 方式的区别 数据位置GET 请求将请求参数放在 URL 的查询字符串中而 POST 请求则将请求参数放在请求实体(body)中。因此GET 请求会将请求参数暴露在 URL 中而 POST 请求相对更安全。 安全性由于 GET 请求将请求参数暴露在 URL 中因此 GET 请求不适合传输敏感信息因为这些信息可能被记录在浏览器历史记录、服务器日志等地方。而 POST 请求的请求参数是包含在请求体中的相对来说更安全。 幂等性GET 请求是幂等的也就是说对同一个 URL 的多次请求得到的结果是一样的。而 POST 请求则不一定是幂等的因为可以在请求体中传递不同的内容。 缓存GET 请求可以被缓存而 POST 请求不能被缓存。因为 GET 请求的请求参数在 URL 中所以浏览器可以根据 URL 缓存请求结果而 POST 请求的请求参数在请求体中无法缓存请求结果。 传输大小由于 GET 请求将请求参数放在 URL 中所以 URL 的长度有限制因此 GET 请求能够传输的数据量较小。而 POST 请求将请求参数放在请求体中没有 URL 长度限制能够传输大量数据。
综上GET 请求适合请求数据量较小、安全性要求不高、幂等性要求高、需要缓存的场景。而 POST 请求适合请求数据量较大、安全性要求较高、幂等性要求不强、不需要缓存的场景。 收工 2024-02-12 08:02
