这篇文章是用来记录我学习webAPI的收获:
其中innerText和textContent的点是参考 郝壮_7b3d转载的一篇文章的。
今天是重新复习webAPI的第一天
什么是webAPI?
API(Application Programming Interface 应用程序接口)其实就是一组工具,是一些预定义的函数,目的是方便开发人员。
而webAPI是浏览器提供的一套工具,这些工具可以操作浏览器。
js的组成:1.ECMAScript :定义了一系列的规范
2.DOM : 文档对象模型(一个网页可称为文档,而document就是这个对象,网页中所有内容都是节点)
3.BOM : 浏览器对象模型
Document是一个树形结构
图片:
当要操纵页面中的元素时,首先得获取它,这下面是获取元素的几个方法:
1.document.getElementById() 通过id来获取单个元素,这里有两个注意的点:
【1】.只能通过document来获取,不能通过其他元素获取
【2】.获取的元素并非是实时的
2.document.getElementsByTagName()/elem.getElementsByTagName()通过标签名来获取一组元素,没有兼容性问题,且获取的实时的,很好用
3.document.getElementsByClassName()/elem.getElementsByClassName()通过类名来获取一组元素,这里有两个注意的点:
【1】.获取的元素是实时的
【2】.IE9以下不支持
4.document.querySelector()这种是可以用css选择器的写法来获取一组匹配元素中的第一个,document.querySelectorAll()也是,不过这个是获取一组,这两个获取到的元素也不是实时的。
innerText和innerHTML:
两个都能获取调用它的开始标签到结束标签中的内容,只是第一个仅能获取文本内容并不识别标签,而第二个可以获取到所有子节点(包括文本节点,注释节点,元素节点…)。
且第一个会忽略换行,第二个不会。
这两个也可以用于设置元素内容:
element.innerText = ‘…’;
element.innerHTML = ‘…’
但要注意用这两个设置内容时原先的内容全会消失,被新内容代替。
innerText和textContent:
【1】.innerText的显示依赖于浏览器,而textContent的显示依赖于代码的书写:
【2】.textContent可以显示
这两者的兼容性:
谷歌两个都支持
新版的Firefox两个都支持,旧版的只支持textContent
IE9及以上两个都支持,旧版仅支持innerText