前端JS基础，console学习

Posted 2022-01-13 向阳-Y.

目录

• getElementById
• querySelector
• • ~号定位：
  • *号定位：（推荐）
  • 补充：
• console.log()
• a.children
• 显示文本Text
• .style
• 新增子元素
• 点击事件
• • addEventListener
  • onclik
  • 函数+事件配合
• 背景图片

提前声明一下，下面出现的a已经提前定义：

let a = document.querySelector(".tabs")

---

getElementById

获取当前网页中ID为tpsubmit的值

document.getElementById("tpsubmit")

querySelector

这个定位器和python中的pyquery库定位类似，所以大致内容已经省略。
感兴趣的也可以去看一下我这篇文章

---

获取当前网页中class为tabs的标签的值

document.querySelector(".tabs")

子元素：
只能截取到自己的下一级

document.querySelector("body>header>title")

精确定位：

document.querySelector("div[aria-hidden=true]")

补充：还有一个querySelectorAll可以定位网页中所有的内容，范围更广一些

~号定位：

比如拿这个举例</div aria-hidden="true true1 true2">
效果是定位属性中包括true即可的内容，(不论有多少个空格隔开的值)

document.querySelector("div[aria-hidden~=true2"])

*号定位：（推荐）

document.querySelector("[class*=ion]")
星号定位挺好用的，可以将下面语句定位到

<p id=​"script-description" class=​"script-description">​

补充：

根据其他属性名称进行选择
[xxx]选择带有xxx属性的元素
[xxx=sss]）选择xxx属性等于sss的元素
[xxx~=sss]选择xxx属性包含sss的元素（sss必须是整个单词）
[xxxl=sss）选择xxx属性以sss开头的元素（sss必须是整个单词）
[xxx^=sss）选择xxx属性以sss开头的元素（sss可以是单词的一部分）
[xxx$=sss）选择xxx属性以sss结尾的元素（sss可以是单词的一部分）
[xxx*=sss）选择xxx属性包含sss的元素（sss可以是单词的一部分）

console.log()

先定义一个let a = querySelector("h1")
使用下面语句可以将a打印出来

console.log(a)

这有点没理解，在视频中conso.log打印出来了其属性

a.children

这里有很多属性可以访问，例如使用
a.children则可以返回所有子元素列表

a.children[0]

显示文本Text

innerText可以将多余的空格自动去掉，而使用textContent空格则会多一些

.style

获取css样式

a.style
a.style.color=red
a.style.text-align=center
a.style.display="none"    #这个可以用来隐藏广告等，block可以重新显示

新增子元素

1.相当于创建一个<button></button>标签
2.再使用a.textContent为这个标签进行赋值
3.将这个标签附加到a标签上

let b1 = document.createElement('button');  #b1.remove是删除对象
b1.textContent="按钮";
a.appendChild(b1);
###补充：
a.insertBefor(b1.children[0]);

点击事件

addEventListener

提前定义一个a：
let a = document.querySelector("[class*=script-show-author] span")
当点击span中的内容时，就会触发下面的文本

a.addEventListener('click',()=>console.log("点我干嘛！"))

貌似这种定义方式不能进行删除(删除了没反应)：
a.removeEventListener

onclik

相比之下onclik可以使用a.onclik=null来进行删除

a.onclik=()=>alert("你好！")  # 可以实现以弹窗形式弹出 "你好"
a.onclik=()=>consle.log("点我干嘛！") # 可以实现在console调试窗口弹出

函数+事件配合

只需要将原来表达式中的括号替换成函数名即可，这里的好处是可以使用
removeEventListerner("click",test);将test函数移除掉

function test()
	console.log("事件函数");
	;
a.addEventListerner("click",test);

#这两种方法都可以
a.click=test 

背景图片

a.style.backgroundImage="url(相对/绝对路径)"