javascript里若已知元素id,通过什么方法活得这个元素对象

JavaScript09

javascript里若已知元素id,通过什么方法活得这个元素对象,第1张

兼容写法：

document.getElementById('元素id')

高级浏览器写法(支持>=IE8,及其他浏览器)：

document.querySelector('#元素id')

我有一个想法就是首先遍历该集合,然后将id替换成有序的索引

for（var i = 0 ,i<list.length ,i++）{

list[i].id=i

}

通过该id的索引可以很方便的找出数组中对应的变量，

list[对象.id]

这样做适合于大量数据查找对应属性的操作，只需要遍历一遍，后续的所有查找动作都可以通过索引直接完成。

经过本人测试

find方法比直接遍历慢十倍，比直接通过索引查询慢一百倍，

综上，还不如直接用遍历来的快些！

测试代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<p>点击按钮返回符合大于输入框中指定数字的数组元素。</p>

<p>最小年龄: <input type="number" id="ageToCheck" value="18"></p>

<button onclick="myFunction()">find方法点我</button>

<button onclick="Fun()">遍历方法点我</button>

<button onclick="FunIndex()">直接找的方法</button>

<p>值: <span id="demo"></span></p>

<p><strong>注意:</strong> IE 11 及更早版本不支持 findIndex() 方法。</p>

<script>

//测试结果很现实，遍历比find要快太多

var ages = []

for(var i =0 i<1000000i++){

ages.push(i)

}

function checkAdult(age) {

return age == document.getElementById("ageToCheck").value

}

function myFunction() {

var start = new Date().getTime()

document.getElementById("demo").innerHTML = ages.find(checkAdult)

console.log("find查找耗时 ：" +(new Date().getTime()-start))

}

function Fun() {

var start = new Date().getTime()

var value = document.getElementById("ageToCheck").value

for(var i =0  i<ages.length i++){

if(i==value){

document.getElementById("demo").innerHTML =i

console.log("直接遍历耗时 ：" +(new Date().getTime()-start))

return

}

}

}

function FunIndex(){

var start = new Date().getTime()

document.getElementById("demo").innerHTML =ages[document.getElementById("ageToCheck").value]

console.log("数组索引查找耗时 ："+(new Date().getTime()-start))

}

</script>

</body>

</html>

测试结果如下：