JS操作html元素认知
2019-07-30 本文已影响0人
追逐_chase
web.jpeg
JS有三部分组成
- ECMAscript(欧洲计算机制造商协会) ： 描述了JS的语法和基本对象的规范
- DOM：文档对象模型，处理网页的内容方法和接口(操作页面元素)
- BOM ：浏览器对象模型，浏览器交互的方法和接口（操作浏览器）
JS操作html元素，其实就是操作
DOM文档对象,整个html 文件就是是一个文档，那么这个文档看成一个文档对象，文档中的所有的标签都可以看成一个对象, 那么JS 是如何操作对象呢？
1.JS 中获取元素对象的方法
-
1. 1根据id从整个的文档中获取元素---返回的是一个元素对象
document.getElementById("id属性的值")
<script>
/*
在JS中
getElementById(元素的ID) 来获取元素 对象
*/
//获取元素对象
var box = document.getElementById("box");
//给元素对象 注册点击事件
box.onclick = function(){
this.style.backgroundColor = "red";
//设置div里面的内容
box.innerHTML = "<h2>这是h2标签</h2>";
}
</script>
image.png
-
1.2.根据标签的名字获取元素-----返回的是元素对象组成的伪数组
document.getElementsByTagName("标签的名字");
-
1.3这个几个有兼容性问题的 获取元素
1.根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 --->
ocument.getElementsByName("name属性的值")
2.根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 -->document.getElementsByClassName("类样式的名字")
3.根据选择器获取元素,返回来的是一个元素对象 -->document.querySelector("选择器的名字")
4.根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象---->document.querySelectorAll("选择器的名字")
我们通过JS获取到 元素对象目的就是修改里面的css样式或者之间的交互，那么如何更改样式属性呢?
image.png
从上面的例子中，我们看到，如果
标签有直接的属性，只需要操作基本标签的属性，比如:src,title,alt,href,id属性直接操作赋值
当然这样操作的基本标签属性，我们还可以通过 对象.style.属性=值; 这样的方式操作样式属性
<body>
<div id="dv"></div>
<input type="button" value="设置样式" id="btn">
<input type="button" value="显示" id="btn1">
<input type="button" value="隐藏" id="btn2">
</body>
</html>
<script>
var btn = document.getElementById("btn");
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var box = document.getElementById("dv");
btn.onclick = function(){
//凡是css中这个属性是多个单词的写法,在js代码中DOM操作的时候.把-干掉,后面的单词的首字母大写即可
box.style.width = "200px";
box.style.height = "200px";
box.style.backgroundColor = "red";
}
btn1.onclick = function(){
box.style.display = "block";
}
btn2.onclick = function(){
box.style.display = "none";
}
</script>
Untitled.gif
从上面中我们可以看到，通过对象的
style样式来修改CSS的变化，其中一个点击 事件 onclick， 其中比较常用的有onmouseover 鼠标经过事件,onmouseout 鼠标离开,onfocus 获取焦点,onblur 失去焦点，onload 页面加载完成时 才调用JS代码
上面我们知道如何修改style，那么怎么修改标签里面的内容呢？ 通过 textContent ,innerText,innerHTML设置和获取文本内容
- 设置标签中的文本内容,可以使用
textContent属性,谷歌,火狐支持,IE8不支持 -
innerText属性,谷歌,火狐,IE8都支持
上面的2个属性都是 修改文本的内容， 只是文本级的修改，比如:
-
innerText设置获取
<body>
<input type="button" value="innerText设置值" id="btn">
<div id="dv">开始修改内容</div>
</body>
<script>
var btn = document.getElementById("btn");
var dvObj = document.getElementById("dv");
//点击事件 获取内容
btn.onclick = function(){
//获取内容
console.log(dvObj.innerText);
dvObj.innerText = "这是换一个美好的开始";
}
</script>
-
textContent设置获取文本
<body>
<input type="button" value="textContent设置值" id="btn">
<div id="dv">开始修改内容</div>
</body>
<script>
var btn = document.getElementById("btn");
var dvObj = document.getElementById("dv");
//点击事件 获取内容
btn.onclick = function(){
//获取内容
console.log(dvObj.textContent);
dvObj.textContent = "这是换一个美好的开始";
}
</script>
Untitled.gif
-
innerHTML设置获取文本内容，这个里面如果包含标签,那么这个标签是可以语义化的
<script>
//获取元素对象
var box = document.getElementById("box");
//注册点击事件
//根据类 获取元素对象 返回时一个 数组
var tt = document.getElementsByClassName("btn");
tt[0].onclick = function(){
// innerText 获取或者设置 - 文本内容
// 如果里面包含标签，会正常显示出文本
// alert(box.innerText);
box.innerText = "<p>innerText设置文本内容</p>";
}
//获取元素 对象
var btn1 = document.getElementById("btn1");
//注册事件
btn1.onclick = function(){
//获取内容
console.log(box.innerHTML);
//设置内容 里面的标签 可以起到语义的作用
box.innerHTML = "<h2>用innerHTML设置内容</h2>"
}
</script>
文件上传获取文件的后缀名
-
onchange内容发生改变的事件 - 字符串截取和拼接
<body>
<input type="file" id="file">
</body>
<script>
//用户改变域的内容时 调用
var inputObj = document.getElementById("file");
//文本域 发生改变的时候
inputObj.onchange = function(){
//获取到 上传文件的名称路径
console.log(this.value);
var path = this.value;
//获取后缀的位置
var index = path.indexOf(".") + 1;;
//获取文件名称 截取substr 或者 slice
var pathName = path.substr(index)
console.log(pathName);
}
</script>
image.png
