Javascript DOM操作

来源：互联网发布：js滚轮放大缩小拖动编辑：程序博客网时间：2024/05/21 06:36

何为DOM

文档对象模型。赋予js操作节点的能力。当网页被加载时，浏览器会创建页面的

兼容性：浏览器支持情况：IE 10% chrome 60% FF 99%

函数的定义：

有名函数、无名函数

自定义函数、系统函数

函数的调用

参数： 1.形参=变量有参函数
2.实参

有参函数

DOM应用

1、创建DOM元素

lcreateElement(标签名) 创建一个节点
lappendChild(节点) 追加一个节点
l例子：为ul插入li

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){    var oBtn=document.getElementById('btn1');    var oUl=document.getElementById('ul1');    oBtn.onclick=function ()    {        var oLi=document.createElement('li');        //父级.appendChild(子节点);        oUl.appendChild(oLi);    };};</script></head><body><input id="btn1" type="button" value="创建li"/><ul id="ul1"></ul></body></html>

想节点有值：加一个文本表单

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){    var oBtn=document.getElementById('btn1');    var oUl=document.getElementById('ul1');    var oTxt=document.getElementById('txt1');    oBtn.onclick=function ()    {        var oLi=document.createElement('li');        oLi.innerHTML=oTxt.value;        //父级.appendChild(子节点);        oUl.appendChild(oLi);    };};</script></head><body><input id="txt1" type="text"/><input id="btn1" type="button" value="创建li"/><ul id="ul1"></ul></body></html>

2、插入DOM元素
linsertBefore(节点, 原有节点) 在已有元素前插入

3、删除DOM元素

lremoveChild(节点) 删除一个节点

4、文档碎片：类似一个临时的文档，要所有要加的dom元素先放在这里，达
到不要每次操作dom元素提高页面效率

        1.文档碎片可以提高DOM操作性能(理论上)        2.文档碎片原理        3.document.createDocumentFragment()

阅读全文

0 0