江苏龙网

  1. 主页 > 生活百科 > >

快速了解JavaScript的DOM模型( 五 )

DOM模型


var fragment = document.createDocumentFragment();继承了Node的所有方法，用于执行针对文档的DOM操作 。可以通过appendChild()或insertBefore()添加到文档中相应位置，但本身不会成为文档树的一部分 。来看下面的HTML 示例代码：
<ul id="ulId"></ul>我们给<ul id=ulId></ul>添加3个列表项 。可以使用文档片段来保存创建的列表项，一次性将它们添加到文档中，避免浏览器反复渲染 。
var fragment = document.createDocumentFragment();var ul = document.getElementById("myList");var li = null;for (var i=0; i < 3; i++){li = document.createElement("li");li.appendChild(document.createTextNode("Item" + (i+1)));fragment.appendChild(li);}ul.appendChild(fragment);DOM查找现在有一段html页面模板
...<style>.container {background-color: blue;width: 55%;height: 55%;}</style>...<div class="container" id="divId1">Div Text One</div><p class="container" id="pId1">P Text One</p><a class="container" id="aId1">A Text One</a><div class="container" id="divId2">Div Text Two</div><form id="primary-form" action="#" method="get"><p>UserName: <input type="text" name="input-name"></p><p class="container">NickName: <input type="text" name="input-name"></p><p>Email: <input type="text" name="input-email"></p><input type="submit" value=https://www.isolves.com/it/cxkf/yy/js/2021-11-16/"Submit">...在该模板中，我们想要获取这些标签元素，可以使用document对象获取的几种方法：
id选择器getElementById(elementId: string): HTMLElement | null;
该方法返回匹配指定id属性的元素节点，如果不存在，则返回null 。
下面通过id选择器来获取id为aId1的元素：
let div = document.getElementById("aId1");console.log(div);// <a class="container" id="aId1">A Text One</a>注意：严格匹配，包括大小写 。如果写成document.getElementById("aid1")，输出为null 。
标签选择器getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
该方法返回匹配指定HTML标签名的元素列表 。返回的是一个类似数组对象（HTMLCollection实例），可以实时反映HTML文档的变化，如果不存在，则返回null 。
let inputs = document.getElementsByTagName('input');console.log(inputs);/* HTMLCollection(4) [input, input, input, input, input-name: input, email: input]*/

快速了解JavaScript的DOM模型

文章插图
 
这个对象可以使用length属性获取元素数量，使用数组语法或item()方法来访问HTMLCollection对象中的项 。
inputs.length;// 输出p标签的数量inputs[0].id;// 输出p标签集合中第一个元素的id特性的名称inputs.item(0).className;// 输出p标签接种中第一个元素的class特性的名称还可以通过namedItem()方法根据元素的name特性获取集合中的项 。
var nameOfInput = inputs.namedItem("input-name");也可以使用方括号语法来访问：
var nameOfInput = inputs["input-name"];要想取得文档中的所有元素，可以向getElementsByTagName()中传入"*"，表示"全部" 。
var allElements = document.getElementsByTagName("*");name选择器getElementsByName(elementName: string): NodeListOf<HTMLElement>;
该方法返回匹配name属性的所有元素，返回值是NodeList，如果不存在，则返回null 。
var names = document.getElementsByName("input-name");console.log(names);
快速了解JavaScript的DOM模型

文章插图
 
注意，这个选择器在不同浏览器的效果是不同的，比如在IE和Opera浏览器下，这个方法也会返回id属性为这个值的元素 。在使用的时候，应该小心使用，尽量保证name不和其它元素的id一致 。
类选择器getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;是HTML5中添加的方法 。
该方法返回匹配class属性的所有元素，返回值是HTMLCollection，如果不存在，则返回null 。
// 获取所有class中同时包含'red'和'test'的元素var classes = document.getElementsByClassName("container");console.log(classes);
快速了解JavaScript的DOM模型


推荐阅读


上一篇：洗缩水的毛衣怎么还原？

下一篇：劳务派遣出国打工靠谱吗？