学习笔记

0130-继承-DOM-HTML排序

Posted on 2022-01-30，7 min read

原型继承

  1. 创建新函数，并使用call()绑定this；
  2. 使用空函数new F()指向父原型；
  3. 修复子原型的constructor为子原型；
  4. 尽量将封装一个inherits函数实现继承；
    例子
function inherits(Child, Parent) {
    var F = function () {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}
  • 通过inherits继承原型
function Student(props) {
    this.name = props.name || 'Unnamed';
}
Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
}

function PrimaryStudent(props) {
    Student.call(this, props);
    this.grade = props.grade || 1;
}

// 实现原型继承链:
inherits(PrimaryStudent, Student);

// 绑定其他方法到PrimaryStudent原型:
PrimaryStudent.prototype.getGrade = function () {
    return this.grade;
};

ES6新增的class可以使原型的继承更为简单

//父对象模型
class Student {
    constructor(name) {
        this.name = name;
    }
    hello() {
        alert('Hello, ' + this.name + '!');
    }
}
//新建对象
var xiaoming = new Student('小明');
xiaoming.hello();
//子对象模型
class PrimaryStudent extends Student {
    constructor(name, grade) {
        super(name); // 记得用super调用父类的构造方法!
        this.grade = grade;
    }

    myGrade() {
        alert('I am at grade ' + this.grade);
    }
}

DOM选择相关

document.getElementById()  //具有唯一性
document.getElementsByTagName()   //不具有唯一性，返回一组DOM节点
document.getElementsByClassName()   //不具有唯一性
// 先定位ID为'test-table'的节点，再返回其内部所有tr节点：
var trs = document.getElementById('test-table').getElementsByTagName('tr');
// 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点：
var reds = document.getElementById('test-div').getElementsByClassName('red');
// 获取节点test下的所有直属子节点:
var cs = test.children;
// 获取节点test下第一个、最后一个子节点：
var first = test.firstElementChild;
var last = test.lastElementChild;
// 通过querySelector获取ID为q1的节点：
var q1 = document.querySelector('#q1');
// 通过querySelectorAll获取q1节点内的符合条件的所有节点：
var ps = q1.querySelectorAll('div.highlighted > p');
//练习，评论区回答
var arr = document.querySelectorAll('.c-red.c-green>p');
var arr = document.getElementsByClassName('c-red c-green')[0].children;
var arr = document.querySelectorAll(".c-red.c-green p");
// 选择<p>Haskell</p>:
var haskell = document.querySelector("#test-div div:last-child p:last-child");

p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
p.innerText = 'ABC';
// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';

插入DOM

  • 插入最后
    DOM节点为空，如，<div></div>，使用innerHTML = '<span>child</span>'插入新的子节点，但会覆盖原来的子节点；
    若非空，则可以用appendChild把一个子节点添加到父节点的最后一个子节点。
    原结构：
<!-- HTML结构 -->
<p id="js">JavaScript</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

把<p id="js">JavaScript</p>添加到<div id="list">的最后一项：

var
    js = document.getElementById('js'),
    list = document.getElementById('list');
list.appendChild(js);

修改后的结构：

<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="js">JavaScript</p>
</div>

上面是把之前存在的节点移动到新位置，更多需要新建节点，应该如下：
新语句：
document.createElement('p');——创建元素；
d.setAttribute('type', 'text/css');——设置对象属性；

var
    list = document.getElementById('list'),
    haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);

var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }'; //‘p’用来确定是<p>还是其他，如<h1>等；
document.getElementsByTagName('head')[0].appendChild(d);
  • 插入指定位置
    使用parentElement.insertBefore(newElement, referenceElement);，插入到referenceElement之前
<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>
<script>
var
    list = document.getElementById('list'),
    ref = document.getElementById('python'),
    haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);
</script>
<!-- *新* HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="haskell">Haskell</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

循环一个父节点的所有子节点，可以通过迭代children属性实现将所有子节点写入某数组中；
复习下面的代码：

<!-- HTML结构 -->
<ol id="test-list">
    <li class="lang">Scheme</li>
    <li class="lang">JavaScript</li>
    <li class="lang">Python</li>
    <li class="lang">Ruby</li>
    <li class="lang">Haskell</li>
</ol>

对HTML内容排序

//直接排序
list = document.getElementById('test-list');
sort = Array.from(list.children).sort((a, b) => a.innerText > b.innerText ? 1:-1);
for (let e of sort) list.appendChild(e);
//获取文本排序后返回
list = Array.from(document.getElementById('test-list').children);
sort = list.map(element => element.innerText).sort();
list.map((element, index) => element.innerText = sort[index])
//自己最开始写的笨方法
let c = [];
let pz = document.getElementById('test-list');
for(let i = 0; i < pz.children.length; i++){
  c[i] = pz.children[i].innerText;
}
let s = c.sort();
let ht;
for (x of s){
  ht = ht + '<li class="lang">' + x +'</li>' + " ";
}

下一篇： 0129小结→

阅读量 loading...
▲