javascript DOM扩展

最新推荐文章于 2023-12-23 00:22:28 发布

daisy_oo

最新推荐文章于 2023-12-23 00:22:28 发布

阅读量288

点赞数 1

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_27597973/article/details/52280946

版权

前端学习专栏收录该内容

26 篇文章 0 订阅

订阅专栏

选择符API：

querySelector()接收一个css选择符，返回与该模式匹配的第一个元素。

querySelectorAll()接收的参数也是css选择符，返回的是一个NodeList的实例。通过item()和方括号来访问它的每个元素。

var body=document.querySelector("body");
var div=document.querySelector("#div");
var className=document.querySelector(".btn");
var img=document.querySelector("img.button");

元素遍历：跨浏览器遍历某元素的所有子元素：

var i,len,child=element.firstChild;
while(child!=element.lastChild){
	if(child.nodeType==1){
		processChild(child);
	}
	child=child.nextSibling;
}

var i,len,child=element.firstElementChild;
while(child!=element.lastElementChild){
	processChild(child);
	child=child.nextElementSibling;
}

HTML5：
getElementByTagName()方法：接收一个参数，包含一或多个类名的字符串，返回带有指定类的所有元素的NodeList。
add(),contains(),remove(),toggle()方法都是之后类名进行操作。

焦点管理：

focus()方法是元素获得了焦点。

hasFocus()方法用于确定文档是否获得了焦点。

插入标记：

innerHTML属性：innerHTML属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的HTML标记。并非所有元素都支持这个innerHTML属性，不支持innerHTML属性的有：<col>、<colgroup>、<frameset>、head>、<html>、<style>、<table>、<tbody>、<thead>、<tfoot>和<tr>。

outerHTML属性：返回调用它的元素及所有子节点的HTML标签。它与innerHTML的区别是它返回的包括它本身，而innerHTML返回的是子节点。

innerAdjacentHTML()方法：接受两个参数：插入位置和要插入的HTML文本。第一个参数必须是下列值之一：

beforebegin:在当前元素之前查入一个紧邻的同辈元素。

afterbegin:在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素。

beforeend:在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素。

afterend:在当前元素之后查入一个紧邻的同辈元素。

//作为前一个同辈元素插入
element.insertAdjacentHTML("beforebegin","<p>hello world</p>");
//作为第一个元素插入
element.insertAdjacentHTML("afterbegin","<p>hello world</p>");
//作为最后一个元素插入
element.insertAdjacentHTML("beforeend","<p>hello world</p>");
//作为后一个同辈元素插入
element.insertAdjacentHTML("afterend","<p>hello world</p>");

注意：在使用innerHTML属性时应该注意内存与性能问题。应该先单独构建字符串，然后再一次性地将结果字符串赋值给innerHTML。

var itemsHtml="";
for(var i=0,len=values.length;i<len;i++){
	itemsHtml+="<li>"+values[i]+"</li>";
}
ul.innerHTML=itemsHtml;

插入文本：

innerText属性：可以操作元素中包含的所有文本内容，包括子文档树中的文本。outerText属性和innerText属性基本上没有多大区别。在读取文本值时，两者的结果完全一样，在写模式时，outerText不只是替换调用它的元素的子节点，而是会替换整个元素。

滚动：
srcollIntoView()、srcolllIntoViewIfNeeded(alignCenter)、scrollByLines(lineCount)、scrollByPages(pageCount).

//将页面主体滚动5行
document.body.scrollByLines(5);
//在当前元素不可见的时候，让它进入浏览器的视口
document.images[0].scrollIntoViewIfNeeded();
//将页面主体往回滚动1页
document.body.scrollByPages(-1);