核心、
浏览器网页就是一个DOM树型结构
- 更新DOM节点
- 遍历DOM节点：得到DOM节点
- 删除DOM节点
- 添加DOM节点
要操作一个DOM节点，必须要先获得这个DOM节点
获得DOM节点
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//对应css选择器
var h1= document.getElementsByTagName('h1');
var p1=document.getElementById('p1');
var p2=document.getElementsByClassName('p2');
var father=document.getElementById('father');
var children=father.children;//获取父节点下所有子节点
//father.firstChild
//father.lastChild
</script>
</body>
这是原生代码，之后我们尽量用jQuery();
更新DOM节点
<body>
<div id="id1"></div>
<script>
var id1=document.getElementById('id1');
</script>
</body>
-
修改文本的值
-
可以解析HTML文本标签
-
操作css
删除DOM节点
删除节点的步骤：先获取父节点，再通过父节点删除
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p> <!-- 如何将这个DOM节点删除？-->
<p class="p2">p2</p>
</div>
<script>
var father=p1.parentElement;//获得p1的父节点 注意此处不是方法是属性
</script>
</body>
也可以用下标来移除：father.removeChild(father.children[0])；
插入DOM节点
- 移动
<body>
<p id="js">javaScript</p> <!-- 如何将这个DOM节点移到下面的div块中-->
<div id="list">
<p id="se">javaSE</p>
<p id="ee">javaEE</p>
<p ID="me">javaME</p>
</div>
<script>
var kk=document.getElementById('js');
var list=document.getElementById('list');
</script>
</body>
- 创建一个新节点,实现插入
<body>
<p id="js">javaScript</p>
<div id="list">
<p id="se">javaSE</p>
<p id="ee">javaEE</p>
<p ID="me">javaME</p>
</div>
<script>
var kk=document.getElementById('js');
var list=document.getElementById('list');
//通过JS创建一个新的节点
var newP=document.createElement('p');//意思是创建一个p标签
newP.id='newp';//另一种写法newP.setAttribute('id','newp');
newP.innerText='卡卡';
list.appendChild(newP);
</script>
</body>
- insert
<body>
<p id="js">javaScript</p>
<div id="list">
<p id="se">javaSE</p>
<p id="ee">javaEE</p>
<p ID="me">javaME</p>
</div>
<script>
var ee=document.getElementById('ee');
var js=document.getElementById('js');
var list=document.getElementById('list');
list.insertBefore(js,ee)//在js前插入ee
</script>
</body>