首页 > 编程语言 >Javascript(基础) 笔记16

Javascript(基础) 笔记16

时间:2024-09-05 20:53:59浏览次数:13  
标签:Javascript console log 16 元素 笔记 var newNode document

dom 操作

①document   ②object  ③model

一、 查找

1. getElementById() 根据id值获取元素,返回符合的第一个元素(只会返回第一个)

var x=document.getElementById("a");
console.log(x);
console.dir(x); // 以对象形式打印
x.style.background="red";
x.style.color="yellow";
x.onclick=function(){
    alert('不要点击');
}

2. getElementsByClassName() 根据class值来获取元素,返回所有符合条件的对象所组成的数组 

var y=document.getElementsByClassName("aa")
  console.log(y)
//   找不到时则返回一个空数组
// y.style.background="red";  由于是数组,所以并不适用这种表达,需要具体到数组中的某个元素
y[2].style.background="red";

 3. getElementsByTagName()  根据元素名称获取元素,返回符合元素组成的数组

var z=document.getElementsByTagName("p")
console.log(z)

4.根据选择器选取元素

var obj=document.querySelector(".aa")  // 返回符合的第一个元素
console.log(obj)

 5.

var obb=document.querySelectorAll(".aa")  // 返回符合元素组成元素的数组
console.log(obb)

通过关系查找

var s=document.querySelector(".aa")
// 找父亲:  .parentNode   .parentElement
// 找孩子: .childNodes   .children
// 找第一个孩子: .firstChild  .firstElementChild
// 找最后一个孩子: .lastChild  .lastElementChild
// 找上一个元素:   .previousSibling  .previousElementSibling
// 找下一个元素:   .nextSibling   .nextElementSibling
console.log(s.childNodes)
//但是打印出来会有"text",即空格、文本等默认为text

 二、 修改(修改内容、属性、样式)

1.修改内容

var o=document.querySelector(".a")
o.innerText="<h1>123</h1>" 
// 把修改的内容当成文本修改(即:该标签不能识别到<>内的属性)
o.innerHTML="<h1>123</h1>" 
// 把修改的内容当成标签修改(即:该标签能够识别<>内的属性并作出修改)
o.value="aaaaa" // 修改input内的值

2.修改属性

// 原生属性 对象.属性=值
o.id="ss"
// 自定义属性
// 设置 setAttribute("自定义属性名","自定义属性值")
// 获取  getAnimations()
var s=document.querySelector('.a')
s.setAttribute('ss','sbb2')
console.log(s.getAttribute('ss'))
// 获取setAttribute设置的标签,则只能通过getAttribute标签来提取

3.修改样式

o.style.background="blue"
o.style.fontSize="80px"
// 【注:单独书写时需要注意‘-’的删除和次首字母大写等问题】
o.style.cssText = "background:yellow; color:pink; font-size:80px;"
// "一劳永逸"型样式改写

e.g.

var obj=document.querySelector(".a")
obj.style.cssText = "background:yellow; color:pink; font-size:80px; height:100vh;"
obj.onclick=function(){
    var bj=""
    for(var i=0;i<6;i++ ){
        bj+=Math.round(Math.random()*9)
    }
    console.log(bj)
    obj.style.background="#"+bj
}
// 一个点击随机修改背景的小例子
var arr=document.querySelectorAll('li')
console.log(arr)
for(var i=0;i<arr.length;i++){
    arr[i].onclick=function(){
        // this.style.background="red"
        var bj=""
        for(var i=0;i<6;i++ ){
                    bj+=Math.round(Math.random()*9)
                }
                console.log(bj)
                this.style.background="#"+bj
                // 【注:在此用arr[i]并不能触发效果,要用this来,才能实现循环】
    }
}

三、 添加(创建元素+添加元素)

1.创建

① 创建元素

var newNode = document.createElement('h1') // 创建一个元素类型
newNode.innerText='添加的内容'
// 只输入文本而无<>部分的话,newNode.innerHTML='添加的内容'等同于如上表达
console.log(newNode)
newNode.className='nn'
newNode.style.background="red"
newNode.style.color='pink' // 添加一些样式

②复制元素  cloneNode(true/false)

【true时为深复制(复制所有), false时为浅复制(只复制外壳)】

var h=document.querySelector('p')
var newNode=h.cloneNode(false)
console.log(newNode)

2.添加

① appendChild() 默认添加到父级元素空间内的末尾

②insertBefore(插入元素,位置) 将'插入元素'插入到'位置'之前

③replaceChild(替换元素,去除元素) 用'替换元素'取代'去除元素'

var c=document.querySelector('.tt')
console.log(c)
c.appendChild(newNode) // 默认添加到最后


var h=document.querySelector('p')
c.insertBefore(newNode, h)  


c.replaceChild(newNode,h)


四、 删除

父级.removeChild(元素)

var c = document.querySelector(".tt")
var h = document.querySelector("h2")
c.removeChild(h) // 第一种表达
h.parentNode.removeChild(h)// 第二种父级删除表达

标签:Javascript,console,log,16,元素,笔记,var,newNode,document
From: https://blog.csdn.net/m0_74977981/article/details/141870701

相关文章

  • JavaScript 中的 数据结构
    数据结构数据结构是计算机存储、组织数据的方式。1.数组数组是最最基本的数据结构,很多语言都内置支持数组。数组是使用一块连续的内存空间保存数据,保存的数据的个数在分配内存的时候就是确定的。2.栈栈是一种遵循后进先出(LIFO)原则的有序集合在栈里,新元素都接近栈顶,旧元素......
  • JavaScript中的数据类型-存储差别
    总结声明变量时不同的内存地址分配:简单类型的值存放在栈中,在栈中存放的是对应的值引用类型对应的值存储在堆中,在栈中存放的是指向堆内存的地址不同的类型数据导致赋值变量时的不同:简单类型赋值,是生成相同的值,两个对象对应不同的地址复杂类型赋值,是将保存对象的内存地......
  • C++学习笔记----6、内存管理(二)---- 数组指针的双向性
            你可能已经看到指针与数组之间的一些重叠。自由内存空间分配的数组由其第一个元素的指针进行访问。栈上的数组通过使用数组语法([])或者正常变量声明来访问。你还会看到的是,其重叠不仅如此,指针与数组有更复杂的关系。1、数组退化至指针        自由内......
  • 洛谷 P1516 青蛙的约会 题解
    一道简单的数学题~首先分析题意。精简得出:假设跳了\(t\)次,那么青蛙A的坐标是\((x+mt)\modL\),青蛙B的坐标是\((y+nt)\modL\),列出方程:\[x+mt\equivy+nt\pmodL\]由于余数具有可减性,所以把\(y+nt\)移到左边,得出:\[x-y+mt-nt\equiv0\pmodL\]写成人话:\[(x-y+mt-nt)\mod......
  • D16 kubernetes 容器生命周期回调
    1、简介容器生命周期回调是指在容器的生命周期中执行用户定义的操作。kubernetes支持以下生命周期回调PostStart(容器启动后):在容器启动后立即执行的回调,它可以用于执行一些初始化任务PreStop(容器停止前):在容器停止之前执行的回调。它可以用于执行清理或保存状态的操作......
  • 第16篇 如何制作自己的安装程序--使用InnoSetupPE工具
    1.安装去官网下载最新版本:https://jrsoftware.org/isdl.php#stable2.进入应用主界面3.点击file》New【开始打包】直接next4.填写相关数据直接点next5.根据要求填写,然后直接next6.这里默认不改,然后直接next7.这里也默认不改,然后直接next8.这里为空,可以不填,然后......
  • 20240905_154516 python 填空题 字符串方法2
    有字符串列表li=["a","b","c"],让列表成员用+拼接,保存给变量rr="+".join(li)有字符串s,把它的内容变成小写,保存给变量rr=s.lower()有字符串s,把它内部的java全替换为python,保存结果给变量rr=s.replace("java","python")有字符串s="abc",请把它按空符号进行分割,得......
  • MT3516A-ASEMI三相整流桥MT3516A
    编辑:llMT3516A-ASEMI三相整流桥MT3516A型号:MT3516A品牌:ASEMI封装:D-63批号:2024+类型:三相整流桥电流(ID):35A电压(VF):1600V安装方式:直插式封装特性:大功率、整流方桥产品引线数量:5产品内部芯片个数:5产品内部芯片尺寸:MIL工作结温:-40℃~150℃功率:大功率包装方式:500/盒:3000/箱MT3516A应用领......
  • 命令行界面的linux系统,安装后,如何设置笔记本合盖后不做任何操作?
    背景今天在笔记本上安装了一个飞牛OS,感觉还不错,不过装完后,发现合盖后就待机了,这就有点坑爹了。手动设置调整因为飞牛OS安装后,需要通过web界面来创建超级管理员账户,创建完成之后可以通过SSH来使用该账户进行登陆,然后就可以进行下面的设置:systemd提供了一种通过logind服务来控制......
  • Python基础学习教程笔记 (持续更新!!)
    Python3学习数字number数学函数abs(x)返回数字的绝对值ceil(x)返回数字的上入整数floor(x)返回数字的下舍整数(x>y)-(x<y)如果x<y返回-1,如果x==y返回0,如果x>y返回1exp(x)返回e的x次幂fabs(x)以浮点数形式返回数字的绝对值,eg:math.fabs(-10)返回10.0log(x)eg:math.......