DOM的解析

最新推荐文章于 2022-03-09 15:26:42 发布

蒙家军

最新推荐文章于 2022-03-09 15:26:42 发布

阅读量173

点赞数

分类专栏： js-DOM 文章标签： DOM

本文链接：https://blog.csdn.net/mjj530069829/article/details/75316756

版权

js-DOM 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

js构成：

ECMAScript：解析器 this 我 010101

DOM:文档对象模型：赋予js操控节点的能力：删除节点，新建节点，插入节点

BOM:浏览器对象模型：赋予js操控浏览器窗口的能力：弹窗、关闭窗口、打开新窗口、获取网址 fireBug

页面是怎么加载的？

本地发送请求

响应：把找到的页面内容加载到本地，渲染

页面性能怎么提高？

代码整合，大图切小，js延时异步加载

1.对节点的操作：查找节点、创建节点、删除节点、替换节点、复制节点、包裹节点、插入节点

2.属性的操作：添加属性、修改属性、删除属性（class：添加样式名，删除样式名，替换样式名）

3.对节点值的操作：普通的节点 innerHtml input value

以下实例与自我操纵多了，可以看出，DOM也是与缺点的，因为代码加载上从上往下的，如果外部文件太多，太大，加载速度慢，出现页面空白 img，那么就可以进行改变，比如使用切小图或者简化代码等，如果谁有其他的方法，望留言一起讨论，谢谢！

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
height: 80px;
line-height: 80px;
border-bottom: 1px dashed #d8d8d8;
}
#box{
margin: 50px;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var oTex=document.getElementById('tex');
var oBtn=document.getElementById('btn');
var oList=document.getElementById('list');
var aLis=oList.getElementsByTagName('li');
// console.log(aLis.length);
oBtn.οnclick=function(){
if(oTex.value){
var oLi=document.createElement('li');
oLi.innerHTML=oTex.value;
// console.log(aLis.length);
if(aLis.length){
oList.insertBefore(oLi,aLis[0]);
}
else{
oList.appendChild(oLi);
}

oTex.value='';
}
else{
alert('请输入内容再提交');

}
}
}
</script>
</head>
<body>
<div id="box">
<textarea id="tex" name="" rows="5" cols="50"></textarea>
<input type="button" name="" id="btn" value="提交" />
<ul id="list">

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