前端学习之DOM编程-docmument对象、操作DOM对像内容、操作DOM对象属性方式、操作DOM对象的样式

docmument对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document对象</title>
</head>
<body>
    <div id="container" name='parent'>
        <ul name="parent">
            <li class="li_class">第一项</li>
            <li class="li_class">第二项</li>
            <li>第三项</li>
        </ul>
    </div>
    <script>
        //获取dom中的标签共有7中方式
        // 直接使用标签中id(不建议使用)
        container.style.border='1px solid red'
        // 通过id获取dom标签,只获取一个
        let div1 = document.getElementById('container')
        div1.style.background = "#ff0000"
        // 通过类名称获取,获取的是一个数组
        let li_arr = document.getElementsByClassName('li_class')
        console.log(li_arr)
        // 通过标签名获取
        let li_arr1 = document.getElementsByTagName('li')
        console.log(li_arr1)
        // 通过name属性获取
        let parent_arr = document.getElementsByName('parent') 
        console.log(parent_arr)
        // 通过css选择器获取标签
        // 只获取一个,返回第一个
        let tag = document.querySelector('#container')
        console.log(tag)

        // 获取一个合集,所有符合的都返回来
        // 想要获取单个元素可以   document.querySelectorAll('#container>ul>li')[0] 获取第0号元素
        let tag1 = document.querySelectorAll('#container>ul>li')
        console.log(tag1)
        
    </script>
</body>
</html>

结果

操作DOM对像内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作</title>
</head>
<body>
    <div id="container" name='parent'>
        <ul name="parent">
            <li class="li_class">第一项</li>
            <li class="li_class">第二项</li>
            <li>第三项</li>
        </ul>
    </div>
    <script>
        // let div1 = document.getElementById('container')
        // 将div里面的内容整体替换,不可以插入标签
        // div1.innerText = '123321'
        // 和innerText同理
        let div2 = document.querySelector('#container')
        div2.textContent = '123123'
        // 可以用来插入标签(这个插入是将原来的东西替换掉),慎用防止xss攻击,一般来说浏览器会对简单的script进行屏蔽防止xss攻击
        div2.innerHTML = '<h1>和阿凡达'
        
        // 一般使用的插入标签方法
        // 首先创建
        let ol1 = document.createElement('ol')
        let li1 = document.createElement('li')
        // 往里面添加内容
        li1.textContent = '123'
        // 将创建的东西挂载到
        ol1.appendChild(li1)
        div2.appendChild(ol1)
    </script>
</body>
</html>

结果

 操作DOM对象的节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作DOM对象</title>
</head>
<body>
    <div>
        <ul>
            123
            <li>第一项</li>
            123
            <li name="第二" id="2">第二项</li>
            <li>第三项</li>
        </ul>
    </div>
    <script>
        let ul1 = document.getElementsByTagName('ul')[0]
        // 拿到所有节点,(所有标签上面下面都会有一个文本,就算没有内容也有这个文本)
        let all_child = ul1.childNodes
        console.log(all_child)
        // (所有标签上面下面都会有一个文本)所以第一个孩子是123这个文本
        let first_child = ul1.firstChild
        console.log(first_child)
        // 拿到第一个li
        let all_child_1 = ul1.childNodes[1]
        console.log(all_child_1)
        // 获取节点前面的一个节点,下面代码就是获取第二个标签的前两个节点也就是第一个标签
        let all_child_2 = ul1.childNodes[3]
        console.log(all_child_2.previousSibling.previousSibling)
        // 获取节点下面的一个节点,下面代码获取的是第三个所在的标签
        console.log(all_child_2.nextSibling.nextSibling)
        // 获取当前节点所有属性
        console.log(all_child_2.attributes)
        // 删除某个结点,下面代码是删除第三项
        ul1.removeChild(ul1.childNodes[5])
        
    </script>
</body>
</html>

结果

 操作DOM对象属性方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作DOM对象属性</title>
</head>
<body>
    <div>
        <ul>
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
        </ul>
        <img src="../../作业/学校门互网站素材/图书管图片.jpg"  width="100px" height="100px">
    </div>
    <script>
        let div1 = document.getElementsByTagName('div')[0]
        // 给div添加属性name
        // 如果某些时候下面这种方法没有办法使用,就用下面第二种方法
        div1.name = '123'
        div1.id = '1'
        console.log(div1.name)
        console.log(div1.id)
         let img1 = document.getElementsByTagName('img')[0]
        //  下面是给属性设置的另外一种方法
         img1['title'] = 'img123'
        //  调用系统API  img1.setAttribute('属性名','修改的值')
        img1.setAttribute('title','img1234')

        // 练习
        let li1 = document.getElementsByTagName('li')[1]
        li1.id =  'id1'
        li1['title'] = 'haha'
        li1.setAttribute('name','test')
        console.log(li1)
    </script>
</body>
</html>

结果

 

 操作DOM对象的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作DOM样式</title>
</head>
<body>
    <div class="first_div"></div>
    <script>
        let div1 = document.getElementsByClassName('first_div')[0]
        // 设置或者获取标签的行内样式
        div1.style.border = '10px dotted red'
        console.log(div1.style.border)

        // 获取标签的所有样式
        console.log( window.getComputedStyle(div1).border )

        
</script>
</body>
</html>

结果


不嫌弃的点点关注,点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/518914.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

k8s CNI Calico 网络模式总结

目录 calico架构图 IPIP模式下的架构图 calico 核心组件 Overlay 网络模式&#xff1a; Pod IP对外暴露 不对外暴露&#xff1a; 实现对外暴露的方法&#xff1a; overlay模式下的网络MTU Iptables & ipvs overlay的主要缺点&#xff1a; Full-mesh Unoverla…

DXP学习003-PCB编辑器的环境参数及电路板参数相关设置

目录 一&#xff0c;dxp的pcb编辑器环境 1&#xff0c;创建新的PCB设计文档 2&#xff0c;PCB编辑器界面 1&#xff09;布线工具栏 2&#xff09;公用工具栏 3&#xff09;层标签栏 ​☀ 3&#xff0c;PCB设计面板 1&#xff09;打开pcb设计面板 4&#xff0c;PCB观察…

重温OKHTTP源码

本文基于OkHttp4.12.0源码分析 官方地址 概括 本篇主要是对okhttp开源库的一个详细解析&#xff0c;包含详细的请求流程分析、各大拦截器的解读等。 使用方法 同步请求&#xff1a;创建一个OKHttpClient对象&#xff0c;一个Request对象&#xff0c;然后利用它们创建一个Ca…

免费微信小程序源码分享~搭起来改一下就可以【创业】

【前言】现在很多人都想做微信小程序创业搞钱&#xff0c;但是苦于不会开发或过高的开发成本只能放弃&#xff0c;下面我收集了几套微信小程序的源码供各位有梦想的同学免费使用~ 这些小程序代码都包含了客户端和管理端&#xff0c;你搭建起来就可以开始创业搞钱了~ 下载链接&a…

PostgreSQL 文章下架 与 热更新和填充可以提升数据库性能

开头还是介绍一下群&#xff0c;如果感兴趣PolarDB ,MongoDB ,MySQL ,PostgreSQL ,Redis, Oceanbase, Sql Server等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;CTO&#xff0c;可以解决你的问题。加群请联系 liuaustin3 &#xff0c;&#xff08;…

4月4日今日预告:printf+scanf+分支循环,if语句,else悬空问题,加油,干干干这篇文章三个小时半了,从愚人节被告知今天就有课程-今日4/3,

今天中午知道要爆肝的C语言的&#xff0c;今天本来作业好多的&#xff1b; 干了&#xff0c;家人们 做一些补充&#xff1a; 一&#xff1a;printf() 参数与占位符对应关系 printf() 参数与占位符是⼀⼀对应关系&#xff0c;如果有 n 个占位符&#xff0c; printf() 的参数…

使用docker-tc对host容器进行限流

docker-tc是一个github开源项目&#xff0c;项目地址是https://github.com/lukaszlach/docker-tc。 运行docker-tc docker run -d \ --name docker-tc \ --network host \ --cap-add NET_ADMIN \ --restart always \ -v /var/run/docker.sock:/var/run/docker.sock \ -v /var…

通过vite创建项目

一、VUE3官网 Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org) 二、通过Vite创建项目 1、在cmd窗口下&#xff0c;全局安装vite //使用国内镜像源 npm config set registryhttps://registry.npmmirror.com//安装最新版vite npm install -g vitelatest Vite | 下一代…

阿里云、腾讯云、华为云优惠券领取攻略

随着云计算技术的日益成熟和普及&#xff0c;越来越多的企业和个人开始选择使用云服务商来满足自己的数据存储、计算和处理需求。阿里云、腾讯云、华为云作为国内领先的云服务商&#xff0c;提供了丰富多样的云产品和服务。而为了吸引更多用户&#xff0c;它们也时常会推出各种…

4.4学习总结

一.线段树概念 一.定义: 线段树是一种二叉搜索树&#xff0c;而二叉搜索树&#xff0c;首先满足二叉树&#xff0c;即每个结点最多有两颗子树&#xff0c;并且是一颗搜索树&#xff0c;我们要知道&#xff0c;线段树的每个结点都存储了一个区间&#xff0c;也可以理解成一个线…

文件系统监视库(watchdog)

Python Watchdog库是一个用于监视文件系统变化的Python第三方库。以下是关于Watchdog库的详细介绍&#xff1a; 功能&#xff1a;Watchdog库能够监控文件和目录的创建、修改、删除和移动等操作。它通过使用底层原生API&#xff08;如Windows的ReadDirectoryChangesW、Linux 2.6…

Golang学习笔记

Golang学习笔记 安装Golang 来源&#xff1a;linux 安装 golang - 知乎 (zhihu.com) 由于我用的是linux系统&#xff0c;所以本文采用linux的安装方式介绍&#xff0c;如果你使用的是Windows/Mac 也可以看下该文章&#xff0c;或者自己去下列地址进行操作。 Download and in…

react中配置webpack:使用@代表src目录

在vue的项目中可以使用表示src目录&#xff0c;使用该符号表示绝对路径&#xff0c;那么在react中想要使用怎么办呢&#xff1f; 在react中使用表示src目录是需要在webpack中配置的&#xff0c;在核心模块node_modules-》react-scripts-》config-》webpack.config.js中搜索找到…

基于SSM的品牌银饰售卖平台(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; 基于SSM的品牌银饰售卖平台&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring …

Windows11下Docker使用记录(一)

Docker使用记录&#xff08;一&#xff09; 简单介绍Docker安装Docker 常用命令Docker 可视化Docker 使用GPU可视化rviz、gazebo 在进行ROS项目开发时&#xff0c;如果只有一台Windows电脑&#xff0c;我们可以考虑使用WSL或Docker来搭建ROS环境。在尝试了两种方式后&#xff0…

代码随想录第31天 | 455.分发饼干 、376. 摆动序列、53. 最大子序和

一、前言 参考文献&#xff1a;代码随想录 今天的内容是贪心算法&#xff0c;这个算法分为两个极端&#xff0c;一个极端是很简单&#xff0c;靠常识就可以解出来&#xff0c;另外一个是&#xff0c;你怎么想也想不出来&#xff0c;只能看题解的那种。 and 对第一天和第二天…

Spring源码解析上

spring源码解析 整体架构 defaultListableBeanFactory xmlBeanDefinitionReader 创建XmlBeanFactory 对资源文件进行加载–Resource 利用LoadBeandefinitions(resource)方法加载配置中的bean loadBeandefinitions加载步骤 doLoadBeanDefinition xml配置模式 validationMode 获…

树的基本概念与二叉树

文章目录 树的基本概念与二叉树一、树的概念和结构1. 树的概念2. 树的相关概念 二、树的存储1. 左孩子右兄弟表示法2. 双亲表示法 三、二叉树1. 特殊的二叉树1.1 满二叉树1.2 完全二叉树 树的基本概念与二叉树 一、树的概念和结构 1. 树的概念 树是一种非线性的数据结构,它是…

Liunx进程信号

进程信号 进程信号什么是信号liunx信号种类 前后台进程前后台进程的概念 进程信号的产生键盘产生 阻塞信号信号的捕捉用户态和内核态 信号的捕捉函数 进程信号 什么是信号 信号是Unix、类Unix以及其他POSIX兼容的操作系统中进程间通讯的一种有限制的方式。它是一种异步的通知…

计算机专业,不擅长打代码,考研该怎么选择?

考研其实和你的代码能力关系不大 所以在选学校以前可以看看有哪些学校复试是要求上机撸代码的&#xff0c;可能会要求比较严 初试真的不用担心代码问题&#xff0c;我也是基本零编程能力就开始备考考研的... 本人双非科班出身备考408成功上岸&#xff0c;在这里也想给想考40…