JavaScript学习

最新推荐文章于 2024-05-03 23:30:14 发布

钟记小前端--全栈

最新推荐文章于 2024-05-03 23:30:14 发布

阅读量62

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/qq_40997551/article/details/104222133

版权

学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

第十七课

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="17.js"></script>
</head>
<body>
    <div>
        <!-- LZ树状图在线生成器   lizibuluo.com/tree/ -->
        div1
        <p>p1</p>
        <p>p2</p>
        div2
    </div>
    
</body>
</html>

js

// DOM  ->  文档对象模型

// DOM树：

//         html文件  -》人   -》 网页的数据
//         浏览器 -》数据结构 -》方便  查找  修改 遍历  操作
//         样子  -》树形  
//         DOM 


// 数据结构：
// 线性：  单链表  循环链表   队列  栈  数组
// 树形：  二叉树  平衡树   红黑树
// 网状：  有向图  无向图    -》  寻路算法  A*算法

第十八课

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <script src="18.js"></script> -->
</head>
<body>
    <div id="div1">
        <!-- LZ树状图在线生成器   lizibuluo.com/tree/ -->
        div1
        <p id="p1">p1</p>
        <p id="p2">p2</p>
        <p class="text1">p1</p>
        <p class="text2">p2</p>
        div2
    </div>
</body>
<script src="18.js"></script>

</html>

js

// DOM树
// document  节点：只有一个
// 标签节点   元素节点：
// 文本节点：




// 标签节点   元素节点  ：  样子  样式

// 找到这些节点


// 3种最常用的方法：
// 1.通过ID来查找
// 2.通过标签名字来查找
// 3.通过class来查找

// id  -》 唯一性

// var div1 = document.getElementById("div1");
// var div1 = document.getElementById("p1");    节点

// js 时间线



// var div = document.getElementsByTagName("div");  //返回数组
// var ps = document.getElementsByTagName("p");  
// var p1 = ps[0];   //节点

// var ps = document.getElementsByClassName("text");  //数组
// ps[0];节点




// 1.  id  -》 节点

//         tag  class  -》数组

// 2.id  -》document.getElementById
//         tag class  -> 在标签任意节点上使用

var div1 = document.getElementById("div1");
var ps = div1.getElementsByClassName("text1");

第十九课

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <script src="19.js"></script> -->
</head>
<body>
    <div id="div1">

        <div id="div2">div2</div>
    </div>
    <script src="19.js"></script>

</body>
</html>

js

// 创建节点   添加到DOM树  删除节点

var dic1 = document.getElementById("div1");

// 创建一个p标签
var p = document.createElement("p");

// 创建一个文本节点
var p1text = document.createTextNode("p1");
p.appendChild(p1text);


// 添加节点
div1.appendChild(p);

// 删除div2
// var div2 = document.getElementById("div2");
// div1.removeChild(div2);


// 删除div2
var div2 = document.getElementById("div2");
// div2.parentNode;


// 自己把自己删除

// div2.parentNode.removeChild(div2);

第二十课

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="div1" dat="1">
        <img id="img1" class="box" src="logo.png" alt="">
        <p id="p1">P1</p>
    </div>

    <script src="20.js"></script>
</body>
</html>

js

// 对节点的属性 内容

// html 定义好的属性  . 对象的点  获取  修改

var img1 = document.getElementById("img1");

// class  js  关键词  类    用classname代替
// img1.className = 


// css 样式的修改
// img1.style.width = "100px"; 

// 获取属性
// img1.getAttribute("id");
// img1.getAttribute("dat");


// img1.setAttribute("dat","11");

// img1.removeAttribute("dat");


var p1 = document.getElementById("p1");
// p1.innerHTML = "这是innerhtml";
// p1.innerHTML = "这是innerhtml <a href='www.baidu.com'>this is a </a>";

p1.textContent  = "这是innerhtml <a href='www.baidu.com'>this is a </a>";

钟记小前端--全栈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习

第十七课HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...
复制链接

扫一扫

专栏目录