标签：console log DOM JSAPI 元素 获取 var 操作 document
DOM操作
WebAPI
- API： 预定好的函数 例如：alert(),console.log(),prompt()
- WebAPI： 浏览器提供的一套操作浏览器功能和页面元素的API(BOM,DOM)，DOM的顶级对象是document BOM的顶级对象是window
- 节点：页面中的所有内容都是节点（标签，属性，注释，文本）
获取元素的方法
- document.getElementById() 通过id名获取 获取单个元素
- document.getElementsByClassName() 通过class名获取 获取多个元素 返回的是一个伪数组
- document.getElementsByTagName() 通过标签名获取 获取多个元素 返回的是一个伪数组
- document.getElementsByName () 通过name属性获取 获取多个元素 返回的是一个伪数组
- document.querySelector() 通过选择器querySelector获取元素 获取单个元素
- document.querySelectorAll() 通过选择器querySelectorAll获取元素 获取多个元素 返回的是一个伪数组
<body>
<div id="box"></div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<input type="text" name="user">
<span name="user"></span>
<div name="user"></span>
<p name="user"></span>
</body>
<script>
// 1.通过id名获取
var box = document.getElementById('box');
console.log(box);
// 2.通过class名获取
var box1=document.getElementsByClassName('box');
console.log(box1);
console.log(typeof box1);
for(var i=0;i<box1.length;i++){
console.log(box1[i]);
}
// box1.push('1') 伪数组有数组的特点，长度，索引，循环，但是不能使用数组特有的方法
// 3.通过标签名获取
var box2=document.getElementsByTagName('div');
console.log(box2);
//4.通过name属性获取
var box3=document.getElementsByName('user');
console.log(box3);
//5.通过选择器querySelector获取元素
var box4=document.querySelector('#box');
var box5=document.querySelector('.box');
console.log(box4);
console.log(box5);
// 6.通过选择器querySelectorAll获取元素 获取多个元素
var box6=document.querySelectorAll('.box');
console.log(box6);
</script>
获取元素的方法
- 事件：触发==》相应
- 事件的三要素：
- 事件源：要触发的元素
- 事件类型：鼠标事件，键盘事件，浏览器事件
- 事件处理程序：触发事件后要执行的代码
- 事件的公式：事件源。事件类型=事件的处理程序
- 事件函数是异步操作
- 事件函数中的this指向事件源
- 时间函数的书写
- 行内书写
<button onclick> - 内部书写 script src标签
- 外部书写 .js文件
<body>
<button id="btn">点击</button>
<button onclick="fn()">a!</button>
<div class="box">boxboxbox</div>
</body>
<!-- <script src="./事件.js"></script> -->
<script>
var btn=document.getElementById('btn');
btn.onclick=function(){
console.log('点');
console.log(this);
}
function fn(){
console.log('点fn');
}
</script>
标签：console,
log,
DOM,
JSAPI,
元素,
获取,
var,
操作,
document
From： https://blog.csdn.net/weixin_66030561/article/details/139395952