Js_Dom(2)__Dom基础<方法(重点)>
2017-08-08 18:57
369 查看
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>
相关文章推荐
- Js_Dom(3)__Dom基础<节点常用属性方法和table>
- Js_Dom(7)__Dom基础<Dom的12种节点(转载)>
- Js_Dom(8)__Dom基础<画布canvas>
- Js_Dom(1)__Dom基础<对象和document>
- Js_Dom(4)__Dom基础<回流与重绘>
- SQL Server XML基础学习之<6>--XQuery的 value() 方法、 exist() 方法 和 nodes() 方法
- editor多功能文本框在有些计算机上不能正常加载,解决方法,本人用的是把js调用方法放到<body></body>后面)
- js基础之"++"操作符 以及 Dom方法appendChild()
- angularJS<六、$scope里的$watch方法>
- JavaScript入门<3>JS外置对象:HTML DOM与Window子对象实例详解
- JavaScript(7)__Js基础<构造>
- js基础之DOM中document对象的常用属性方法
- js获取系统时间的几种方法<二> 《网摘学习》
- HTML中的<table>标签及其子元素标签,JS中DOM对<table>的操作
- SQL Server XML基础学习之<7>--XML modify() 方法对 XML 数据中插入、更新或删除
- C#控制台基础 list<>初始化的两种方法
- JQuery 主页面调用子页面(<iframe>)中的JS方法,子页面调用主页面的JS方法
- 【Android基础 007】 <meta-data>使用方法
- JavaScript(6)__Js基础<对象>
- jquery<=======>js实现方法