DOM
Document Object Model(文档对象模型),是W3C组织推荐的处理可拓展标记语言(HTML或者XML)的标准编程接口。
可以改变网页的内容、结构和样式
DOM树
文档:一个页面就是一个文档 document
元素:页面中的所有标签都是元素,element
节点:网页中的所有内容都是节点(标签、属性、文本、注释等),node
DOM把以上内容都看作是对象
DOM操作
获取元素
getElementById()
<body>
<div id="time">2019-9-9</div>
<script>
// 1. 因为我们文档页面从上往下加载,所以先得有标签 所以我们script写到标签的下面
// 2. get 获得 element 元素 by 通过 驼峰命名法
// 3. 参数 id是大小写敏感的字符串
// 4. 返回的是一个元素对象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
</script>
</body>
getElementsByTagName()
<body>
<ul>
<li>知否知否,应是等你好久11</li>
<li>知否知否,应是等你好久11</li>
<li>知否知否,应是等你好久11</li>
<li>知否知否,应是等你好久11</li>
</ul>
<ol id="ol">
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
</ol>
<script>
// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
// 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
// 3. 如果页面中只有一个li 返回的还是伪数组的形式
// 4. 如果页面中没有这个元素 返回的是空的伪数组的形式
// 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
// var ol = document.getElementsByTagName('ol'); // [ol]
// console.log(ol[0].getElementsByTagName('li'));
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));
</script>
</body>
getElementsByClassName()
<body>
<div class="box">首页</div>
<div class="box">客户端</div>
<script>
// 1. getElementsByClassName 根据类名获得某些元素集合
var box=document.getElementsByClassName('box');
console.log(box);
</script>
</body>
querySelector()
HTML5新增的 返回指定选择器的第一个对象
querySelectorAll()
返回指定选择器的所有对象集合 用法和querySelector()一样
<body>
<div class="box">123</div>
<div class="box">456</div>
<div id="nav">
<ul>
<li>1</li>
<li>5</li>
<li>7</li>
</ul>
</div>
<script>
// 1. querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav
var box=document.querySelector('.box');
console.log(box);
var nav=document.querySelector('#nav');
console.log(nav);
// 2. querySelectorAll()返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);
</script>
</body>
document.body
获取body元素
document.documentElement
获取html元素
<script>
// 1.获取body 元素
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);
// 2.获取html 元素
var htmlEle = document.documentElement;
console.log(htmlEle);
</script>