DOM入门

最新推荐文章于 2024-09-21 17:56:48 发布

weixin_33753003

最新推荐文章于 2024-09-21 17:56:48 发布

阅读量58

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/yxmBetter/blog/829524

版权

2019独角兽企业重金招聘Python工程师标准>>>

DOM入门

JavaScript分三个内容:

ECMAScript标准
DOM---Document Object Model
BOM---

DOM是什么?

文档对象模型:整个页面看成是文档,页面中所有的html标签及节点(空白)。
把页面中的标签看成是对象,最终演变成了一个节点树的模型---树状图。
DOM的作用:操作页面元素。
HTML:作用:展示页面的内容
XML:作用:侧重于存储数据
API:可以理解成是一组操作页面封装好的的方法(工具)
document:看成页面中的顶级对象

操作DOM元素

在这之前，以一个小例子看一下，比如页面中有一个div标签和一个input为button的按钮，

var btnObj=document.getElementById("btn");
    //btnObj看成是触发这个事情的事件源
    //onclick看成是事件的名字
    //匿名函数看成是事件处理的函数
    btnObj.onclick=function () {
        alert("这才是以后经常写代码的方式");
    };

解释：

document.getElementById是一个方法，通过它可以获取到页面中id名为'btn'的元素，此处我们就获取到了input的那个按钮;
onclick 是事件名，function是事件处理函数，我们就是使用为btn元素添加一个单击事件，单击后触发函数内需要执行的代码。

注意点

一般html中的标签都可以添加一个事件,这个事件都可以执行一个函数
除了上面所说的onclick外，还有其他的事件，比如onkeyup,onkeydown,onfocus...
如果html标签中属性和值是一样的，那么在DOM操作中，设置该属性的值应为布尔类型（disabled='disabled' 在DOM中,disabled=true）
如果style中的属性在css设置中是多个单词组合，中间有-的，在js中写代码的时候，把-去掉，后面单词的首字母大写
修改style里的样式，都需要.style
a超链接中取消默认的点击事件：return false
设置元素很多的属性值：设置元素的类样式，设置时用className而不是class