一,关系
javascript 有三部分构成,ECMAScript,DOM和BOM。
DOM【document object,model】
DOM描述了处理网页内容的方法和接口,BOM描述了与浏览器进行交互的方法和接口。
二,DOM html(DOM树)
节点遍历:
node.parentNode
node.firstChild
node.lastChild
node.previousSibling
node.nextSibling ..
元素遍历:
p.firstElementChild
p.lastElementChild..
三,节点操作
1.获取节点--可维护性差
父子关系:parentNode
兄弟关系:previousSibling/previousElementSibling
getElementById,getElementByTagName,getElementByClassName,querySelect/All符合条件的第一个/全部。
ById只能用document调用,并且返回值是唯一的,不可以动态集合。
ByTagName可以动态集合。
ByClassName可以动态集合,
Selector 返回值唯一,不可以动态集合。
2.一系列:
创建节点:element=document.creatElement(TagName)
修改节点:element.text节点其后代节点的文本内容。
element.innerText="";
IE9以下:user_last.textContent="要替换的内容";
插入节点:var child=element.appendChild(achild);
element.appendChild(element);要插入到那里
var achild=element.insertBefore(achild,referenceChild)要插入的,插入到什么之前。
删除节点:child=element.removeChild(child);child.parentNode.remove(child);
创建+插入:element.innerHTML存在内存泄漏,安全等问题。
四。练习
查看当前用户数
var users=document.getElementById("users");
var a=document.getElementsByTagName("li");
alert('一共有'+a.length+'个用户');
var users=document.getElementById('users');
var ul=users.getElementsByTagName('ul')[0];
var li=document.createElement("li");
li.className='user';
ul.appendChild(li);
var img=document.createElement("img");
img.src='2.jpg';
li.appendChild(img);
var a=document.createElement("a");
a.href='/user/2';
a.innerText="pig";
li.appendChild(a);