JavaScript24_DOM编程：div的原型链
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript24_DOM编程：div的原型链相关的知识，希望对你有一定的参考价值。
4、div元素的原型链
htmlDivElement -> HTMLElement -> Element -> Node -> ...
通过元素节点对象获取其他节点的方法
element.childNodes 获取当前元素的子节点（会包含空白的子节点）
element.children 获取当前元素的子元素
element.firstElementChild 获取当前元素的第一个子元素
element.lastElementChild 获取当前元素的最后一个子元素
element.nextElementSibling 获取当前元素的下一个兄弟元素
element.previousElementSibling 获取当前元素的前一个兄弟元素
element.parentNode 获取当前元素的父节点
element.tagName 获取当前元素的标签名
<body>
<div id="box1">
我是box1
<span class="s1">我是s1</span>
<span class="s1">我是s1</span>
</div>
<span class="s1">我是s1</span>
<script>
const box1 = document.getElementById(box1)
const spans = box1.getElementsByTagName(span)
const span2 = box1.getElementsByClassName(s1)
const cns = box1.childNodes
const children = box1.children
console.log(children.length)//2,两个span标签
</script>
</body>
JavaScript面向对象编程（原型类基础）
JavaScript（三）面向对象编程（原型、类、基础）
面向对象编程
- 类：模板、原型对象
- 对象：具体的实例
原型继承
-
//通过__photo__来实现原型（类似与继承但又有点不同） -
实例：
var Student= name:"sxp", age:3, run:function () console.log(this.name+"在跑"); var Bird= fly:function () console.log(this.name+"在飞"); var xiaoming= name:"xiaoming" //xiaoming的原型是Student xiaoming.__proto__=Student; console.log(xiaoming.name);//xiaoming console.log(xiaoming.age);//3 xiaoming.run();//xiaoming在跑 //xiaoming的原型是Bird xiaoming.__proto__=Bird; xiaoming.fly();
类继承（重要）
-
class继承,是在ES6引入的
-
//定义一个学生的类 class Student //构造器 constructor(name) this.name=name; //方法 hello() alert("hello"); //使用 var xiaoming=new Student("xiaoming"); xiaoming.hello();
继承
//定义一个学生的类
class Student
//构造器
constructor(name)
this.name=name;
//方法
hello()
alert("hello");
//继承
class Xi extends Student
constructor(name,grade)
super(name);
this.grade=grade;
myGrade()
alert(this.name+"::"+this.grade);
//使用
var xiaoming=new Xi("xiaoming",28);
xiaoming.myGrade();
原型链
-
__proto__ -
Object的原型对象是自己，原型对象的构造器是Object（一个环）
以上是关于JavaScript24_DOM编程：div的原型链的主要内容，如果未能解决你的问题，请参考以下文章