offsetLeft offsetTop
<style>
*{
margin: 0;
padding: 0;
}
body{
padding: 50px;
}
.div1{
margin-left: 100px;
position: fixed;
}
.div2{
position: fixed;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">我是div</div>
</div>
<script>
// offsetLeft
// 到定位父级左边界的间距
// offsetTop
// 到定位父级上边界的间距
var oDiv = document.querySelector('.div2');
// 每一个标签对象,都有一个属性,叫 offsetParent
// 表示这个标签的定位父级对象是谁
// (1)标签本身,没有定位属性,定位父级对象 是 body
// 此时是这个标签到body的间距
// 不管是body的padding,还是标签的margin,都是到body的间距
// 如果有父级,计算的也是当前标签到 body 的总间距
// (2)标签本身有定位,要看定位父级对象是谁
// position: relative; 定位父级仍然是 body
// position: absolute; 要看具体的定位是谁
// position: fixed; 定位父级是 null 指的是 视窗窗口
/// 表示的仍然是到定位父级的间距,只是定位父级有可能不同
// (3)本身没有定位,父级有定位属性
// 此时定位对象父级是 带有定位属性的父级标签
// 表示的是到这个父级标签的间距
// 总结:
// offsetLeft offsetTop 情况很复杂
// 需要先确定 offsetParent 定位父级对象标签
// 获取的数据,就是当前标签,到父级定位标签的总间距
// 先找爹,确定爹,到爹的间距
console.dir(oDiv);
// DOM操作,之写入内容
<div>
我是文字内容
<span>1</span>
<a href="#">2</a>
<ul>
<li>3</li>
</ul>
<h1>4</h1>
</div>
<script>
// DOM操作,之写入内容
// 给标签对象,写入内容
// 是,全覆盖写入
// 新写的内容,会覆盖标签中,之前定义的内容
// 包括文字,以及子级标签
// 标签对象.innerHTML() 支持标签
// 标签对象.innerText() 不支持标签
// 对div标签,写入内容
// 新写入的内容,会覆盖,之前div标签的所有内容
// 包括文字,标签等
var oDiv = document.querySelector('div');
// oDiv.innerHTML = '我是写入的内容';
// 1, 标签对象.innerHTML 获取标签对象中所有的内容,包括标签
// 标签对象.innerText 获取标签对象中所有的内容,不包括标签
console.log(oDiv.innerHTML);
console.log(oDiv.innerText);
// 2, 标签对象.innerHTML = '内容' 设定标签对象的内容,支持解析标签
// 标签对象.innerText = '内容' 设定标签对象的内容,不支持,不解析标签
// 解析h1 标签,执行结果是 写入一个 h1标签,标签内容是 我是innerHTML写入的
oDiv.innerHTML = '<h1>我是innerHTML写入的</h1>';
// 不支持,不解析标签,执行结果就是,纯字符串写入
oDiv.innerText = '<h1>我是innerHTML写入的</h1>';
</script>
