JavaScript DOM（二）--DOM操作

最新推荐文章于 2022-05-31 14:11:06 发布

kylin_zdd1993

最新推荐文章于 2022-05-31 14:11:06 发布

阅读量480

点赞数 1

分类专栏： JavaScript 文章标签： javascript dom

本文链接：https://blog.csdn.net/SDUST_JSJ/article/details/74060555

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

查找元素节点

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节点，而不是通过之前的方法。

kylin_zdd1993

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM（二）--DOM操作

查找元素节点JavaScript DOM中存在着很多不同类型的节点。常用的有三种，分别是元素节点，属性节点，文本节点。如果您还不了解常见的JavaScript DOM查找元素节点的方法，请查阅JavaScript DOM与jQuery的比较（一）–页面加载完成事件与获取节点。创建节点比较项 JavaScript jQuery 创建元素节点 document.createE
复制链接

扫一扫