JavaScript DOM 基础操作

一、获取元素的六方式

document.getElementById('id名称')   //根据id名称获取
document.getElementsByclassName('元素类名') //根据元素类名获取 返回值:伪数组
document.getElementsByTagName('元素类名') //根据元素标签获取 返回值:伪数组
document.querySelector('选择器') //根据选择器获取第一个元素
document.querySelectorAll('选择器') //根据选择器获取所有元素 返回值:伪数组

二、操作元素内容

1.获取元素文本内容

格式:

获取内容:元素 . innrtText

修改内容:元素 . innerText="修改的内容"

//点击div盒子改变里面的文本

<div Style="background:red" id="JD">我是旧的内容</div>

//获取元素(通过标签选择器来获取内容)
var ele=document.querySelector('div')
//获取元素(通过id获取元素)
var btn=document.getElementById('JD') //获取元素文本内容并输出
console.log(ele.innerText) //给div一个点击事件(这里用的是id获取到的div元素)
btn.onclick=function(){
//重新为div设置新的内容
ele.innerText="我重生了"
}

2.操作元素超文本内容(直接修改代码)

格式:

获取内容:元素 . innrtHTML

修改内容:元素 . innerHTML="新的标签"

//点击div盒子把div变成p标签
<div style="background:red" id="JD">我是div盒子</div> //获取元素(通过标签选择器来获取内容)
var ele=document.querySelector('div')
//获取元素(通过id获取元素)
var btn=document.getElementById('JD') //获取元素的标签里的内容以文本的方式并输出
console.log(ele.innerHTML) //给div一个点击事件(这里用的是id获取到的div元素)
btn.onclick=function(){
//把div盒子变成p标签
ele.innerHTML="<p>我变成了p标签了,嘤嘤嘤!</p>"
}

三、操作元素属性

1.原生属性(type、id、src)

格式:

获取属性:元素 . 属性名

设置属性: 元素 . 属性名=”属性值“

//点击图片改变图片背景链接达到来回切换背景的效果

      //html
<img scr="../img/bg1.jpg" id="bg"> //JavaScript
//获取元素(通过id获取元素)
var btn=document.getElementById('bg')
//获取元素scr的路径并输出
console.log(btn.src)
var tes=0 //控制切换的图片
//给img一个点击事件(这里用的是id获取到的img元素)
btn.onclick=function(){
if(tes===0){
btn.src="../img/bg2.jpg"
tes=1
}else{
btn.src="../img/bg1.jpg"
tes=0
}

2.定义和操作自定义属性

(1)定义属性

定义格式:data-*

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head> <body>
<div style="wight:500px;height:500px;background:black" data-a="p1" id="ab"> p1
<div style="wight:150px;height:150px;background:green" data-a="p2">p2</div>
<div style="wight:150px;height:150px;background:blue" data-a="p3">p3</div>
</div>
<script>
//获取到父的div元素
var divab=document.getElementById("ab") //点击点击子元素父元素的事件也会被触发
divab.onclick=function(e){
//用自定义属性来判断点的是子元素,还是父元素。
if(e.target.dataset.a==="p1"){
console.log("p1")
}
if(e.target.dataset.a==="p2"){
console.log("p2")
}
if(e.target.dataset.a==="p3"){
console.log("p3")
} } </script>
</body>
</html>

(2)操作自定义属性

操作自定义属性格式:

获取属性:元素 . getAttribute("属性名")

设置属性:元素 . setAttribute("属性名",”属性值“)

删除属性:元素 . removeAttribute("属性名")

//html
<div id="tes" data-cs="Hello Wrold">自定义属性测试</div> //JavaScript //获取元素
var ter=document.getElmentById("tes") //获取自定义属性并输出
console.log(ter.getAttribute(CS))
//重新给自定义属性CS赋值
ter.setAttribute("CS","Hello man")
//删除自定义属性
ter.removeAttribute("CS")

四、操作元素类名

格式:

获取类名:元素 . className

设置类名:元素 . className="新类名"

//点击div盒子和实现改变背景颜色

//设置类名改变div的背景色
.divBgRed{
background:red;
}
.divBgBlue{
background:blue;
} <div class="divBgRed" id="divid">我是可以变颜色的盒子</div> //获取div的元素
var divid=document.getElementById("divid") divid.onclick=function(){
divid.className="divBgBlue"
}

五、操作元素行内样式

格式:

获取行内样式:元素 .style . 样式名

设置行内样式:元素 . style.样式名="样式值"

//输出和修改行内样式
<div style="background-color:red;width=100px" id="divid">我是红色的div盒子</div> var tre=document.getElementById("divid") console.log(tre.style.backgroundColor) //当行内样式有短横线时,把短横线去掉变成驼峰写法 tre.onclick=function(){
tre.style.background="blue"
tre.style.width="500px"
}

六、获取非行内样式

格式:window . getComputedStyle(元素) . 样式名

注意:行内样式和非行内样式都可以获取

七、节点操作(标签)

1.创建结点(标签)

格式:document.creatElement("标签名称")

var div=document.creatElement("div")
var p=document.creartElement("p")

2.插入结点(标签)

格式:

**父节点的元素 . appendChild(子节点) ** //默认在最后插入

父节点元素 . insertBefore(要插入的节点,哪一个你节点的前面)

<<body>
<div>
<span>我是span标签</span>
<ul>我是ul标签</ul>
</div>
<script>
//问题1:在ul标签里面的最后位置插入li标签
//获取ul标签的元素
var ul=document.querySelector("ul")
//创建li标签
var li=document.createElement("li")
//在ul标签里插入li标签
ul.appendChild(li) //问题2:在div里的span标签前面插入入一个p标签
//获取div父元素
var div=document.querySelector("div")
//获取要插入位置的后一个标签的元素
var span=document.querySelector("span")
//创建要插入的p标签
var p=document.createElement("p")
//在相应位置插入p标签
div.insertBefore(p,span) </script>
</body>

3.删除节点(标签)

格式:

父节点元素 . removeChild(子节点)

想删除节点元素 . remove()

<body>
<div>
<span>标签</span>
</div>
</body> <script>
//获取父标签的元素
var div=document.querySelector("div")
//删除span标签
div.removeChild(span) //获取要删除span标签的元素
var span=ocument.querySelector("span")
//删除span标签
span.remove()
</script>

4.替换节点(标签)

格式:

父节点元素 . replaceChild(换上节点,换下节点)

<body>
<div>
<span>标签</span>
</div>
</body> <script>
//获取span标签的父元素
var div=document.querySelector("div")
//创建p标签
var p=document.creartElement("p")
//获取span标签的元素
var span=document.querySelector("span")
//把span标签替换成p标签,里面的内容不变
div.replaceChild(p,span)
</script>

5.克隆节点(标签)

说明:就是把想要的标签复制一份,需要结合插入标签才能有用(相对于复制和粘贴)

格式:

想要克隆标签的元素 . cloneNode(是否克隆后代节点)

//问题:把div标签复制一份,并复制里面的子元素
<body>
<div>
<span>标签</span>
</div>
</body> <script>
//获取div标签的元素
var div=document.querySelector("div")
//克隆div标签并克隆里面的子元素
var cle=div.cloneNode(true) //把复制的div标签插入到原来div后面
//获取body标签的元素
var body=document.querySelector("body")
//插入div标签
body.appendChild(cle) </script>

JavaScript DOM 基础操作的更多相关文章

  1. javascript DOM基础操作

    DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM ...

  2. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  3. JavaScript DOM基础总结

    上个月在进行百度三面时候,面试官提问JavaScript DOM方法,我回答的有点少,前面太关注JavaScript 兼容性,框架方面,JavaScript 原生DOM基础没有记牢,心中有点遗憾.下来 ...

  4. Javascript DOM基础(一)概念

    Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  5. JavaScript DOM 常用操作

    1.理解DOM: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两个角度理解: 对于JavaScript ...

  6. JavaScript学习 - 基础(六) - DOM基础操作

    DOM: DOM定义了访问HTML 和XML 文档的标准:1.核心DOM 针对结构化文档的标准模型2.XMK DOM 针对XML文档的标准模型3.HTML DOM 针对HTML文档的标准模型 DOM节 ...

  7. jQuery~DOM基础操作

    操作DOM 1.什么是DOM:document object model文档对象模型 2.树形结构 3.什么是节点(node):DOM结构中最小单位,元素.文本.属性...创建节点 var $div ...

  8. DOM基础操作实战代码

    对于已经讲解给大家的DOM实战,我今天给大家几个实战代码,可以让大家加深对此的理解! 1.用DOM动态生成这样一个结构: <div class=”example”> <p class ...

  9. DOM基础操作(三)

    DOM剩余的两个操作一并带来! 1.删除操作 removeChild 这个方法依然是父级调用的,参数就是要删除的子节点,其实实际上是剪切,这个方法会把我们删除掉的元素给返回,我们可以用一个变量去保存这 ...

随机推荐

  1. NOAA数据下载方法

    NOAA OneStop https://data.noaa.gov/onestop/about NOAA 数据搜索平台,在一个地方同时搜索NOAA的 Geophysical, oceans, coa ...

  2. 洛谷八月月赛 II T1 题解

    Content 在大小为 \(n\) 的数字三角形中,第 \(i\) 行包含有 \(i\) 个数字,数字从上到下,从左到右依次排列为 \(1,2,3,\dots\). 设第 \(i\) 行第 \(j\ ...

  3. Linux 输入指令显示 command not found(未找到命令)解决办法

    问题摘要:当我在linux中安装了一个Nginx,最后需要检查是否安装成功的时候,输入了Nginx -v 提示未找到命令(服务器中英文提示为 command not found) 其他软件命令未找到问 ...

  4. Jquery监控audio单选框选中事件(实际通过click)

    $('input:radio[name="pathType"]').click(function(){ var checkValue = $('input:radio[name=& ...

  5. Shell脚本--数值比较组合判断

    用于数值比较的无非大于.小于.等于.大于等于.小于等于这几个. 比较格式: [ 数值1 比较符 数值2 ]   注意左边的括号与数值1之间有一个空格,同样,数值2和右边的括号之间也有空格. 数值比较运 ...

  6. JAVA中json对象转JAVA对象,JSON数组(JSONArray)转集合(List)

    json格式 {userId:'1',message:'2',create_time:'2020-03-28 20:58:11',create_date:'2020-03-28'}JAVA对象 Cha ...

  7. ORACLE数据库登录显示ORA-28001: the password has expired

    Oracle数据库登录显示 "这个密码已过期,请输入新密码" 点击win键 找到Oracle的SQL Plus 点击打开之后输入登录的用户名密码,然后会显示该密码已过期,输入新口令 ...

  8. 【LeetCode】 Binary Tree Zigzag Level Order Traversal 解题报告

    Binary Tree Zigzag Level Order Traversal [LeetCode] https://leetcode.com/problems/binary-tree-zigzag ...

  9. 【LeetCode】383. Ransom Note 解题报告(Java & Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 Java解法 Python解法 日期 [LeetCo ...

  10. 【LeetCode】792. Number of Matching Subsequences 解题报告(Python)

    [LeetCode]792. Number of Matching Subsequences 解题报告(Python) 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://f ...