Javascript DOM操作

最新推荐文章于 2023-05-12 23:13:44 发布

hui_010

最新推荐文章于 2023-05-12 23:13:44 发布

阅读量329

点赞数

本文链接：https://blog.csdn.net/hui_010/article/details/75531200

版权

何为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()

hui_010

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript DOM操作

何为DOM文档对象模型。赋予js操作节点的能力。当网页被加载时，浏览器会创建页面的兼容性：浏览器支持情况：IE 10% chrome 60% FF 99%函数的定义：有名函数、无名函数自定义函数、系统函数函数的调用参数： 1.形参=变量有参函数 2.实参有参函数DOM应用1、创建DOM元素lcreateElement(标签名) 创建一个节点 lappe
复制链接

扫一扫