前端——js函数+DOM对象
一、函数
1.构建函数
// 接受实参
function name(t1, t2, t3, t4) {
// code
console.log(t1, t2, t3, t4);
}
2.执行函数
name()
3.return
function xxx() {
return 'xxxx'
console.log('return 后的代码不执行');
}
4.箭头函数
>常常以匿名函数的身份，出现在js中。
() => {
}
let x = o => '干净了，爽歪歪。'
o => {
return '干净了，爽歪歪。'
}
二、DOM操作
1.DOM 获取 (选择器)
// 单个
console.log(
document.querySelector('#app')
);
// 多个DOM
console.log(
document.querySelectorAll('ol li')
);
2.事件
let i = 0;
document.querySelector('button').onclick = () => {
// 事件函数
console.log('点我干嘛？', i++);
}
3.内容操作
let app = document.querySelector('#app');
// html
app.innerHTML = ` <b>我是b</b> `
app.innerText = ` <b>我是b</b> `
4.属性操作
pp.title = 'app';
document.querySelector('img').src = 'https://img2.baidu.com/it/u=299663851,4260094678&fm=253&fmt=auto&app=120&f=JPEG?w=818&h=800'
5.行内样式
app.style.fontSize = '40px'
6.操作class
1.增
app.classList.add('box')
app.classList.add('back')
2.删
app.classList.remove('box')
3.切换
document.querySelector('button').onclick = () => {
// 事件函数
console.log('点我干嘛？', i++);
app.classList.toggle('back');
}
4.判断
console.log(app.classList.contains('back'));
7.创建DOM
// 妙娃种子
let img = document.createElement("img");
img.src = 'https://img2.baidu.com/it/u=299663851,4260094678&fm=253&fmt=auto&app=120&f=JPEG?w=818&h=800'
// 闪电耗子
let img2 = document.createElement("img");
img2.src = 'https://img2.baidu.com/it/u=3018400876,3718749332&fm=253&fmt=auto&app=138&f=JPEG?w=870&h=489'
8.将元素添加到DOM树中
//appendChild 方法用于将一个节点添加到父节点的子节点列表的末尾。
// app.appendChild(img);//将img元素作为app元素的最后一个子节点添加到DOM中。
//insertBefore 方法用于在指定的子节点之前插入一个节点（或一个新创建的节点）。
//这个方法接受两个参数：第一个是要插入的节点，第二个是参考节点（即新节点将被插入到这个参考节点之前的位置）
app.insertBefore(img2, document.querySelector("#hz"));//在app元素中找到ID为hz的元素之前插入img2元素。
// app.appendChild(img2)
9.将元素从DOM树中删除
// app.removeChild(img)
// img2.remove();
三、封装DOM的构建
// 创建DOM函数
function createDOM(DOMObj, root) {
// 标签名
let DOM = document.createElement(DOMObj.TN);
// 属性
// class
for (const key in DOMObj) {
DOM[key] = DOMObj[key]
}
// style 函内样式
for (const key in DOMObj.style) {
DOM.style[key] = DOMObj.style[key]
}
// 子盒子 (判断数据类型)
if (DOMObj.TNC) {
if (Array.isArray(DOMObj.TNC)) {
DOMObj.TNC.forEach(element => {
createDOM(element, DOM)
});
} else {
createDOM(DOMObj.TNC, DOM)
}
}
// console.log(DOM);
// 丢入容器
if (root) {
root.appendChild(DOM);
}
return DOM;
}
createDOM({
TN: 'div', innerText: '我是被宇智波厚度，构建出来的。', title: '我是被宇智波厚度，构建出来的。',
className: 'box', style: { fontSize: '30px', border: "solid" },
TNC: { TN: "i", innerText: "我是i标签" }
}, document.querySelector("#app"))
;