js中总结

最新推荐文章于 2024-05-20 15:17:08 发布

逻辑1573

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量45

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_46681256/article/details/130273124

版权

DOM

Document Object Model文档对象模型，将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM ：针对所有文档类型的标准模型

XML DOM ：针对XML 文档的标准模型

HTML DOM ：针对HTML 文档的标准模型
核心DOM

包括的对象	释义
Document对象	文档对象
Element对象	元素对象
Attribute对象	属性对象
Text对象	文本对象
Comment对象	注释对象
Node对象	节点对象，其他5个对象的父对象

功能：控制html文档的内容获取页面标签(元素)对象Element：document.getElementById("id值")，通过元素id，获取元素对象

浏览器网页就是一个DOM树形结构

更新：更新DOM节点
遍历DOM节点：得到DOM节点
删除：删除一个DOM节点
添加：添加一个新的DOM节点

要操作一个DOM节点，就必须要先获取这个DOM节点。

获得dom节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    //对应css选择器
    let h1 = document.getElementsByTagName('h1');
    let p1 = document.getElementById('p1');
    let p2 = document.getElementsByClassName('p2');
    let father = document.getElementById('father');

    let childrens = father.children;//获取父节点下的所有子节点
    let children0 = father.children[0];
    // father.firstChild
    // father.lastChild
</script>
</body>
</html>

更新DOM节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="id1">

</div>
<script>
    let id1 = document.getElementById("id1");
    id1.innerText = 'abc'
</script>

</body>
</html>

操作文本

id1.innerText='123'修改文本的值
id1.innerHTML='<strong>234</strong>' 可以解析html文本标签

操作css

id1.style.color='red' //属性使用字符串包裹
"red"
id1.style.fontSize='50px' //下划线转驼峰命名
"50px"
id1.style.padding='1em'
"1em"

删除DOM节点

删除节点的步骤：先获取父节点，在通过父节点删除自己

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    //对应css选择器
    let h1 = document.getElementsByTagName('h1');
    let p1 = document.getElementById('p1');
    let p2 = document.getElementsByClassName('p2');
    let father = document.getElementById('father');
    
    //father.removeChild(p1);
    let ff = p1.parentElement;
    ff.removeChild(p1);
    
    //删除是一个动态的过程
    //ff.removeChild(ff.children[0])
    //ff.removeChild(ff.children[1])
    //ff.removeChild(ff.children[2])
    
    
</script>
</body>
</html>

创建插入DOM节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="js">javascript</p>
<div id="list">
    <p id="se">se</p>
    <p id="ee">ee</p>
    <p id="me">me</p>
</div>

<script>
    let js = document.getElementById('js');
    let list = document.getElementById('list');

    list.appendChild(js);//追加
</script>

</body>
</html>

创建一个新的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="js">javascript</p>
<div id="list">
    <p id="se">se</p>
    <p id="ee">ee</p>
    <p id="me">me</p>
</div>

<script>
    let js = document.getElementById('js');//已存在的节点
    let list = document.getElementById('list');

    list.appendChild(js);

    //通过js创建一个新的节点
    let newP = document.createElement('p');
    newP.id ='newP';
    newP.innerText = 'hello';
    list.appendChild(newP);

    //创建一个标签节点（通过这个属性，可以设置任意的值）
    let myScript = document.createElement('script');
    myScript.setAttribute('type', 'text/javascript');
    list.appendChild(myScript);

    //创建一个style标签
    let myStyle = document.createElement('style');//创建一个空style标签
    myStyle.innerHTML = 'body {background-color: green;}';//设置标签内容
    document.getElementsByTagName('head')[0].appendChild(myStyle);//追加
</script>

</body>
</html>

初识JQuery及公式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn引入-->
    <!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
    <!--本地导入-->
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<!--
公式：$(selector).action()
-->

<a href="" id="test-jquery">点我</a>

<script>
    // document.getElementById('');
    //选择器就是css选择器
    $('#test-jquery').click(function () {
        alert('hello')
    })
</script>
</body>
</html>

JQuery选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //原生js,选择器少，麻烦不好记
    //标签
    document.getElementsByTagName();
    //id
    document.getElementById();
    //类
    document.getElementsByClassName();

    //JQuery  css中的选择器它全部都能用
    $('p').click();  //标签选择器
    $('#id1').click();//id选择器
    $('.class1').click();//class选择器
</script>

</body>
</html>

JQuery操作Dom元素

节点文本操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

<script>
    $('#test-ul li[name=python]').text();//获取值
    $('#test-ul li[name=python]').text('123');//设置值
    $('#test-ul').html();//获得值
    $('#test-ul').html('<stong>123</stong>');//设置值
</script>

</body>
</html>

css操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

<script>
    $('#test-ul li[name=python]').css('color','red')
</script>

</body>
</html>

逻辑1573

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中总结

Document Object Model文档对象模型，将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作W3C DOM 标准被分为 3 个不同的部分：核心 DOM ：针对所有文档类型的标准模型XML DOM ：针对XML 文档的标准模型HTML DOM ：针对HTML 文档的标准模型控制html文档的内容：document.getElementById("id值")，通过元素id，获取元素对象浏览器网页就是一个DOM树形结构。
复制链接

扫一扫