浅谈javascript DOM

浅谈javascript DOM

一查找元素节点

1，通过id名获取

var obj=document.getElementById("d1");

console.log(obj)

console.log(obj.id) ;//  获取元素的id名

console.log(obj.className);//  获取元素的class名

console.log(obj.innerText);//  获取元素的文本内容(去除标签级属性，只保留内容)

console.log(obj.innerHTML);//  获取元素的文本结构(不去除标签)

console.log(obj.title);//cd  获取元素的title属性

2.通过便签名获取集合，然后通过下标或者item()访问

var arr=document.getElementsByTagName("div");

console.log(arr);

console.log(arr.item(0).innerHTML);

console.log(arr[0].innerHTML);

3. 通过class类名获取集合，然后通过下标或者item()访问

var arr=document.getElementsByClassName("cd");

console.log(arr);

console.log(arr.item(0).innerHTML);

console.log(arr[1].innerHTML);

二查找节点

种类：所有子节点，第一个子节点，最后一个子节点 前一个兄弟节点，后一个兄弟节点，父节点,属性节点。

a,查找子节点

console.log(document.body.firstChild);//第一个元素（包括文本节点）

console.log(document.body.lastChild);;//最后一个元素（不包括文本节点）

console.log(document.body.children);//标签集合 htmlCollection（类似于数组的集合）

console.log(document.body.childNodes);//节点列表 nodelist

b,查找相邻节点

var obj=document.getElementById("d1");

console.log(obj.previousSibling) //文本节点

console.log(obj.nextSibling) //文本节点

c,查找父节点

var obj=document.getElementById("d1");

console.log(obj.parentNode)

d,查找属性节点

var obj=document.getElementById("d1");

console.log(obj.getAttribute("title"))

【说明】获取元素属性，除了class用属性className之外，其他属性建议用 getAttribute()方法获取

//修改元素属性值  setAttribute(属性名，值)