JS BOM 和 DOM 学习第二天 (下)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d4ed4010e6888447fab0aa504120296c.png#pic_center)
1. 创建元素的效率对比示例
1.1 innerHTML字符串拼接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
</div>
<script>
var d1=new Date();
var div=document.querySelector('div');
for(var i=0;i<1000;i++){
div.innerHTML+='<a href="#">666</a>';
}
var d2=new Date();
console.log(d2-d1);
</script>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7f9a3f39f6c7025debf78fda60c133d4.gif#pic_center)
1.2 innerHTML数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
</div>
<script>
var d1=new Date();
var div=document.querySelector('div');
var arr=[];
for(var i=0;i<1000;i++){
arr.push('<a href="#">666</a>');
}
div.innerHTML=arr.join('');
var d2=new Date();
console.log(d2-d1);
</script>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/af25325accc197778c58d0612ed94f9c.gif#pic_center)
1.3 creatElement 效率
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
</div>
<script>
var d1=new Date();
var div=document.querySelector('div');
for(var i=0;i<1000;i++){
var a=document.createElement('a');
a.innerHTML='666';
a.href='#';
div.appendChild(a);
}
var d2=new Date();
console.log(d2-d1);
</script>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a5f5f5584bd7c86c60c604ba02219d84.gif#pic_center)
总结
- 不同浏览器下,innerHTML效率比creatElement效率高
2. Dom重点核心
2.1 创建
- document.write
- innerHTML
- createElement
2.2 增
2.3 删
2.4 改
- 修改元素属性:src,href,title
- 修改普通元素内容:innerHTML,innerText
- 修改表单元素:value,type,disabled
- 修改元素样式:style,className
2.5 查
- DOM的API:getElementById,getElementByTagName(不提倡)
- h5新增方法:querySelector,querySelectorAll(提倡)
- 利用节点操作:父(parentNode),子(childeren),兄(previousElementSibling,nextElementSinling)
2.6 属性操作
- setAttribute():设置DOM属性
- getAttribute():获取DOM属性
- removeAttribute():删除DOM属性
事件操作