发表于: 2020-07-14 19:44:25

1 2352


今天完成的事情:

1.进行方案设计


明天计划的事情:

1.进行方案设计


遇到的问题和收获:


常见的dom操作

DOM是一套对文档的内容进行抽象和概念化的方法

DOM的定义则是由W3C所制定的标准,定义为"一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态地访问和修改文档的内容、结构和样式。

DOM是针对于HTML和XML文档的一个API(应用程序编程接口)。是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 在DOM中,可以将任何HTML或者XML的文档描绘成一个由多层节点构成的结构

什么是DOM (文档对象模型)

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的A所有事件做出反应

查找 HTML 元素

通过 id 找到 HTML 元素

通过标签名找到 HTML 元素

通过类名找到 HTML 元素

节点

文档是由节点构成的集合,只不过此时的节点是文档树上的树枝和树叶而已

元素节点

DOM中的原子就是元素节点。

我们在编写时,会用到诸如<body>、<head>、<p>这些元素。如果把Web上的文档比作一座大厦,那么元素就是建造这座大厦的砖块,这些元素在在文档中的布局形成了文档的结构。元素可以包含其他的元素,在我们所看到的页面页中,内容都被包含在在一个<section>元素的内部。而唯一没有被包含在其他元素中的唯一元素是'<html>',他和我们的节点树的根元素,其他的所有元素都被包含在'<html>'中。

属性节点

属性节点用来对元素做出更具体的描述。例如,几乎所有的元素都有一个title属性,而我们可以利用这个属性对包含在元素里的东西做出准确的描述:'<p title="a gentle reminder">这是一个带有温馨提示的p标签</p>'

   在DOM中,title="a gentle reminder"是一个属性节点。因为属性总是被放在起始标签里,所以属性节点总是被包含在元素节点中。并非所有的标签都包含着属性,但是所有的属性都被元素包含。

获取DOM

   通过使用 getElementById() 方法匹配元素的id属性来访问元素节点,对元素节点进行操作

   通过使用 getElementsByTagName() 方法匹配元素的tagName来访问元素节点,对元素节点进行操作

   通过使用 getElementsByClassName() 方法匹配元素的className来访问元素节点,对元素节点进行操作

   值得注意的是, getElementsByTagName() 和 getElementsByClassName() 这两种方法因为其访问的是节点中的可能为复数的属性,所以得到的会是一个以数组的形式来体现出来的元素节点集合,我们可以通过打印获取到的DOM节点来判断类型

DOM事件

   onclick事件---当用户点击时执行

   onload事件---当用户进入时执行

   onunload事件---用用户离开时执行

   onmouseover事件---当用户鼠标指针移入时执行

   onmouseout事件---当用户鼠标指针移出时执行

   onmousedown事件---当用户鼠标摁下时执行

   onmouseup事件---当用户鼠标松开时执行

小课堂相关内容




返回列表 返回列表
评论

    分享到