dom是什么意思_dom属性是什么意思?


  • 掌握基本属性的运用
  • 理解并区分 textContent 和 innerHTML 的功能
  • 掌握表单元素属性的使用
  • 熟练运用自定义属性
  • 能够实现相册案例的制作
  • 能够完成登录验证功能的编码
  • 能够完成注册页面同意协议单选框的交互逻辑
  • 实现小图切换大图的功能

基本属性指的是 HTML 标签本身所具备的属性,这些属性在浏览器将 HTML 文档解析为 DOM 树时,会自动设置为 DOM 树中元素节点的属性。

常用基本属性包括:href、title、id、src等。

获取或设置基本属性的语法和步骤如下:

  • 获取元素属性的值。
  • 设置元素属性的值。
  • 获取或设置标签之间的文本内容。

关于 textContent 和 innerHTML 的区别,前者获取的内容中 HTML 标签会被忽略,而设置的内容中包含 HTML 标签会直接显示;而后者获取的内容中包含 HTML 会返回标签和内容,设置的内容中包含 HTML 标签,标签会被渲染。

在网页中有一些特殊的符号,如 <、>等,要显示这些符号需进行转义,即使用 HTML 实体。

关于需求部分的详细操作:

  • 获取一组 a 元素。
  • 获取 id 为 des 的 p 元素。
  • 遍历所有的 a 元素,注册 click 事件。
  • 获取当前点击的 a 的 title 值并赋给 p 的 textContent。
  • 阻止 a 标签的默认行为。

注意:在给 a 元素注册点击事件时,若 a 元素设置了 href 属性,触发 a 的点击事件后还会继续执行其 href 属性的跳转。若想阻止这一默认行为,可在事件处理函数中使用 return false 或 event.preventDefault()。

对于表单元素的验证,需要获取用户输入的内容,这就要用到表单元素的属性,如 value、type、disabled、checked 等。

关于其他需求,如验证用户协议是否同意、用户名长度及密码长度的要求等,都需要通过 JavaScript 进行逻辑判断和操作。

对于自定义属性和标准属性的操作,除了使用传统的 getAttribute()、setAttribute() 和 removeAttribute() 等方法外,HTML5 还引入了以 "data-" 开头的自定义属性,可通过 element.dataset 来方便地获取或设置。

注意:无论是自定义属性还是标准属性,通过 JavaScript 获取到的值都是字符串类型。在处理这些值时,可能需要进行类型转换或其他逻辑处理。