本文共 2679 字，大约阅读时间需要 8 分钟。
目录
1 获得元素对象的方式(DOM)
1.1 直接获得的方式：
//获得id名称是div1的对象
var div= document.getElementById("div1");
//获得所有的input标签对象 HTMLCollection
var inp = document.getElementsByTagName("input")[0];
//NodeList 获得name属性等于inp的所有的节点对象
var inp= document.getElementsByName("inp");
//通过class 的名称可以获得对象
document.getElementsByClassName("inp1");
1.2 间接获得对象的方式：
//获得div下的所有的子节点
空白的文本也是一个节点
var child= div.childNodes;
//获得当前节点的父级节点---直系父节点
var parent= inp.parentNode;
//获得当前节点的上一个节点
var pre= inp.previousSibling.previousSibling;
//获得上一个节点对象不包含空白文本var pre1=span.previousElementSibling;
//获得当前节点的下一个节点
var next=inp.nextSibling.nextSibling;
//获得下一个元素节点 不包括空白文本
var next2=span.nextElementSibling;
代码：
效果:
2 操作元素属性
//获得id名称是inp1对象节点
var inp1=document.getElementById("inp1");
2.1 方式一：
获得元素的属性
var ty=inp1.type;
var va=inp1.value;
var na=inp1.name;
//操作元素的属性
inp1.type="button";
inp1.value="测试改变";
2.2 方式二：
获得元素的属性
var ty1=inp1.getAttribute("type");
//获得属性的默认值
var va2=inp1.getAttribute("value");
2.3 方式三：
操作元素的属性
inp1.setAttribute("type","button");
代码：
效果：
3 操作元素样式
获得id名称是div1的对象
var div =document.getElementById("div1");
获得css样式 只是支持行内样式的css
var wi=div.style.width;
var hi=div.style.height;
操作元素的css样式
对于 background-color格式的样
式在js中需要使用驼峰规则进行改变
div.style.width="300px";
div.style.height="300px";
div.style.backgroundColor="red";
通过操作类操作元素样式
通过增加class类来增加对应的css样式
注意：className
div.className="div2";
代码：
效果：
4 操作元素文本和值
//获得div1的对象
var div=document.getElementById("div1");
//获得元素的文本内容
//会获得里面的HTML中的内容
var inn=div.innerHTML;
//只会获得文本的信息
var inn2=div.innerText;
//会识别HTML信息
div.innerHTML="<h1>我们没有什么不一样</h1>"
//不会识别HTML的信息
div.innerText+="<h1>我们没有什么不一样</h1>"
注意：
* 双标签有innerHTML和innerText,
*
* 单标签获得的时候都是用value获得
* 特殊的标签：
*
*
select、textarea*
代码：
效果：
5 操作元素
创建节点的方法
document.createElement(“div")：
加入节点的方法
parentNode.appendChild(childElement)：末尾追加
方式插入节点
parentNode.insertBefore(newNode,beforeNode)：在
指定节点前插入新节点
删除节点的方法
parentNode.removeChild(childNode)
p.remove();
替换节点的方法
parentNode.replaceChild(newNode, oldNode)
效果：
转载地址：http://sdzr.baihongyu.com/