摘要：什么是DOM？1.文档对象模型2.可操作的HTML/XML文档3.HTML中的DOM树4.文档节点，即node类型，每个节点都是node节点对象。如何选择元素？1. <div id="item1"></div>let item1 = document.getElementById('item1');let 声明 item1 变
什么是DOM？
1.文档对象模型
2.可操作的HTML/XML文档
3.HTML中的DOM树
4.文档节点，即node类型，每个节点都是node节点对象。
如何选择元素？
1. <div id="item1"></div>
let item1 = document.getElementById('item1');
let 声明 item1 变量名 = 获取ID属性选择器;
2. <input type="text" name="login">
let login = document.getElementsByName('login')[0];
获取元素的name属性选择，那么这里[0]是相当于数组下标，dom皆为
数组，也就是说每个dom都是数组集合！
3. <span>标签选择器</span>
let oSpan = document.getElementsByTagName('span')[0];
通过san标签名称的选择器
4. <p class="plus"></p>
let large = document.getElementsByClassName('plus')[0];
（1-4）种控制css属性操作基本相同
方法一 以1.为例子 ：item1.style.background = "green";//设置绿色背景
方法二 item1.style.cssText="color:green;background:cyan";//设置背景色和颜色
5. css选择器来选择;
<ul id="ul"><li class="green"></li></ul>
//我们选择页面元素的时候,大多使用css选择器来获取元素,例如
// .red 获取 class="green"的元素,其实js也支持使用css选择器获取元素
let lists = document.querySelectorAll('li');
//获取lists[0]数组下标0，将其设置背景色
lists[0].style.backgroundColor = 'coral';
//获取到lists[1]数组下标1设置颜色也就是说第二个li将设置背景色
lists.item(1).style.backgroundColor = 'lightblue';
//该方法还可以在元素上调用,这也根据标签和class类名获取元素是一样的
let ul = document.querySelector('#ul'); // 获取满足条件的第一个元素
let li = ul.querySelectorAll('.green');
for (let i = 0; i < li.length; i++) {
li[i].style.backgroundColor = 'green';
}
创建dom：
<p id="demo">单击按钮创建button元素</p>
<button onclick="myFunction()">点我</button>
function myFunction(){
var btn=document.createElement("BUTTON");
document.body.appendChild(btn);
};
插入dom:
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p id="demo">插入dom元素</p>
<button onclick="myFunction()">插入</button>
function myFunction(){
var node=document.createElement("LI");
var textnode=document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
删除dom:
<ul id="myList"><li>项目1</li><li>项目2</li><li>项目3</li></ul>
<p id="demo">您将删除当前项目哦</p>
<button onclick="myFunction()">试一下</button>
function myFunction()
{
var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);
}
更新dom：
<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
<p id="demo">点击按钮来替换列表中的首个项目。</p>
<button onclick="myFunction()">试一下</button>
function myFunction()
{
var textnode=document.createTextNode("恭喜您更新成功！");
var item=document.getElementById("myList").childNodes[0];
item.replaceChild(textnode,item.childNodes[0]);
}
批改老师：韦小宝批改时间：2019-01-09 09:29:13
老师总结：js对dom的操作还是很好玩的 , 甚至可以自己做一些动画 , 想要使用js来完成dom操作最重要的还是对选择器的掌握
