标签：style DOM 标签 js getElementById var 操作 document
js之DOM操作
DOM 是 Document Object Model(文档对象模型)的缩写。下面是MDN对DOM的解释：
文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。
DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。
上图就是为了表示通过DOM树可以通过一个标签找到跟他有关系的任何一个标签
DOM作用：
就是为了操作HTML中的元素，使得网页被下载到浏览器后改变网页内容成为可能
DOM操作之查找标签
准备工作:
<div class="d1">d1
<div id="d2">d2
<p id="p1">p1</p>
<span id="s1">span1</span>
</div>
</div>
前缀关键字：document
基本查找用法：
根据ID获取一个标签：document.getElementById('id')
根据class属性获取：document.getElementsByClassName('class')
根据标签名获取标签合集：document.getElementsByTagName('标签名')
注意:涉及到DOM操作的JS代码应该放在文档的哪个位置。
# 我们看上图出现的现象，在通过DOM操作查找标签的时候，并没有查找到。
原因：这是因为在html代码体中，执行顺序是从上到下的，所以先执行的为script标签中的代码，这时查找的话，系统还没有找到下面的id='d2'的标签，认为就没有，所以就返回为null
解决：所以我们在写js代码时需要注意：
如果我们的js代码需要页面上某个标签加载完毕，那么该js代码应该写在body内部最下方或者引入外部js文件。
补充:
1、可通过变量名来接收标签查找的结果，通常以后缀为Ele为结束字符来命名。
eg： var divEle = document.getElementsByTagName('div');
2、在通过类属性或标签名查找标签时返回结果为一个数组,可直接通过索引的方式定义所需要的标签
eg：var pEle = document.getElementsByTagName('p')[0]; // 找到索引为0的p标签
核心查找用法:
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
用法实例：
var div1Ele = document.getElementsByClassName('d1')[0]; // 通过class找到第一个div标签
var div2Ele = document.getElementById('d2'); // 通过id找到第二个div标签
var pEle = document.getElementsByTagName('p')[0]; // 通过标签名找到p标签
节点操作
// js是可以动态改变html的文档内容的，但只是动态修改，未保存。
// 创建标签
关键字：createElement
eg ： var aEle = document.createElement('a'); // 创建一个a标签
// 添加属性
关键字：setAttribute // 如果是默认属性的话可直接通过(.)的方式添加
eg ：aEle = setAttribute('href','https://www.mmzztt.com/')
//获取属性
关键字：getAttribute
eg ：aEle.getAttribute('href') // 获取a标签的href属性
// 插入文本
关键字：innerText
eg ：aEle.innerText = '点我有你好看';
// 动态添加：(添加到指定标签后)
关键字：appendchild
eg ：document.getElementsByTagName('p')[0].appendChild(aEle) // 添加在p标签后
补充:
innerText
不加赋值符号是获取内部文本
加了赋值符号是设置内置文本
// 不可以识别HTML标签
innerHTML
不加赋值符号是获取内部标签+文本
加了赋值符号是设置内置标签+文本
// 可以识别HTML标签
获取值操作
// 普通文数据获取
格式：标签对象.value
// 特殊文件数据获取
标签对象.value // 仅仅获取一个文件地址而已
获取真正的文件对象格式：标签对象.files[0] // 获取单个文件数据
标签对象.files // 获取多个文件数据
实例：
准备工作：
<form action="">
<p>username:
<input type="text" id="d1">
</p>
<p>files:
<input type="file" id="d2" multiple>
</p>
</form>
class操作
准备工作：
// html:
<body>
<div id='d1' class="c1 c2 c3"></div>
</body>
// css:
<style>
.c1 {
width: 200px;
height: 200px;
border-radius: 50%;
}
.c2 {
background-color: darkgray;
}
.c3 {
background-color: yellow;
}
</style>
classList 查看所有的类
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加
实例：
// 删除c3类
divEle.classList.remove('c3'); // 颜色由黄色变为灰色 (模拟灯泡)
// 添加c3类
divEle.classList.add('c3'); // 颜色再次变为了黄色
divEle.classList.contains('c3');
true
divEle.classList.contains('c4');
false
divEle.classList.toggle('c3');
样式操作
格式：标签对象.style.属性名='属性值'
1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
事件(重点)
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
常用事件：
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
实例：
<body>
<button onclick="func()">点我1111</button>
<button id="d1">点我2222</button>
<script>
// 方式一:
function func(){
alert('方式一弹')
}
// 方式二(推荐):
// 查找标签
var btnEle = document.getElementById('d1')
// 绑定事件
btnEle.ondblclick = function (){
alert('方式二弹')
}
</script>
</body>
内置参数this
// this指代的就是当前被操作对象本身
在事件的函数体代码内部使用
btnEle.onclick = function () {
alert(456)
console.log(this)
}
也可以直接使用this方法去操作标签：
eg：
btnEle.onclick = function () {
alert(456)
console.log(this)
this.innerText('点我3333')
}
事件实例:
实例一:动态时间
点击查看代码
需求：创建一个开始和暂停按钮，实现一个动态时间，点击暂停暂停时间，点击开始继续动态运作。
代码块：
<body>
<input type="text" id="i1">
<button id = 't1'>开始</button>
<button id = 't2'>暂停</button>
<script>
var btnEle = document.getElementById('t1') // 查询标签开始按钮
var btn2Ele = document.getElementById('t2') // 查询标签暂停按钮
var t = null // 定义全局变量t
function showtime(){ // 定义展示时间的函数
var time = new Date().toLocaleString() // 定义新的时间对象并格式化展示
var inputEle = document.getElementById('i1') //潮汛标签inout框
inputEle.value = time // 将时间对象添加给value属性
}
btnEle.onclick = function (){ // 定义事件：单击开始按钮事件
if(!t){ // 判断是否已经创建了定时任务(如果这里不判段的话，连续点击开始就无法暂停)
t = setInterval(showtime,1000) // 创建定时任务(每一秒执行一次showtime函数)
}
}
btn2Ele.onclick = function (){ // 定义事件：单击暂停按钮事件
clearInterval(t) // 清除定时任务
t = null // 重置全局变量(不重置的话再次点击开始按钮是无法执行的，定时任务判断为flase)
}
</script>
</body>
示例二：校验用户名密码
点击查看代码
需求：在输入用户名和密码为空时，会提示不能为空。
<body>
<p>username:
<input type="text" id="i1">
<span id="p1"></span>
</p>
<p>password:
<input type="password" id="i2">
<span id="p2"></span>
</p>
<button id="b1">登录</button>
<script>
var i1ELe = document.getElementById('i1') // 查询标签input用户名
var i2Ele = document.getElementById('i2') // 查询标签input密码
var butEle = document.getElementById('b1') // 查询标签button登录按钮
var span1Ele = document.getElementById('p1') // 提示信息span1
var span2Ele = document.getElementById('p2') // 提示信息span2
butEle.onclick = function (){ // 创建事件：单击按钮事件
if(i1ELe.value===''){ // 如果input用户名框数据为空
span1Ele.innerText = '输入账号不能为空' // span1标签添加文本
span1Ele.style.color = 'red' // 添加文本样式：字体颜色
span1Ele.style.fontSize = '12px' // 字体大小
}
if(i2Ele.value===''){
span2Ele.innerText = '输入密码不能为空' // span2标签提示
span2Ele.style.color = 'red'
span2Ele.style.fontSize = '12px'
}
}
i1ELe.onfocus = function (){ // input1创建事件：聚焦事件
span1Ele.innerText = '' // span1标签文本数据改为空
}
i2Ele.onfocus = function (){ // input2创建事件：聚焦事件
span2Ele.innerText = '' // span2标签文本数据改为空
}
</script>
</body>
标签：style,DOM,标签,js,getElementById,var,操作,document 来源： https://www.cnblogs.com/jjjmhf50/p/15894430.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。