Typescript学习系列---《DOM》

DOM (Document Object Model) 文档对象模型

• DOM是所有浏览器都遵循的规范
• 一个网页就是一个DOM
• document.

  • document.getElementById('xx'):返回一个对象

  • document.getElementsByTagName('li'):返回一组对象

  • document.querySelectorAll('.XX xx'):返回XX中元素为xx的值

  • document.querySelector('.XX xx'):返回XX中元素为xx的结果集的第一条

• element property

  • querySelector

  • innerText

  • firstElementChild

  • childElementCount

  • childNodes

• create element

  • insertBefore

  • append element

var newMember = document.createElement('li');

var newMemberText = document.createTextNode('张三');

newMember.appendChild(newMemberText);

//choose element from DOM
document.querySelector('.artist-list').appendChild(newMember);


/**
 * use insert method to insert into pointed position
 */
var artistList = document.querySelector('.artist-list');

artistList.insertBefore(newMember, artistList.firstChild);