本文介绍了JavaScript的基础知识，包括JS在HTML中的位置、书写规范和弹框调试方法。详细讲解了如何获取和操作HTML元素，如通过ID、class、name和标签名，以及使用querySelector和querySelectorAll。还探讨了如何改变元素的CSS样式，修改属性，以及处理自定义标签属性。最后补充了CSS选择器的使用。
你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。
初识JS
页面一般就是通过div，css，js共同搭建起来的。第一次写博客记录自己的学习理解，有不对的希望大家指正，共同进步~
- div 结构层
- css 表现层
- js 行为层 (交互动作，发送，请求数据，响应用户操作，逻辑分层)
- jquery是由最底层的js代码组成的一个库，本质是js
JS可以在哪儿
- 直接引用。 例如：
<script src="js/vue.min.js"></script> - 行内js.。 例如：
<div onclick="alert(123)"> </div> - href。
<a href="">ggg</a>
href里什么都不写，就是刷新当前页面，写# 同样
当不希望a刷新当前页面时可以这样<a href="javascript:;">ggg</a>这样就有a标签的样式，但是不会跳转，刷新，添加#锚点
<a href="javascript:void(0);">ggg</a>同样不会跳转
JS书写规范
- 严格区分大小写
- 功能字符，语法字符都是半角字符 ，英文状态下的字符
\ 转义符 只在字符串里有转义，其他地儿没有 - ；代表语句结束，换行也代表语句结束，有些地方必须要写；
在以 “(”、“[” 、“/”、“+”、“-” 开头的语句前面都加上一个分号，
如
js ;(a + b).toString() - 注意代码缩进
JS弹框与调试
弹框：
- alert() 弹窗，展示内容
- confirm() 需要确认的弹窗 如果把弹窗作为赋值，则会返回true 或 false
例如：
let a = confirm("确认不需要?")
根据客户点击的确定还是取消，得到a是true还是false - prompt()输入框
例如：
prompt("请输入密码")
let b = prompt("请输入密码")
confirm()和prompt()不怎么会用，因为丑[微笑]
调试：
- 浏览器里 Sources 打断点，代码特别多的时候用(断点就是代码在这里停了，后面的不执行了)
- alert（）
- console.log( ) 连续性触发多次。上线前要删掉或注释掉
获取元素节点
- 通过id获取元素
<div id="wrap"></div>
var oWrap = document.getElementById("wrap")
打印看一下会有什么console.log(oWrap)//直接打印这个元素<div id="wrap"></div>
解读一下document.getElementById("wrap")
document 文档对象
get 得到，获取
element 元素
by 通过
连起来就是：我要在文档上通过id得到元素 - 通过class名获取元素
<div class="box"></div>
var oBox = document.getElementsByClassName("box")
console.log(oBox) //打印出一个类数组 HTMLCollection [div.box]
length: 1
0: div.box
__proto__: HTMLCollection
如果是多个相同class名，同时被取到呢？？
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script type="text/javascript">
var oBox = document.getElementsByClassName("box")
console.log(oBox) //打印一个类数组集合
console.log([...oBox]) // ES6写法，获取一个class名都为box的一个数组
</script>
- 通过name名获取元素
#也有name
document.getElementByName()
<input name="one" type="text" size="20" />
<script type="text/javascript">
var oOne = document.getElementsByName("one")
console.log(oOne) //NodeList [input]
</script>
- 通过标签名获取元素
<div id="wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<span>1111111</span>
<input name="one" type="text" size="20" /><br />
</div>
<script type="text/javascript">
var oDiv = document.getElementsByTagName("div")
console.log(oDiv)
//打印出 HTMLCollection(6) [div#wrap, div.box, div.box, div.box, div.box, div.box, wrap: div#wrap]
length: 6
0: div#wrap
1: div.box
2: div.box
3: div.box
4: div.box
5: div.box
</script>
也可以获取某一个，
var oDiv = document.getElementsByTagName("div")[0]
- 通过 querySelectorAll ，这个是一个集合
<div id="wrap">
<div class="box">
<div class="one"></div>
</div>
</div>
<script type="text/javascript">
var oBox = document.querySelectorAll("#wrap .box")
console.log(oBox) //NodeList(5) [div.box, div.box, div.box, div.box, div.box]
var oBon = document.querySelectorAll("#wrap .box .one")
console.log('oBon') //NodeList [div.one]
</script>
- 通过querySelector
<div id="wrap">
<div class="box">
<div class="one"></div>
</div>
</div>
<script type="text/javascript">
var oOne = document.querySelector("#wrap .box")
console.log(oOne)
</script>
- 唯一的标签获取
body head title html
document.getElementsByTaName("body")[0]
独特的标签直接点就可以了
console.log(document.body)//<body></body> body真实的应该是一个对象，应该用
console.dir（document.body)
document.head
document.title
document.documentElement （HTML）
console.log(document.documentElement)//打印HTML结构<html><head></head></html>
console.log(document.documentElement)//打印<html id="goudan"><head></head></html>
document.documentElement.id = "goudan"
在设置id之前就打印出来id了，
是因为 console打印这个对象，是打印这个对象的引用，如果这个对象在后面变化了，这个引用也会发生变化
只在打印对象的时候会出现这种情况
可以直接改值
document.title = "asdfghjk"
- 特别重要的一种获取元素方式
<div id="wrap">
<p></p>
<p></p>
<div>
<p></p>
</div>
</div>
<p></p>
let oWrap = document.getElementById("wrap")
let aP = oWrap.getElementsByTaName("p")
所有的标签节点都拥有 document
区别：
document是全文查找，但是getElementById 只能在document里查找
用某个标签，是标签内部查找
如果结构层次特别深，就可以使用H5新引入的方式，通过选择器获取
let AP = document.querySelectorAll(“#wrap div p”)//获取#wrap 下div 的p标签
aP[2].innerHTML
let oP = document.querySelector(“#wrap div p”)
console.log(aP)//选择器第一个元素,就是#wrap 下第一个div 下的第一个p标签
大部分选择器是支持的
兼容性也挺好，兼容到ie8
通过选择id名，class名，元素名，name
document.getElementById()
.document.getElementsByClassName() 不兼容ie8及以下
.document.getElementsByTaName()
.document.getElementByName()
.querySelector() 不兼容ie7及以下
.querySelectorAll() 不兼容ie7及以下
操作HTML元素
- document.getElementById(“wrap”).innerHTML = “这是内容”
通常我们赋值的是一个字符串
= 是赋值的意思，只能单方面的把右边 给 左边 - 节点操作
- 改id
<div style="" id="wrap" class="box" title="这是一个div"></div>
let oDiv = document.getElementById("wrap")
oDiv.title = "狗蛋"
再去页面看，就发现已经改成功了
想改class名,class比较特殊，需要用className代替
oDiv.className = "wrap"
想改id
oDiv.id = "one"
修改了id后，oDiv还是能代表这个div，oDiv是本体，改变id名并不会有影响
oDiv是对象，id只是他的属性，修改属性不会影响对象
- 改css样式
css写法：
1、内部css样式
2、行内css样式
3、外部css文件
JS操作css样式的方法：
1、内部样式表
2、行内样式
操作内部样式表：
<style type="text/css" id="css"></style>
<div id="wrap"></div>
document.getElementById("css").innerHTML = "#wrap{width: 50px;height: 50px;background-color: pink;}"
很少控制他的内部样式表
操作行内样式表：
如何操作元素的标签属性
合法的标签属性，直接·操作
=的意义是赋值
= 左边是写入的过程
读的过程
获取
<div style="" id="wrap" class="box" title="这是一个div"></div>
let oDiv = document.getElementById("wrap")
oDiv.title = "狗蛋"
想改style 非常特殊,一个节点对象的style属性，是存储这个节点所有内联样式的对象，没有用JS修改的样式，不会显示在里面
oDiv.style += "background-color:pink"，
可以添加
+= 在原来的基础上新增一个东西
oDiv.style.height="100px"
oDiv.style.width="100px"
oDiv.style.backgroundColor="pink"(驼峰命名法)
style的代替操作
<div style="width:50px"></div>
let oWrap = document.getElementById("#wrap")
oWrap.style.height = "100px"
oWrap.style.width = "100px"
oWrap.style.background = "pink"
oWrap.style.float = "left"//不兼容
兼容写法,缺一不可： oWrap.style.cssFloat = “left”
oWrap.style.styleFloat = “left”
感觉很复杂，繁琐，还要考虑兼容问题
.style.cssText
console.log(oWarp.style)//CSSStyleDeclaration {0: "width", alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
console.log(oWarp.style.cssText)//width: 40px;
oWarp.style.cssText = "background: #98FB98;height: 50px;"
会发现width被覆盖了，想要不覆盖，就用+=
oWarp.style.cssText += "background: #98FB98;height: 50px;"
虽然很方便，但是看着还是有点累赘，看着不舒服，所以我们用添加class名，来改变style样式
- 添加class名改变样式
想改class名,class比较特殊，需要用className代替
oDiv.className = "wrap"
#wrap.box{/*id叫wrap 并且 class名叫box*/
height: 50px;
background-color: lightpink;
border: 2px solid springgreen;
}
<div id="wrap" style="width: 40px;"></div>
let oWarp = document.getElementById("wrap")
oWarp.className += " box"
用的地儿最多
操作不合法标签属性（自定义标签属性）
还可以操作合法标签属性，一般不会用他们操作合法标签属性，合法标签属性可以直接·操作，更快
1、getAttribute() 拿属性
2、setAttribute() 设置属性
3、removeAttribute() 移除属性
<div id="wrap" one="789"></div>
cument.getElementById("wrap")
- 获取自定义标签属性
console.log(oWrap.getAttribute("one")) //获取到自定义标签one 的值789
- 设置自定义标签属性
console.log(oWrap.setAttribute("one","123"))//第一个值是要设置的自定义标签，第二个值是修改后的值
console.log(oWrap.setAttribute("two","1234"))也可以新增一个自定义属性
自定义属性的作用：
框架最根本的原理就是基于自定义标签属性去操作的，可以把一些信息，存在自定义标签里，在HTML里存储简单信息的一种方式
vue，angular框架，都是基于自定义的属性去操作的，解析标签的自定义属性，从而把他变成对应的dom结构
- 移除自定义标签属性
console.log(oWrap.removeArribute("one"))
- 获取标签的内容
<div id="wrap">123456789</div>
let oWrap = document.getElementById("wrap")
console.log(oWrap.innerHTML)//123456789
.innerHTML 可以解析标签
-innerText 不可以解析标签，会显示标签 火狐低版本没有，需要用.textContent
input用innerHTML获取不到里面的文字，要用.value
<input type="text" id="inp">
<button id="btn"></button>
let oInp = document.getElementById("inp")
let oBtn = document.getElementById("btn")
document.oBtn.onclick = function(){
console.log(oInp.innerHTML)//不能获取input框里的文字
console.log(oInp.value)//这样才可以获取到input框里的文字
}
CSS选择器补充
div#wrap.on.goudan{ //首先满足是个div ，id是wrap ，class名是on和狗蛋
width:100px;
height:100px;
background-color:pink;
}
<div id="wrap" class="on goudan"></div>
扫一扫
601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
