1、getelementbyid方法
此方法返回一个有着给定id属性值的对象，例如一个img元素id值为logo：
<img src="a.jpg" id="logo" />
那么我们可以通过该方法建立该属性值的对象并赋给变量img：
var img = document.getelementbyid('logo');
注意：应该在body标签结束之前引入，不要放置于body标签开头。
2、getelementsbytagname方法
这个方法会返回包含所有指定参数标签的对象数组，它的参数为标签的名字。
例如：
<h1>语言</h1>
<p>java</p>
<p>c++</p>
<h1>java web框架</h1>
<p>spring mvc</p>
<p>hibernate</p>
<script type="text/javascript">
var p = document.getelementsbytagname('p');
alert(p.length)
</script>
将会输出4，因为该页面中有4个<p>元素
3、getelementsbyclassname方法
这个方法可以通过一个元素的class属性来访问元素，参数为类名，返回值为具有相同类名元素的数组。
例如：
<p class="test">
<p>java</p>
</p>
<p class="test">
<p>c++</p>
</p>
<script type="text/javascript">
var p = document.getelementsbyclassname('test');
alert(p.length)
</script>
将会输出2
4、getattribute方法
此方法不属于document对象，它只能通过元素节点对象调用。
它的参数是你打算查询的属性的名字。
例如：
<p title="编程语言">java、c++</p>
<p title="java框架">spring、hibernate</p>
<script type="text/javascript">
var paras = document.getelementsbytagname("p");
for(var i = 0; i < paras.length; i++)
alert(paras[i].getattribute("title"));
</script>
将会弹出两个提示框分别是：编程语言、java框架
5、setattribute方法
setattribute方法用来对属性节点的值做出修改。类似getattribute，setattribute也只能用于元素节点。它有两个参数：你需要修改的属性的名字和你想修改的值。
<p title="编程语言">java、c++</p>
<p title="java框架">spring、hibernate</p>
<script type="text/javascript">
var paras = document.getelementsbytagname("p");
for(var i = 0; i < paras.length; i++)
{
paras[i].setattribute("title","hello");
alert(paras[i].getattribute("title"));
}
</script>
将会弹出两个提示框：都是hello
6、children属性
同样children不属于document对象，它也只能通过元素节点对象调用
children属性可以用来获取一个元素的所有dom元素，返回包含这个元素所有子元素的数组。
例如：
<p>java、c++</p>
<p>spring、hibernate</p>
<script type="text/javascript">
var para = document.getelementsbytagname("body")[0];
alert(para.children.length)
</script>
将会输出3，因为有两个<p…/>属性和一个<script…/>属性
7、childnodes属性
这个方法类似children方法，不过childnodes方法会返回一个元素包含的所有元素，包含文本节点。
例如：
<p>java、c++</p>
<p>spring、hibernate</p>
<script type="text/javascript">
var para = document.getelementsbytagname("body")[0];
alert(para.childnodes.length)
</script>
将会输出6，因为有两个<p…/>属性和一个<script…/>属性，每个<p…/>属性和<script…/>各自包含一个文本元素。
8、nodetype属性
nodetype属性值可以让我们知道自己正在与哪一种节点打交道，它只能通过元素节点对象调用。其中：
元素节点的nodetype为1，属性结点为2，文本节点为3
<p>java、c++</p>
<p>spring、hibernate</p>
<script type="text/javascript">
var para = document.getelementsbytagname("body")[0].childnodes;
for(var i = 0; i < para.length; i++)
alert(para[i].nodetype);
</script>
将会输出3、1、3、1、3、1
9、firstchild和lastchild属性
node.firstchild等价于node.childnodes[0]，
node.lastchild等价于node.childnodes[node.childnodes.length-1]
10、createelement方法
该方法可以创建一个元素节点，例如：
var para = document.createelement("p");
这仅仅只是创建一个元素节点对象，并没有插入到html中。
11、appendchild方法
如果我想让上面新创建的<p>节点成为某个元素的子节点，那么我们可以使用这个方法。例如：
var test = document.getelementbyid("testid");
var para = document.createelement("p");
test.appendchild(para);
上述代码的执行效果为将<p>元素插入到了id属性值为testid的节点中。
12、createtextnode方法
插入一个<p>元素后，我们可以通过createtextnode方法来为这个元素添加内容，例如：
<p id="insert"></p>
<script type="text/javascript">
window.onload = function()
{
var para = document.createelement("p");
var insert = document.getelementbyid("insert");
insert.appendchild(para);
var text = document.createtextnode("hello");
para.appendchild(text);
}
</script>
页面将会输出hello
13、insertbefore方法
insertbefore方法用于把一个新元素插入到一个现有的元素的前面。调用此方法你必须知道：
（1）新元素：你想插入的元素（newelement）
（2）目标元素：你想把这个新元素插入到哪个元素（targetelement）之前。
（3）父元素：目标元素的父元素（parentelement）
parentelement.insertbefore(newelement,targetelement);
示例代码：
<p id="target">
<p>java</p>
</p>
<script type="text/javascript">
window.onload = function()
{
var para = document.createelement("p");
var targetid = document.getelementbyid("target");
var text = document.createtextnode("python");
para.appendchild(text);
targetid.insertbefore(para,targetid.children[0]);
}
</script>
页面将会输出：python java
如对本文有疑问， 点击进行留言回复！！
vuejs （2）- Vue 生命周期 和 VueJS ajax
vue axios blob下载文件，文件下载失败将blob的错误信息转换成json格式
我要评论
网友评论