查找元素节点
JavaScript DOM中存在着很多不同类型的节点。常用的有三种,分别是元素节点,属性节点,文本节点。
如果您还不了解常见的JavaScript DOM查找元素节点的方法,请查阅JavaScript DOM与jQuery的比较(一)–页面加载完成事件与获取节点。
创建节点
比较项 | JavaScript | jQuery |
---|---|---|
创建元素节点 | document.createElement() | $() |
创建属性节点 | document.createAttribute() | $() |
创建文本节点 | document.createTextNode() | $(文本) |
注:
1.jQuery中的 tagName 代表标签名,实际应用中应该根据需要选择自己需要的标签。
2.动态创建的新的元素节点不会被自动添加到文档中,需要使用其他方法将其插入到文档中。
插入节点
JavaScript常用的插入节点的方法有:
appendChild:向目标标签末尾添加子节点,返回参数节点。
insertBefore:向目标节点的第二个参数位置添加第一个参数为子节点,返回第一个参数。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<ul id="list">
</ul>
<script type="application/javascript">
var listEle = document.getElementById('list');
// 创建元素节点、属性节点、文本节点
var liEle = document.createElement('li');
var attr = document.createAttribute('title');
var text = document.createTextNode('JavaScript创建');
attr.value = 'JavaScript';
// 将属性节点、文本节点添加到属性节点上
liEle.appendChild(text);
liEle.setAttributeNode(attr);
// 将新创建的元素节点添加到文档中
listEle.appendChild(liEle);
var $liEle = $('<li title="jQuery">jQuery创建</li>');
$('#list').append($liEle);
// 在第一个节点的位置插入该节点
var position = listEle.firstElementChild;
var liEle2 = document.createElement('li');
listEle.insertBefore(liEle2, position);
</script>
</body>
</html>
属性操作
比较项 | JavaScript | jQuery |
---|---|---|
获取属性 | getAttribute(key) | attr(key) |
设置属性 | setAttribute(key, value) | attr(key, value) |
删除属性 | removeAttribute(key) | removeAttr(key) |
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="container" class="wrapper">
<div class="myclass" title="div1">div1</div>
<div class="myclass" title="div2">div2</div>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// js 属性节点操作
console.log(document.getElementById('container').getAttribute('class'));
document.getElementById('container').setAttribute('class', 'wrapper2');
console.log(document.getElementById('container').getAttribute('class'));
// jQuery属性节点操作
console.log($('#container').attr('class'));
$('#container').attr('class', 'wrapper3');
console.log($('#container').attr('class'));
$('#container').removeAttr('class');
console.log($('#container').attr('class'));
// js 元素节点列表下属性操作
// console.log(document.getElementsByClassName('myclass').getAttribute('title')); // TypeError
// document.getElementsByClassName('myclass').setAttribute('title', 'div3'); // TypeError
// jQuery元素节点列表下属性操作
console.log($('.myclass').attr('title'));
$('.myclass').attr('title', 'divjquery');
console.log($('.myclass').attr('title'));
</script>
</body>
</html>
注:
1.getAttribute方法和setAttribute方法,都只能通过元素节点对象调用。
设置和获取HTML、文本和值
比较性 | JavaScript | jQuery |
---|---|---|
HTML | innerHTML | html() |
文本 | innerText | text() |
值 | value | val() |
注:
1.通常使用innerHTML来添加、删除、修改文档中的HTML节点,而不是通过之前的方法。