HTML --DOM模型（基础）

HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。如下图

AA65CE2D-511A-4BD0-BFC0-974858A70246.png

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

通过id去获取元素:document.getElementById

 
 通过id方法来改变我的内容哦

上面例子中点击按钮调用JS方法通过元素的id获取到元素，然后改变它的内容

通过标签名获取所有的标签，document.getElementsByTagName.例子如下

 
 

 Hello World!

 什么鬼东西啊

改变HTML属性:document.getElementById(id).attribute=new value
如下例子，点击按钮替换img的src属性

 
 

 ![](https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1474525644&di=d19c63d9d54b7a38491c4db1ba1b35fc&src=http://g.hiphotos.baidu.com/image/pic/item/f3d3572c11dfa9ecfc13ccc066d0f703918fc12c.jpg)

改变 HTML 样式
document.getElementById(id).style.property=new style
例子：

Hello World!
```
 
```

使用 HTML DOM 来分配事件

 

 

 点击按钮就弹窗

onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。

    
    

    

提示框会告诉你，浏览器是否已启用 cookie。

7.onchange 事件
onchange 事件常结合对输入字段的验证来使用。

输入小写字母变大写

8.onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数




鼠标移动到我上面，或者移走都会有不能的效果

9.onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

 


请点击这里

10 . 创建新的 HTML 元素
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

  不好意思我需要自己去实现



很明显这是一个标签
这是第二个标签

11.删除已有的HTML元素
如需删除 HTML 元素，您必须首先获得该元素的父元素



我是段落1
我是段落2

11、获取浏览器内部窗口的宽高(不包括内滚动条/工具栏)

点击下面的按钮获取窗口的宽高

HTML --DOM模型（基础）

HTML DOM （文档对象模型）

你可能感兴趣的:(HTML --DOM模型（基础）)