郭青青_2021.01.15-郭青青

Friday,January,15th

知识点总结

HTML DOM编程

Document Object Model 文档对象模型,用于操作网页中元素

DOM 节点

在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。

根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

DOM 方法

这里提供一些您将在本教程中学到的常用方法:

方法 描述
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。

DOM 属性

属性是节点(HTML 元素)的值,您能够获取或设置。

innerHTML 属性

获取元素内容的最简单方法是使用 innerHTML 属性。

innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

nodeValue 属性

nodeValue 属性规定节点的值。

  • 元素节点的 nodeValue 是 undefined 或 null
  • 文本节点的 nodeValue 是文本本身
  • 属性节点的 nodeValue 是属性值

nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

DOM 访问

访问 HTML DOM - 查找 HTML 元素

访问 HTML 元素(节点)

访问 HTML 元素等同于访问节点

您能够以不同的方式来访问 HTML 元素:

  • 通过使用 getElementById() 方法
  • 通过使用 getElementsByTagName() 方法
  • 通过使用 getElementsByClassName() 方法

getElementById() 方法

getElementById() 方法返回带有指定 ID 的元素引用:

语法:

node.getElementById("id");

getElementsByTagName() 方法

getElementsByTagName() 返回带有指定标签名的所有元素。

语法:

node.getElementsByTagName("tagname");

DOM 修改

修改HTML=改变元素、属性、样式和事件

修改 HTML 元素

修改 HTML DOM 意味着许多不同的方面:

  • 改变 HTML 内容
  • 改变 CSS 样式
  • 改变 HTML 属性
  • 创建新的 HTML 元素
  • 删除已有的 HTML 元素
  • 改变事件(处理程序)

创建 HTML 内容

改变元素内容的最简单的方法是使用 innerHTML 属性。

改变 HTML 样式

通过 HTML DOM,您能够访问 HTML 元素的样式对象

创建新的 HTML 元素

如需向 HTML DOM 添加新元素,您首先必须创建该元素(元素节点),然后把它追加到已有的元素上。

DOM 事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应。

对事件做出反应

HTML事件的例子:

  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图片已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当 HTML 表单被提交时
  • 当用户触发按键时

HTML 事件属性

向 button 元素分配一个 onclick 事件:

<button onclick="displayDate()">点我</button>

使用 HTML DOM 来分配事件

document.getElementById("myBtn").onclick=function(){displayDate()};

onmouseover 和 onmouseout 事件

JavaScript(JS)

JavaScript概述

JavaScript的历史

ECMAScript 起源

JavaScript 是脚本语言

JavaScript的语法组成

浏览器支持

JavaScript的基础语法

JavaScript的编写方式

JavaScript中的几个概念

基本词法
区分大小写

心得体会

使用HTML DOM编程语言编写了物品的选购和价格的结算实例、关于事件监听实例、鼠标放上去和离开实例,老师讲述和实操之后,实现了这些实例,感受了一下JavaScript语言魅力,

经过在云创动力一周的学习之后,学到了很多相关专业知识,同时也学到了很多关于生活中的常识。和待了两年多的兰州比起来,对西安的爱还是偏多一点。希望有机会去参观一下钟楼、鼓楼、兵马俑;去浪一圈不夜城,还有回民街。

······。

标签

评论


© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1