DOM 全名是 Document Object Model(文档对象模型)
在DOM中有一个功能,那就是节点,也就是DOM中的“M”,元素结构就是通过这种节点来互相对应着的,我们只需要通过这些节点关系,可以创建、 插入、替换、克隆、删除等等的元素操作。
在HTML结构页面添加一个元素标签,在添加之前要做的是:创建节点。
1.JavaScript创建节点
1.创建元素 document.createElement()
2.为节点添加一下属性 element.setAttribute();
3.可以使用innerText或则innerHTML属性添加文本或则HTML内容
4.使用parentElement.appendChild()方法将新创建的节点添加到父节点中
创建DIV节点
给创建的节点添加class属性
给创建的节点添加HTML内容
将节点添加到body元素中
2.jQuery创建节点
jQuery节点的创建:
(
)
函
数
处
理
,
()函数处理,
()函数处理,(“html结构”)
jQuery创建的节点是一个jQuery对象
添加属性与文本内容
通过jQuery中的append()方法将新创建的节点添加到body元素中
从DOM中删除所有匹配的元素
这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。
与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来
$(“div”).detach()这一句会移除对象,仅仅是显示效果没有了,但是内存中还是存在的。当你append之后,又重新回到了文档流中。就又显示出来了。
HTML DOM 事件
1.鼠标的操作事件:
Onclick:当鼠标点击到某个对象时所调用的事件。
ondblclick 当鼠标双击到某个对象时所调用的事件。
Oncontextmenu:操作鼠标点击右键打开菜单时触发
Onmousedown:操作鼠标按钮按下。
Onmouseup:操作鼠标按钮按下后的松开。
Onmouseover:操作鼠标移动到元素中。
Onmouseout:操作鼠标从元素中移出。
2.键盘的操作事件:
Onkeydown:操作键盘中某一个按钮按下。
Onkeyup:操作键盘中某一个按钮松开。
Onkeypress:操作键盘按钮按下后的松开。
DOM 全名是 Document Object Model(文档对象模型)
最新推荐文章于 2021-10-11 15:55:25 发布