1.getElementById()
返回带有指定ID的元素//得到元素对象后就可以获取和更改对象的属性
根据指定的 id 属性值得到对象。返回 id 属性值对应的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一个。 如果无符合条件的对象，则返回 null
var test=document.getElementById(‘test’)
2.getElementsByTagName()
返回包含带有指定标签名称的所有元素的节点容器。返回元素的顺序是它们在文档中的顺序,把特殊字符串 "*" 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表
getElementsByName()返回指定name的集合//好像哪个浏览器有个bug,如果name和id同名了,byId方法取到的是name的对象
<p>666</p>
<input type=’text’ name=’test’ value=’666’>
<script>
var test1=document.getElementsByTagName(‘p’)[0]
var test2=document.getElementsByTagName(‘input’)[0].value
</script>
3.getElementsByClassName()
返回包含带有指定类名的所有元素的节点列表容器,顺序是它们在文档中的顺序
var test=document.getElementsByClassName(‘test’)[1]
4.createElement()
创建元素节点,配合下面两个方法才有效果,但是没有效果内存中也是创建了的.参数填要创建的元素名
5.appendChild()
把新的子节点添加到指定节点。调用者是父亲(添加到末尾)
var p=document.createElement('p')
p.innerHTML='6666'//添加标签内容
document.getElementById('test').appendChild(p)//p是test的最后一个儿子了
6.insertBefore()
在指定的子节点前面插入新的子节点。调用者是父亲(添加到前面)
var p=document.createElement('p')
p.innerHTML='666'
var div = document.getElementById("mydiv")
div.insertBefore(p,div.childNodes[0]);//p是div的第一个儿子的哥哥了
7.createAttribute()
创建属性,参数是属性名
8.setAttributeNode()
设置属性节点,注意参数传的是attribut不是node,看下面例子
9.getAttributeNode()
获取属性节点,参数是属性名
<body>
<p id="p1">变红</p>
<p>不变色</p>
<p id="p2">也变红</p>
<script>
var p=document.getElementById('p1')//获取元素节点
varatt=document.createAttribute("style");//创建属性
att.value="color:red;";//设置属性值
p.setAttributeNode(att);//设置属性节点
var p2=document.getElementById('p2');//获取元素节点
var att2=document.createAttribute("style");//创建属性
att2.value=p.getAttributeNode('style').nodeValue;//获取属性节点,得到属性
p2.setAttributeNode(att2);//设置属性节点
</script>
</body>
10.getAttribute()
返回指定的属性值。
11.setAttribute()
把指定属性设置或修改为指定的值(值存在就替换)。
<body>
<a href="http://www.baidu.com"id="baidu">百度</a>
<script>
var baidu=document.getElementById('baidu')//获取元素节点
document.write(baidu.getAttribute('href'))//获取href属性的值
baidu.setAttribute('href','http://www.sina.cn')//设置href属性的值
</script>
</body>
12. createTextNode()
创建文本节点.文本节点没有子元素.
var text=document.createTextNode('hello')//创建文本节点
document.getElementById('p1').appendChild(text)//添加子节点
注意:下面div元素节点的子节点有3个,因为回车算一个空白文本节点
<div>
<li>1</li>
</div>
13.comment 注释节点,没有子节点
①createComment()创建注释节点
var com=document.createComment('hello world!');
document.body.appendChild(com)//因为是注释,所以浏览器翻译文档后不会显示效果可以通过console.log()调试
②appendData()在注释节点里(末尾)添加文本
<body><!--666--></body>
<script>
document.body.childNodes[0].appendData('hello')
console.log(document.body.childNodes[0])
</script>
③deleteData(index,count)从index指定的位置开始删除count个字符
<body><!--666--></body>
<script>
document.body.childNodes[0].deleteData(0,3)
console.log(document.body.childNodes[0])
</script>
④insertData(index,text)从index指定位置插入text文本
⑤replaceData(index,count,text)从index指定位置开始count长度的本文被替换为text文本
⑥substringData(index,count)方法提取从index指定的位置开始count长的字符串
⑦IE8-浏览器将标签名为"!"的元素视作注释节点，所以文档声明<!DOCTYPE html>也被视作注释节点,如果<html>标签外部上下都有注释时，只有firefox可以识别出最下面的注释，其他浏览器都识别不出(体现在document.childNodes.length结果不一样)
14.replaceChild()
替换子节点,注意调用这个方法的对象一定是被替换者的父亲
<body>
<p id="mytest">666</p>
<script>
var textnode=document.createElement('p');//创建元素节点
textnode.innerHTML='111'//给元素节点添加内容
var item=document.getElementById("mytest")//获取节点
item.parentNode.replaceChild(textnode,item);//替换节点
</script>
</body>
15.removeChild()
删除子节点,参数是节点,调用者是父亲
document.body.removeChild(document.getElementById("test"))
16.cloneNode() 克隆节点,
调用者是自己,参数是true,false.不写默认为true,(true子节点也被克隆,包括所有的事件属性各种,false子节点不被克隆)
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div id="div1">
</div>
<script>
var ul=document.getElementsByTagName('ul')[0]
var newchild=ul.cloneNode(true)
document.getElementById('div1').appendChild(newchild)
</script>
</body>
9701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
