js DOM总结

最新推荐文章于 2022-07-08 20:14:46 发布

M'r白墙

最新推荐文章于 2022-07-08 20:14:46 发布

阅读量289

点赞数

分类专栏： js基础总结文章标签： DOM操作总结

本文链接：https://blog.csdn.net/baiqiangdoudou/article/details/89852100

版权

js基础总结专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、什么是DOM

DOM 是 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准：

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML文档的标准模型

DOM 是 Document Object Model（文档对象模型）的缩写。

二、 DOM节点

1、子节点和父节点

childNodes：子节点 // IE6-8
children:元素节点没有兼容问题
nodeType：节点类型
nodeType == 3 -> 文本节点
nodeType == 1 -> 元素节点

获取子节点：children
获取父节点：parentNode
获取定位元素的父元素：offsetParent

2、首尾节点和兄弟节点
首尾子节点:
firstElementChild 第一个子节点谷歌和火狐
firstChild 第一个子节点 IE6-8
lastElementChild 最后一个子节点谷歌和火狐
lastChild 最后一个子节点 IE6-8

兄弟节点:
nextElementSibling 下一个兄弟节点谷歌、火狐
nextSibling 下一个兄弟节点 IE6–8
previousElementSibling 上一个兄弟节点谷歌、火狐
previousSibling 上一个兄弟节点 IE6–8

三、操纵元素属性

1、元素属性操作
第一种：oDiv.style.display=“block”;
第二种：oDiv.style[“display”]=“block”;
第三种：Dom方式

2、DOM方式操作元素属性
获取：getAttribute(名称)
设置：setAttribute(名称：值)
删除：removeAttribute(名称)

3、className()选择元素

function getByClass(oParent, sClass)
{
	var aResult=[];
	var aEle=oParent.getElementsByTagName('*');
	
	for(var i=0;i<aEle.length;i++)
	{
		if(aEle[i].className==sClass)
		{
			aResult.push(aEle[i]);
		}
	}
	
	return aResult;
}

window.onload=function ()
{
	var oUl=document.getElementById('ul1');
	var aBox=getByClass(oUl, 'box');
	
	for(var i=0;i<aBox.length;i++)
	{
		aBox[i].style.background='red';
	}
};

四、创建、插入和删除元素

1、创建DOM元素

createElement(标签名)；   // 创建一个节点
appendChild(节点)；   // 追加一个节点

2、插入元素

insertBefore(节点，原有节点)；在已有元素前面插入

3、删除元素

removeChild(节点)；  删除子节点

五、文档碎片

文档碎片理论上是提高DOM操作性能

document.createDocumentFragment()

// 实例
 var oBtn = document.getElementById("btn");
 var oUl = document.getElementById("ul");
 var oFrg = document.createDocumentFragment();  // 文档碎片的使用

 oBtn.onclick = function(){
     for(var i = 0; i < 10000; i++){
         var aLi = document.createElement("li");
         aLi.innerHTML = i;
         oFrg.appendChild(aLi);
     }
     oUl.appendChild(oFrg)
 }

六、表格应用

1、获取：
tBodies[0]: 选择tbody元素
rows: 选择排
cells: 选择排中的单个格子
tHead:选择表头部
tFoot:选择表格底部

2、表格添加删除搜索demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
       #tab1{
          margin-bottom:30px;
          border-collapse:collapse;
          border:1px solid #333;
          width:600px;
       } 
       #tab1 tr td{
            border:none;
       }
       #tab1 tr{
           width: 100%;
       }
       #tab1 tr td,#tab1 tbody tr td{
           width: 25%;
           display: inline-block;
       }
       #tab1 tbody tr td a{
           width: 100%;
           height: 100%;
       }
    </style>
</head>
<body>
    <div style="margin-bottom:30px;">
        name: <input type="text" id="input1"/>
        age: <input type="text" id="input2" />
        <input type="button" id="btn1" value="添加">
    </div>
    

    <table border="1" id="tab1"  >
        <thead>
            <td>id</td>
            <td>name</td>
            <td>age</td>
            <td>operation</td>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>red</td>
                <td>12</td>
                <td><a href="javascript:;">del</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>yellow</td>
                <td>23</td>
                <td><a href="javascript:;">del</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>green</td>
                <td>14</td>
                <td><a href="javascript:;">del</a></td>
            </tr>
            <tr>
                <td>4</td>
                <td>gray</td>
                <td>54</td>
                <td><a href="javascript:;">del</a></td>
            </tr>
            <tr>
                <td>5</td>
                <td>blue</td>
                <td>29</td>
                <td><a href="javascript:;">del</a></td>
            </tr>
        </tbody>
    </table>

    searchName: <input type="text" id="search"/>
    <input type="button" value="search" id="search_btn"/>

    <script>
        /*
            tBodies[0]:  选择tbody元素
            rows:  选择排
            cells: 选择排中的单个格子
        */
        let oInt1 = document.getElementById("input1");
        let oInt2 = document.getElementById("input2");
        let oBtn1 = document.getElementById("btn1");
        let oTbody = document.getElementById("tab1").tBodies[0];
        let oColor = null;
        let id = oTbody.rows.length+1;
        let oSearchVal = document.getElementById("search");
        let oSearchBtn = document.getElementById("search_btn");
        let Fun = {
            colors:function(){
               for (var i = 0; i < oTbody.rows.length; i++) {
                    oTbody.rows[i].onmouseover = function () {
                        oColor = this.style.background;
                        this.style.background = "yellow";
                    }
                    oTbody.rows[i].onmouseout = function () {
                        this.style.background = oColor;
                    }
                    oTbody.rows[i].getElementsByTagName('a')[0].onclick = function(){
                        oTbody.removeChild(this.parentNode.parentNode);
                    }
                    if (i % 2 == 0) {
                        oTbody.rows[i].style.background = "#ccc";
                    } else {
                        oTbody.rows[i].style.background = '';
                    }


                    let sTabs = oTbody.rows[i].cells[1].innerHTML.toLowerCase();
                    let sSearchs = oSearchVal.value.toLowerCase();
                    let arr = sSearchs.split(' ');
                    oTbody.rows[i].style.display = "none"
                    if(sTabs.search(sSearchs) != -1){
                        for(var j = 0; j < arr.length; j++){
                            oTbody.rows[i].style.display = "block";
                        }
                    }
                }
            },
        }
        

        Fun.colors()
        
        oBtn1.onclick = function(){
            if(oInt1.value == '' || oInt2.value == ''){
                return
            }
            var oTr = document.createElement('tr');

            var oTd = document.createElement('td');
            oTd.innerHTML = id++;
            oTr.appendChild(oTd);

            var oTd = document.createElement('td');
            oTd.innerHTML = oInt1.value;
            oTr.appendChild(oTd);

            var oTd = document.createElement('td');
            oTd.innerHTML = oInt2.value;
            oTr.appendChild(oTd);

            var oTd = document.createElement('td');
            oTd.innerHTML = '<a href="javascript:;">del</a>';
            oTr.appendChild(oTd)

            oTbody.appendChild(oTr);

            oInt1.value = '';
            oInt2.value = '';
            Fun.colors();
        }
        oSearchBtn.onclick = function(){
            Fun.colors()
        }
    </script>
</body>
</html>

3、排序demo

<body>
    <button id="btn">排序</button>

    <ul id="ul">
        <li>12</li>
        <li>1</li>
        <li>23</li>
        <li>18</li>
        <li>4</li>
    </ul>

    <script>
       let oBtn = document.getElementById("btn");
       let oUl = document.getElementById("ul");

       oBtn.onclick = function(){
           let aLi = oUl.getElementsByTagName("li");
            var arr = [];
          for(var i = 0; i < aLi.length; i++){
              arr[i] = aLi[i];
          }

          arr.sort(function (li1, li2) {
               var n1 = parseInt(li1.innerHTML);
               var n2 = parseInt(li2.innerHTML);
               console.log(n1,n2)
               return n2 - n1;
          })

          for(var i = 0; i < arr.length; i++){
              oUl.appendChild(arr[i])
          }
       }
    </script>
</body>

M'r白墙

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js DOM总结

一、什么是DOMDOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”W3C DOM 标准被分为 3 个不同的部分：核心 DOM - 针对任何结构化文档的标准模型XML DOM - 针对 XML 文档的标准模型HTML ...
复制链接

扫一扫