SOURCE

let div = document.getElementsByTagName('div')
let span = document.createElement('span')
let input = document.getElementsByTagName('input')

div[0].innerText = 'test'
div[0].clientHeight
div[0].clientWidth
div[0].appendChild(span)
document.getElementsByTagName('span')[0].innerText = '这是内部的span标签'


document.getElementsByTagName('span')[0].style.fontSize = '12px'

setStyle(span, [{ fontSize: '14px' }, { color: 'red' }])

function setStyle(element, arr) {
    arr.forEach((item, index) => {
        // 传入样式，将所有样式应用到指定的标签上
        element.style[Object.keys(item)] = Object.values(item)
    })
}

function Person() {
    Object.defineProperty(this, 'job', {
        get() {
            return this.job
        },
        set(job) {
            this.job = job
        }
    })
    this.say = function() {
        console.log('这是构造函数的方法')
    }
}

Person.job = '程序员'
Person.job ? span.innerText = Person.job : '这是内部的span标签'

input[0].addEventListener('input', function(){
    Person.job = input[0].value === '' ? '程序员' : input[0].value
    span.innerText = Person.job
})

let p = new Person()

p.say()


class Ming {
    constructor() {
        this.name = '小明'
    }
    say() {
        console.log('这是类的方法')
    }
}

let m = new Ming()

m.say()
console.log(m.name)

class Xiao extends Ming{
    constructor() {
        super()
    }
}

let x = new Xiao()

x.say()

<div class="classDiv" id="idDiv" data-test-444></div>
简单的双向绑定
<input type="">

div {
    width: 100px;
    height: 100px;
    background-color: greenyellow;
}