javascriptDOM
作者：互联网
DOM简介
1文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口，可以通过DOM接口改变网页的内容、结构和样式。\
1.2Dom树状图
1.2.1文档：一个页面就是一个文档，DOM中使用document表示
1.2.2元素:页面中的所有的标签都是元素，DOm中使用element表示
1.2.3节点:网页中所有的元素都是节点，DOM中使用node表示
获取元素
1.根据元素的id获取
1.1使用getelementById（）进行获取元素对象
基本语法为：
<body>
<div id="time"></div>
<script>
// 1.get获取 element元素 by通过 驼峰命名法
//2参数id是大小写敏感的字符串
//3返回元素是一个对象objcet
var timer=document.getElementById('time')
console.log(timer);
</script>
</body>
2.根据标签的名获取
2.1使用getelementsByTagName（）方法可以返回带有指定标签的对象集合
<body>
<ol>
<li>燕子，没有你我怎么活啊</li>
<li>燕子，没有你我怎么活啊</li>
<li>燕子，没有你我怎么活啊</li>
<li>燕子，没有你我怎么活啊</li>
<li>燕子，没有你我怎么活啊</li>
</ol>
<script>
//1返回的是获取过来的元素对象的集合，以伪数组的形式存储的，如果页面中没有对应的元素直接返回[]空的伪数组
var listEBT=document.getElementsByTagName('li')
console.log(listEBT);
</script>
</body>
3.通过html5新增的方法获取
3.1getElementsByClassName根据类名获得某些元素的集合
<body>
<div class="box">盒子</div>
<div class="box">盒子</div>
</body>
<script>
//1getElementsByClassName根据类名获得某些元素的集合
var getBox=document.getElementsByClassName('box')
console.log('getBox');
</script>
3.2document.querySelector('选择器')根据指定选择器返回第一个元素对象
<body>
<div class="box">盒子</div>
<div class="box">盒子</div>
<div id="nav">
<li>首页</li>
<li>我的</li>
</div>
</body>
<script>
//querySelector返回指定选择器的第一个元素对象切记里面的选择器需要加符号.box,#nav
var boxs= document.querySelector('.box')
console.log(boxs);
</script>
3.3querySelectorAll()返回指定选择器的所有元素的集合
<body>
<div class="box">盒子</div>
<div class="box">盒子</div>
<div id="nav">
<li>首页</li>
<li>我的</li>
</div>
</body>
<script>
//querySelectorAll()返回指定选择器的所有元素的集合
var listBox =document.querySelectorAll('.box')
console.log(listBox);
</script>
4.特殊元素获取
4.1获取body元素
<body>
<script>
//获取body元素
var bodyEle=document.body;
console.log(bodyEle);
</script>
</body>
4.2获取html元素
<script>
//获取body元素
var htmlEle=document.documentElement;
console.log(htmlEle);
</script>
标签：console,log,元素,javascriptDOM,获取,var,document 来源： https://www.cnblogs.com/WMZY/p/16124808.html