简单阐述一下什么是DOM,DOM是文档对象模型。是一种W3C组织推荐的网页编程的接口。这个需要了解一些接口的相关知识;通俗的说,使用DOM,你就可以在JS的代码中修改HTML页的标签,和CSS的样式属性值(修改包括了,增加,删除,修改属性)。
借用上一篇博客的一部分思维导图如下:
上面的图:简单归结如下:
进行DOM操作:
1.DOM查询,查询HTML或者CSS中是否有相关的元素。如果有,把它赋值给JS的变量,通过该变量进行操作:例如:var a=document.getElementById("result"),就可以获得页面中Id名为result的HTML或者CSS元素,同样的你可以通过上图中的ByName获得页面中的Name名为“result”的元素。
2.DOM修改:通过a.方法名或者a.属性,进行相关操作。
3.DOM删除:通过a.parentNode.appendChild();增加,通过removeChild()来删除节点。其中parentNode是父节点,这个需要进一步的文档流知识。在后期的学习博客上可能会补上。
下面是一个小练习:编写一个简易计算器,通过下拉列表来选择所需做的四则运算,在点击输入框时,输入框会变黑,当输入不为数字时,不输出结果,并弹出提示