目录
1.获取script脚本节点 后面加载的元素节点,是获取不了的,
3.官方提供的函数:window.getComputedStyle(); //获取计算样式(呈现树中的)
1.获取script脚本节点 后面加载的元素节点,是获取不了的,
<body>
<script>
var box2 = document.querySelector('.box2');
console.log(box2); //null
</script>
<div class="box2" style="color:red;">666</div>
</body>
分析:获取script脚本节点后面的div元素,获取不了, console.log(box2); //null
因为文档的加载是按照文档树的顺序加载的,先是运行了script脚本中的获取.box2,然后才在下面定义.box2
若一定要获取script脚本节点 后面加载的元素节点 ,有两种方式:
01.当页面加载完成的事件触发,再去执行获取节点的方式
把获取.box2的代码放到函数里面,等页面加载完了才运行该函数
<body>
<script>
function fn() {
//写在函数里面 让获取box2的代码,比定义box2的代码后运行
var box2 = document.querySelector('.box2');
console.log(box2); //null
}
//window.load 整个文档加载完了自动去调用fn
window.onload = fn;
</script>
<div class="box2" style="color:red;">666</div>
</body>
02.script -- defer async 修饰src如何加载外部js资源的异步属性
脚本的异步加载
1):
<script src="script.js"></script>
没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。
2):
<script async src="script.js"></script>
有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。
3):
<script defer src="myscript.js"></script>
有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。
然后从实用角度来说呢,首先把所有脚本script都丢到 </body> 之前是最佳实践,因为对于旧浏览器来说这是唯一的优化选择,此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。
<body>
<script defer src="./test.js"></script>
<div class="box2" style="color:red;">666</div>
</body>
结果:能打印出box2 <div class="box2" style="color:red;">666</div>
2.css样式结构体中的数据 通过节点对象获取不了
<body>
<style>
.box2{
width: 200px;
height: 200px;
background-color: blue;
font-size: 50px;
}
</style>
<div class="box2" style="color:red;" >666</div>
<button id="btn">点击</button>
<script>
//需求:一点就按钮,box2的字体大小就*2
var btn = document.querySelector('#btn');
btn.addEventListener('click',function(){
var box2 = document.querySelector('.box2');
console.log(box2.style.fontSize,11111); //空字符串,11111
});
</script>
</body>
分析:代码没问题,只是font-size书写位置不同,就box2.style.fontSize结果就不同。
结合图与代码分析: var box2 = document.querySelector('.box2');通过这段代码,我们是操作文档树,获取里面的元素节点,是在DOM树里面。但是font-size:50px;写在样式表里面,然后转到样式结构体里面,DOM树和样式结构体是两种不同的数据容器,不能从DOM树里面,通过元素节点获取样式结构体里面的样式。那为什么font-size:50px;写在div标签里面就可以访问到呢?因为font-size:50px;写在div标签里面就属于属性节点,属于文档树部分了。所以可以元素节点去获取属性节点。
现在问题时,不可能所有css代码都写在行内吧, 很多css代码都是写在style标签里面,或者外部css文件,然后引入。那要怎么通过JS(dom树)里面的元素对象去获取到样式结构体中的样式呢?利用官方提供的window.getComputedStyle();
3.官方提供的函数:window.getComputedStyle(); //获取计算样式(呈现树中的)
注意点:我在这里用到了一个之前没有用过的 获取元素属性的方法,而这个 window.getComputedStyle()方法,仅仅能用来获取属性值,但并不能用于修改属性值,所以在错误提示中显示read-only
<body>
<style>
.box2{
width: 200px;
height: 200px;
background-color: blue;
font-size: 50px;
}
</style>
<div class="box2" style="color:red;" >666</div>
<button id="btn">点击</button>
<script>
//需求:一点就按钮,box2的字体大小就*2
var btn = document.querySelector('#btn');
btn.addEventListener('click',function(){
var box2 = document.querySelector('.box2');
var box2_style = window.getComputedStyle(box2);//获取box2的计算样式(呈现树中的)
console.log(box2_style.fontSize); //50px
//注意这里是box2.style.fontSize 而不是box2_style.fontSize
//因为hese styles are computed, and therefore the 'font-size' property is read-only.
box2_style.fontSize = parseInt(box2_style.fontSize)*2 + 'px';
});
</script>
</body>