JavaScript学习笔记之DOM操作（上）

最新推荐文章于 2024-10-02 05:39:15 发布

༒^O^

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量180

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Zero_xj/article/details/107920423

版权

一. DOM基础
1.定义
HTML DOM即Document Object Model for HTML，通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。

HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。
2.DOM节点

<body>
    <ul id="ul1">
        <li>
           <span>fjkgh</span>
        </li>
        <li></li>
    </ul>
</body>  //上面代码：li是ul的子节点，body是ul的父节点

*子节点《==========================================》父节点

*children获取子节点 parentNode获取父节点，offsetParent获取元素用来定位的父级

*首尾节点

firstChild(低版本浏览器）/firstElementChild(高版本浏览器）:获取第一个子节点

lastChild(低版本浏览器）/lastElementChild(高版本浏览器）:获取第一个子节点

3.操作元素属性

方法一： oTxt.value='dfhgkhda';

方法二： oTxt['value']='jflkjgla';

方法三：Dom方式

获取：getAttirbute(名称) 设置：setAttribute('名称','值') 删除：removeAttribute(名称)

二.DOM操作

1.创建Dom元素

createElement(标签名）创建一个节点

appendChild(节点）追加一个节点

例子：文本输入后，点击按钮久创建一个内容是输入文本的li

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js的DOM知识</title>
    <script>
        window.onload =function(){
            var ouL = document.getElementById('ul1');
            var tex = document.getElementById('tex1');
            var oBtn = document.getElementById('btn1');
            oBtn.onclick=function(){
                //添加元素
                var oLi=document.createElement('li');
                oLi.innerHTML=tex.value;
                //父级.appendChild(子节点)
                ouL.appendChild(oLi);
            };
        };
    </script>
</head>
<body> 
    <input id="tex1" type="text"/>
    <input id="btn1" type="button" value="船舰li"/>
    <ul id="ul1">

    </ul>
</body>
</html>

2.插入元素

insertBefore(节点,原有节点)

例子：倒序插入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js的DOM知识</title>
    <script>
        window.onload =function(){
            var ouL = document.getElementById('ul1');
            var tex = document.getElementById('tex1');
            var oBtn = document.getElementById('btn1');
            oBtn.onclick=function(){
                //添加元素
                var oLi=document.createElement('li');
                var aLi=ouL.getElementsByTagName('li');
                //给li加内容
                oLi.innerHTML=tex.value;  
                if(aLi.length>0){
                    //父级.insertBefore(节点,原有节点)---->往前面排
                    ouL.insertBefore(oLi,aLi[0]);
                }else{
                    //父级.appendChild(子节点)---->往后面排
                    ouL.appendChild(oLi);
                }
            };
        };
    </script>
</head>
<body> 
    <input id="tex1" type="text"/>
    <input id="btn1" type="button" value="船舰li"/>
    <ul id="ul1">

    </ul>
</body>
</html>

3.删除元素

父级.removeChild(子节点）删除一个节点

例子：点击a标签删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js的DOM知识</title>
    <script>
        window.onload =function(){
            var ouL = document.getElementById('ul1');
            var oA = document.getElementsByTagName('a');
            for(var i=0;i<oA.length;i++){
                   oA[i].onclick=function(){
                       ouL.removeChild(this.parentNode);
                   }
            }
        };
    </script>
</head>
<body> 
    <ul id="ul1">
        <li>hkghkhjfk <a href="javascript:;">删除</a></li>
        <li>hkghkhjfk <a href="javascript:;">删除</a></li>
        <li>hkghkhjfk <a href="javascript:;">删除</a></li>
        <li>hkghkhjfk <a href="javascript:;">删除</a></li>
        <li>hkghkhjfk <a href="javascript:;">删除</a></li>
    </ul>
</body>
</html>

4.文档碎片

文档碎片可以提高DOM操作性能，主要针对低级浏览器，高级浏览器用处不大，

创建文档碎片document.creatDocumentFragment

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js的DOM知识</title>
    <script>
        window.onload =function(){
            var ouL = document.getElementById('ul1');
            var oFrag=document.createDocumentFragment();
            for(var i=0;i<1000;i++){
                var oLi=document.createElement('li');
                oFrag.appendChild(oLi);
            }
            ouL.appendChild(oFrag);
        };
    </script>
</head>
<body> 
    <ul id="ul1">
    </ul>
</body>
</html>