1.
<body>
<div id="app">
<h1>Akie</h1>
</div>
</body>
<script>
function $(str){
return document.querySelector(str)
}
let app = $(`#app`)
console.log(app.innerHTML); // innerHTML获取到的du内容是:<h1>Akie</h1>
console.log(app.outerHTML); //outerHTML获取到的内容是:<body><h1>Akie</h1></body>
console.log(app.innerText); // innerText获取到的内容是：Akie
app.innerHTML = `<button>测试1</button>`
app.innerText = `<button>测试2</button>`
</script>
依次执行结果如下：
2.其他练习了解
<style>
.zz{
color: chartreuse;
}
</style>
<body>
<div id="demo">zzzz</div>
<input type="text" id="username" akie-aaa="10">
<img src="XXXX" id="img" />
</body>
<script>
function $(str){
return document.querySelector(str)
}
//给div添加class名为zz的样式，并在控制台打印出对应的色值
$('#demo').classList.add('zz')
console.log(window.getComputedStyle($('#demo')).color);
//在控制台打印出对应的字体为多少
console.log(window.getComputedStyle($('#demo')).fontSize);
//给input的value赋默认值为20
$('#username').value = 20
//在控制台打印出当前input内的内容为20
console.log($('#username').value);
//在控制台打印img标签的src路径
console.log($('#img').src);
//在控制台打印当前input内属性名为akie-aaa的属性值
console.log($('#username').getAttribute('akie-aaa'));
//为inputtian添加date-aaa属性并赋值200(只是举个例子)
$('#username').setAttribute('date-aaa',200)
</script>
