javascript DOM操作

1.document.getElementByName(); 根据标签元素内的属性name来获取标签的信息
例如
<input type="text" value="获取的值" name="username"/>
<script>
alert(document.getElementByName("username")[0].value)
</script>
2.document.getElementsByTagName() 根据标签名来获取标签元素的信息
<div>div1<div>
<div>div2</div>
<script>
document.getElementByTagName('div')[0].innerHTML;
</script>
3.document.getElementsByClassName() 通过标签内的class属性来获取元素的信息
<div class="div1">
1
</div>
<div >
2
</div>
<script>
var str = document.getElementsByClassName('div1')[0].innerHTML;
alert(str);
</script>
4.document.querySelector()  根据CSS选择器的规则，返回第一个匹配到的元素
document.querySelectorAll(); 根据CSS选择器的规则，返回所有匹配到的元素
<div class="div1">
1
</div>
<div >
2
</div>

<script>
var str = document.querySelector('.div1').innerHTML;
alert(str);   
</script>
5.文档节点操作
1、parentNode    获取该节点的父节点    
2、childNodes    获取该节点的子节点数组
3、firstChild    获取该节点的第一个子节点
4、lastChild    获取该节点的最后一个子节点
5、nextSibling    获取该节点的下一个兄弟元素
6、previoursSibling    获取该节点的上一个兄弟元素
7、nodeType    节点的类型，9代表Document节点，1代表Element节点，3代表Text节点，8代表Comment节点，11代表DocumentFragment节点
8、nodeVlue    Text节点或Comment节点的文本内容
9、nodeName    元素的标签名(如P,SPAN,#text(文本节点),DIV)，以大写形式表示
6.作为元素树的文档
1、firstElementChild        第一个子元素节点
2、lastElementChild        最后一个子元素节点
3、nextElementSibling        下一个兄弟元素节点
4、previousElementSibling    前一个兄弟元素节点
5、childElementCount        子元素节点个数量
注意，此5个方法文本节点不算进去
7.获取元素的数值值 非标准HTML属性
document.getElementById("img1").setAttribute("src", "small.jpg");
alert(document.getElementById("img1").getAttribute("class"));
8.Attr节点属性
<p class="namevalue">333</p>
<script>
alert(document.getElementsByTagName('p')[0].attributes.class.value) 获取
document.getElementsByTagName('p')[0].attributes.class.value = 'xin_namevalue';
</script>
8.innerText textContent 当标签里面没有内容 textContent 返回"" innerText返回 undefined
innerHTML 返回标签里面的所有内容
9.创建、插入、删除
创建文本节点
<div class="div1">
    <div class="div2">111</div>
    <div class="div3">222</div>
</div>
<p class="namevalue">333</p>
<script>
document.getElementsByTagName('div')[0].appendChild(document.createTextNode("<p>js动态添加...</p>"))
</script>

删除文本节点
<div class="div1">
    <div class="div2">111</div>
    <div class="div3">222</div>
</div>
<p class="namevalue">333</p>
<script>
//document.getElementsByTagName('div')[0].appendChild(document.createTextNode("<p>js动态添加...</p>"))
document.getElementsByTagName('div')[2].remove();
</script>

创建一个元素节点
document.createElement();
appendChild() 将一个节点插入到调用节点的最后面
insertBefore（）两个参数 第一个参数为插入的节点，第二个参数为要插入那个节点之前
<div class="div1">
</div>
<script>
var parent = document.getElementsByTagName('div')[0];
var create = document.createElement("p");
create.textContent = '创建P节点';
parent.appendChild(create);
document.body.insertBefore(create,parent);
</script>
删除节点
removeChild();    由父元素调用，删除一个子节点。注意是直接父元素调用，删除直接子元素才有效，删除孙子元素就没有效果了
<div >
<div>11111111111</div>
</div>
<script>
document.getElementsByTagName('div')[0].removeChild(document.getElementsByTagName('div')[1]);
</script>

replaceChild(newNode,oldNode)
<div >
<div>11111111111</div>
</div>
<script>
document.getElementsByTagName('div')[0].replaceChild(document.createTextNode("FFFFF"),document.getElementsByTagName('div')[1]);
</script>

10.运用javascript 通过元素的style属性可以随意读取和设置元素的CSS样式
<div >
111111111
</div>
<script>
document.getElementsByTagName('div')[0].style.background="red";
document.getElementsByTagName('div')[0].style.height="30px";
document.getElementsByTagName('div')[0].style.margin="auto";
document.getElementsByTagName('div')[0].style.width="100px";
document.getElementsByTagName('div')[0].style.padding="5px";
</script>