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 获取到的值都是字符串类型。在处理这些值时,可能需要进行类型转换或其他逻辑处理。