属性访问器和dom元素的获取、遍历、增加
16lz
2021-07-15
访问器属性 计算商品价格
let shop = {
data: [{
id: 1,
name: "西红柿",
price: 2,
quantity: 0
}],
get price() {
return this.data[0].price;
},
set price(num) {
this.data[0].quantity = num;
let sum = this.data[0].price * num;
this.data[0].price = sum;
}
}
shop.price = 30;
console.log(`购买了${shop.data[0].quantity}个西红柿,一共${shop.price}元!`);
// 打印输出:购买了30个西红柿,一共60元!
</script>
dom元素的获取、遍历、增加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul id="list">
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第5行</li>
</ul>
<script type="text/javascript">
let lis = document.querySelector("#list")
const list = document.querySelectorAll("#list li"); // 获取
console.log(list);
list.forEach((item, i) => { // 遍历
item.style.background = "red"
})
document.body.style.background = "cadetblue"
// 创建元素
let newLi = document.createElement("li");
newLi.textContent = "第6行";
lis.insertAdjacentElement("beforeEnd", newLi);
</script>
<!-- 获取表单元素 -->
<form action="" name="login" id="mylogin">
<input type="text" name="text" value="hahahah">
<button>提交</button>
</form>
<script type="text/javascript">
console.log(document.forms.login.text.value); // 获取表单元素
</script>
</body>
</html>
更多相关文章
- 表单,框架,选择器,css的三种插入样式(内联,外部样式,元素中)
- 访问器属性与dom元素获取
- 0701学习实战作业
- 前端作业-flex布局
- 前端 JavaScript 实现一个简易计算器
- 字体图标引用、网页布局与元素排列、盒模型使用
- 字体图标、布局原理一级盒模型实例操作
- 图标,布局,元素类型,盒子模型
- 字体图标、布局原理以及盒模型实例操作及思考