master

分支 (1)

管理

管理

master

front-end-development-learning
/
6 dom.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom</title>
</head>
<body>
<!-- HTML结构 -->
<!-- HTML结构 -->
<ol id="test-list">
    <li class="lang">Scheme</li>
    <li class="lang">JavaScript</li>
    <li class="lang">Python</li>
    <li class="lang">Ruby</li>
    <li class="lang">Haskell</li>
</ol>

<script>
    var list = document.getElementById("test-list");
    var ch = list.children;
    // Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。
    var arr = Array.from(ch);
    console.log(ch);
    console.log(arr);
    let lis = document.getElementsByClassName("lang");
    // Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的新数组
    let lisArr = Array.from(lis,item=>item.innerText);
    console.log(lis,lisArr)
    lisArr.sort();
    arr.map((value,i)=>{value.innerText=lisArr[i]})
</script>
</body>
</html>