构造函数、dom元素的基础
16lz
2021-03-15
流程控制：循环
while：入口判断与出口判断的唯一区别，出口判断条件不满足的时候，至少执行一次循环体。
for of：将所有集合类型的数据的遍历进行了统一，是遍历的终结者
const colors = ["red", "green", "blue"];// 1,while :入口判断//let i = 0;while (i < colors.length) {console.log("%c%s", "color:red", colors[i]);i++;}console.log("%c--------------", 'color:blue');// 2.while：出口判断i = 0;do {// 条件不满足的时候，至少执行一次循环体console.log(colors[i]);i++;} while (i > colors.length);console.log("%c--------------", 'color:green');// 3.for （初始变量，循环条件，条件更新）for (let i = 0; i < colors.length; i++) {console.log(colors[i]);}console.log("%c--------------", 'color:green');// 对象使用for inconst lesson = { name: "js", score: 90 };for (let key in lesson){console.log("%s",lesson[key]);}console.log("%c--------------", 'color:green');// for in 也可以便利数组for (let key in colors){console.log("%s",colors[key]);}console.log("%c--------------", 'color:green');// for of 将所有集合类型的数据的遍历进行了统一，是遍历的终结者// 可以遍历数组for (let item of colors){console.log(item);}console.log("%c--------------", 'color:green');// 可以遍历对象for (let item of lesson){console.log(item);}// 报错 ： lesson不是一个可以迭代的对象。
构造函数的原型与对象原型之间的区别与联系
实例的原型永远指向它的构造函数的原型,实例的原型从构造函数的原型继承成员(属性/方法)
需要被继承的所有类实例共享的成员，应该写在构造函数原型上。
通常属性不应该被共享，他们是区分不同对象的标志，方法更适合共享。
- 任何函数都有一个原型属性：prototype。
- prototype对于普通函数没用,对构造函数来说才有用
- 构造函数是”对象工厂”,是用来创建对象的
- 对象也叫”实例”, 实例: 实际案例
- js中没有“类”的概念,它是基于原型的语言,所以可简单的将构造函数当成“类”
- 构造函数必须使用“new”来调用,普通函数不用
- new 的过程就是类的实例化过程,就是创建一个对象的过程
创建对象的过程,就叫“类的实例化”
// 声明构造函数（行业规范：首字母大写，用来区分。）function User(name, email) {// 1. 创建出一个新对象,用this来表示(这是伪代码,系统自动创建并执行，不用写)// const this = new User;// 2.初始化对象,给这个对象添加一个自定义属性,用来和其它实例进行区分// 可以为空this.name = name;this.email = email;// 3. 返回这个对象// return this;}// 使用 new 调用const user = new User("admin", "admin@php.cn");console.log(user instanceof User);console.log(user);// 在原型属性中增加一个属性user.__proto__.salary = 8899;// 先在自由属性中找，找不到再到原型属性上找。console.log(user.salary);const user1 = new User("peter", "peter@php.cn");console.log(user1);// console.log(user1.salary);console.dir(User);// 实例的原型永远指向它的构造函数的原型,实例的原型从构造函数的原型继承成员(属性/方法)console.log(user1.__proto__ === User.prototype);// 需要被所有类实例共享的成员,应该写到构造函数的原型上User.prototype.nation = "CHINA";console.log(user.nation, user1.nation);// 属性通常不应该共享的,它是区分不同对象的标志,方法更适合共享User.prototype.show = function () {return { name: this.name, email: this.email, salary: this.salary };};console.log(user.show());console.log(user1.show());
获取dom元素的常用方法
<ul id="list"><li class="item">item1</li><li class="item">item2</li><li class="item">item3</li><li class="item">item4</li><li class="item">item5</li></ul><form action=""><input type="text" /></form><script>// 使用css是最直观的// 1，获取满足条件的所以元素const lis = document.querySelectorAll("#list li")console.log(lis);console.log('---------------');// 2.获取满足条件的第一个元素first = document.querySelector("#list li")console.log(first);// 其他// 返回对拥有指定 ID 的第一个对象的引用id = document.getElementById('list')console.log(id);// 返回带有指定标签名的对象的集合tagname = document.getElementsByTagName('li')console.log(tagname);// 返回带有指定名称的对象的集合name = document.getElementsByName('')// 获取所有指定类名的元素classname = document.getElementsByClassName('item')console.log(classname);// 有几个快捷方式,用来快速 获取某一个或某一类元素// html// console.log(document.documentElement);// headconsole.log(document.head);// bodyconsole.log(document.body);// titleconsole.log(document.title);// formsconsole.log(document.forms[0]);console.log(document.forms.item(0));console.log(document.images);</script>
dom 元素的增删改查常用操作
创建元素
- createElement();
- parent appendChild(newEl),添加到页面
- 将html逐个添加 字符串直接解析dom元素 insertAdjacentHTML(beforeEnd(到最后))
insertAdjacentHTML(afterBegin(到前面)) - 如果大量添加元素应该使用文档片段完成
更新
- replaceWith()
- replaceChild();
移除
- removeChild()
<ul id="list"><li class="item">item1</li><li class="item">item2</li><li class="item">item3</li><li class="item">item4</li><li class="item">item5</li></ul><script>const ul = document.querySelector('#list')// 1.创建元素const li = document.createElement('li');// parent.appendChild(newEl),添加到页面(在父元素中调用)ul.appendChild(li);li.innerText = 'item6';// innerHTML支持代码// li.innerHTML = '<i style="color:red">item6</i>';let htmlStr = "<li style='color:red'>item7</li>";// 将html字符串直接解析为dom元素ul.insertAdjacentHTML("beforeEnd", htmlStr);// 如果大量添加元素应该使用文档片断完成// const frag = document.createDocumentFragment(); 以下是简化成构造函数const frag = new DocumentFragment();for (let i = 0; i < 5; i++) {const li = document.createElement("li");li.textContent = "Hello " + (i + 1);// 将生成的节点先临时挂载到文档片断中frag.appendChild(li);}ul.appendChild(frag);htmlStr = `<li style="color:violet">demo1</li><li style="color:violet">demo2</li><li style="color:violet">demo3</li><li style="color:violet">demo4</li><li style="color:violet">demo5</li>`;ul.insertAdjacentHTML("afterBegin", htmlStr);// 用元素不用字符串ul.insertAdjacentElement("afterBegin", li);ul.insertAdjacentHTML("afterBegin", "<li>item888</li>");// 2. 更新let h3 = document.createElement("h3");h3.innerHTML = "晚上好";document.querySelector("li:nth-of-type(3)").replaceWith(h3);ul.replaceChild(h3, document.querySelector("li:last-of-type"));// 3.移除ul.removeChild(document.querySelector("#list h3"));// 4. 遍历查询// 获取所有子元素console.log(ul.children);// 获取子元素数量console.log(ul.children.length);console.log(ul.childElementCount);// 第一个子元素console.log(ul.firstElementChild);// 最后一个console.log(ul.lastElementChild);// 父节点console.log(ul.lastElementChild.parentElement);// 前一个兄弟const jiu = document.querySelector("#list li:nth-of-type(9)");jiu.style.background = "yellow";console.log(jiu.previousElementSibling.innerHTML);// 后一个兄弟console.log(jiu.nextElementSibling.innerHTML);</script>
更多相关文章
- 五个Excel函数组合，效率提高一丢丢
- JavaScript的代码编写注意事项，建议收藏！
- 你真知道如何高效用mapPartitions吗？
- 0104 函数练习
- 磁盘显示函数不正确怎么恢复?
- 最新版Spark 3 HelloWorld
- tp5中在js函数中给url传参数并进行连接
- 常用数组函数-创建-删除-键值操作-回调函数
- php字符串函数