<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.addClass{
display: inline-block;
margin: 0 auto;
background-color: #0f0;
}
#test {
width: 200px;
height: 200px;
background-color: #0097F7;
padding: 10px;
border: 10px solid #000000;
}
</style>
</head>
<body>
<div id="test">
</div>
<a href="javascript:void(null)">111</a>
<div class="classDiv" id="idDiv" data-id='1' data-name='cq'>你好</div>
<input type="text" name="" id="" value="111" />
<button type="button" id="btn">点击</button>
<script type="text/javascript">
let body = document.body
let html = document.documentElement
console.log(html);
// 获取dom对象
const text = document.querySelector('input')
console.log(text.nodeValue);
let idDiv = document.getElementById('idDiv') //对象
console.log(idDiv.nodeName,idDiv.nodeType,idDiv.nodeValue);
let btn = document.getElementById('btn') //对象
let classDiv = document.getElementsByClassName('classDiv') //伪数组集合
let queryDiv = document.querySelector('.classDiv') //选择第一个
// 获取对象后,可以对对象注册事件和事件处理函数,
idDiv.onclick = function () {
// 获取,对象中的属性,调用对象中的方法
alert(idDiv.innerHTML)
idDiv.className = 'addClass'
// 获取自定义,设置自定义属性,移除自定义属性
idDiv.getAttribute('data-id')
idDiv.setAttribute('data-id','nihao')
// idDiv.removeAttribute('data-id')
console.log(idDiv.dataset);
console.log(window.location);
}
// ------------NodeType NodeName NodeValue-----------
// NodeType{
// 元素节点 1 主要用这个
// 属性节点 2
// 文本节点 3
// }
// 父节点,找不到为null
// parentNode
// 子节点，包含空格，元素，标签 第一个和最后一个子节点
// childNodes firstChild lastChild
// 子节点元素节点 第一个和最后一个子元素节点 有兼容性问题
// children firstElementChild lastElementChild
// 兄弟节点
// 下一个兄弟节点,上一个兄弟节点 没有返回null
// nextSibling previousSibling
// 下个兄弟元素节点 上个兄弟元素节点
// nextElementSibling previousElementSibling
console.log(idDiv);
//创建节点
let li = document.createElement('li')
// 添加节点
idDiv.appendChild(li) //后面添加元素
let lili = document.createElement('li')
idDiv.insertBefore(lili,idDiv.firstChild)
// 删除子节点
idDiv.removeChild(idDiv.children[0])
// 克隆节点 默认false true为深拷贝
// cloneNode()
// -------------------监听器-------------给元素注册事件
btn.addEventListener('mouseover',function(e){
console.log("mouseover");
// 距离可视区
console.log(e.clientX,e.clientY);
// 距离页面
console.log(e.pageX,e.pageY);
// 距离屏幕
console.log(e.screenX,e.screenY);
})
// 添加事件
btn.addEventListener('keydown',function fn(){
console.log('keydown');
// 移除事件
btn.removeEventListener('keydown',fn)
},true)
// btn.addEventListenerNS()
let regex =/^[0-9a-zA-Z]{4}$/
console.log(regex.test('ab1A'));
// ---------------------bom对象---------------
// location{
// href
// port
// search
// hash
// pathName
// // 方法
// assign()
// replace()
// reload()
// }
// 了解
// console.dir(navigator.userAgent);
// histroy.back()
// history.forward()
// history.go()
// --------------------对象------------
// 已父元素有定位为准，没有已body为准
// btn.offsetTop btn.offsetLeft
// btn.offsetWidth btn.offsetHeight 包含边框,内边距
// btn.clientWidth
let test = document.getElementById('test') //对象
console.log('---------');
console.log(test.offsetWidth);
console.log('---------');
let timer = new Date()
console.log(timer.getTime(),timer.getFullYear(),timer.getMonth()+1,timer.getDate());
console.log(timer.getDate());
console.log(timer.getDay());
function fu () {
console.log(this);
}
fu()
function changeTo(){
console.log(111)
}
btn['onclick']=changeTo
// btn.onclick = function () {
// changeTo()
// }
var y = 18,res = ''
if(y%4==0 || y%6!=0){
rs='yes'
}else{
rs='no'
}
console.log(rs);
var fn = function (f) {
alert(typeof f)
var f = 2
function f(){
}
console.log(f);
}
fn(1)
var arr = ['苹果','橘子','香蕉']
console.log(arr.slice(0));
console.log(arr);
function superFn() {
var x = 0
return function () {
x++
console.log(x);
}
}
var s1 = superFn()
var s2 = superFn()
s1()
s1()
s1()
s2()
</script>
</body>
</html>
Native js operation
Guess you like
Origin blog.csdn.net/qq_30418537/article/details/107118341
Recommended
Ranking