JS基础DOM一
程序员文章站
2022-06-30 19:14:30
...
事件
1.常见事件
- onclick:点击某个对象时调用
- ondblclick:双击某个对象
- onmouseover:鼠标移动到元素上
- onmouseout:鼠标从某元素离开
- onfocus:元素获取焦点触发
- onblur:元素失去焦点触发
- oninput:文本输入文字事件
- onchange:文本的内容被改变
- onload:当页面加载完毕的时候触发(文本和图片)
- onkeydown:键盘按钮被按下
- onkeyup:键盘按钮被松开
2.事件绑定
- 行内绑定
<div id="box" onclick="fn()">
- 带名函数
//带名函数
var div = document.getElementById("box");
div.onclick = fn;
function fn() {
alert(123);
}
- 匿名函数
//匿名函数
var div = document.getElementById("box");
div.onclick = function () {
alert(123);
div.style.width = "200px";
};
//页面加载完毕的时候出发这个事件(文本和图片)
//整个页面上所有的元素加载完成才会出发这个事件
//window.onload可以预防使用标签再定义标签之前
window.onload = function () {
alert(1);
}
3.节点访问
节点的访问关系是以属性形式存在的
<div class="box1">
<div class="box3"></div>
<div class="box2">
<div class="box5"></div>
</div>
<div class="box4"></div>
</div>
- 节点访问
//获取父节点
var box2 = document.getElementsByClassName("box2")[0];
console.log(box2.parentNode);//打印的是box1
//兄弟节点
//下一个兄弟节点
console.log(box2.nextElementSibling || box2.nextSibling);//兼容写法，nextSibling只支持ie678
//前一个兄弟节点
console.log(box2.previousElementSibling || box2.previousSibling);
//子节点
console.log(box2.firstElementChild || box2.firstChild);//第一个子节点
console.log(box2.lastElementChild || box2.lastChild);//最后一个子节点
//所有子节点
console.log(box2.parentNode.children);//正常返回
console.log(box2.parentNode.childNodes);//把空格和换行也算成节点，所以里面有7个元素
- 节点操作
//创建节点
var div1 = document.createElement("div1");
var div2 = document.createElement("div2");
//插入节点
box2.parentNode.appendChild(div1);//在最后插入节点
box2.parentNode.insertBefore(div2,div1);//两个参数前一个是要插入的节点，第二个是要在哪个节点前插入
//删除节点
div1.parentNode.removeChild(div1);//删除节点，也算是把自己删除了
//克隆节点
var div3 = div2.cloneNode(false);
box2.parentNode.insertBefore(div3,div2);//参数是bool，true把所有子节点也复制了，false只是复制一个节点
4.节点属性
<img src="" alt="" class="box" id="aaa" title="哈哈哈" width="200px" height="200px"/>
<button value="sss" >sssssss</button>
//获取属性
var img = document.getElementById("aaa");
console.log(img.getAttribute("class")) ;
console.log(img.title);
console.log(img["width"]);
//设置属性
img.setAttribute("title","ttttt");//可以设置没有的属性
img.title = "哦哦哦";
img["alt"] = "300";
// 重点：这三种方法不能交替使用，赋值和取值必须用同一种犯法
//删除属性
img.removeAttribute("width");
// innerHTML：获取双闭合标签里面的内容(识别标签)
console.log(document.getElementsByTagName("button")[0].innerHTML);
document.getElementsByTagName("button")[0].innerHTML = "<h1>我变大了吗</h1>";
// innerText：获取双闭合标签里面的内容(不识别标签)
console.log(document.getElementsByTagName("button")[0].innerText);
document.getElementsByTagName("button")[0].innerText = "<h1>我变大了吗</h1>"
5.节点类型
<div id="box">您好</div>
var div = document.getElementById("box");//获取元素节点
var att = div.getAttributeNode("id");//获取属性节点
var text = div.firstChild;//文本节点
console.log(div);//div整体标签
console.log(att);//id = "box"
console.log(text);
//nodeType节点类型
console.log(div.nodeType);//1元素节点
console.log(att.nodeType);//2属性节点
console.log(text.nodeType);//3文本节点
//nodeName节点名字
console.log(div.nodeName);//div
console.log(att.nodeName);//box
console.log(text.nodeName);//#text
//nodeValue属性值
console.log(div.nodeValue);//null，元素是没有属性值的
console.log(att.nodeValue);//box
console.log(text.nodeValue);//您好
6.表单属性
- 禁用文本框
<body>
账号： <input type="text" id="acount"/><button>禁用</button><br/><br/>
密码： <input type="password"/>
</body>
<script>
var input = document.getElementById("acount");
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
btn.innerHTML === "禁用" ? input.disabled = "no" : input.removeAttribute("disabled");//随便写字符串都行，只要不是空
btn.innerHTML = btn.innerHTML === "禁用" ? "解禁" : "禁用";
}
</script>
- 文本获取焦点
<body>
<div class="focus">
京东：<input type="text"value="我是京东" id="input1"/><br/><br/>
淘宝：<label for="input2">我是淘宝</label><input type="text" id="input2"/>
</div>
</body>
<script>
var input_jd = document.getElementById("input1");
var input_tb = document.getElementById("input2");
//焦点触发事件
var jd_ph;
input_jd.onfocus = function () {
if (this.value = "我是京东"){
jd_ph = this.value;
}
this.value = "";
}
//失去焦点触发事件
input_jd.onblur = function () {
this.value = jd_ph;
}
//文字的输入事件
input_tb.oninput = function () {
var label = input_tb.parentNode.children[3];
label.style.display = this.value === "" ? "block" : "none";
}
//直接获取焦点
input_tb.focus();//一加载完成就会获取焦点
</script>
- 登录注册高亮显示
<style type="text/css">
.error {
border: 1px solid red;
}
.right {
border: 1px solid green;
}
</style>
<body>
<div>
账号：<input type="text" onblur="jude(this)"/><br/><br/>
密码：<input type="password" onblur="jude(this)"/>
</div>
</body>
<script>
function jude(inp) {
//this代指的不是input，而是window，所以要把input传递进来
console.log(this);
if (inp.value.length < 6 || inp.value.length > 12){
inp.className = "error";
}else {
inp.className = "right";
}
}
</script>
- select属性
<body>
<div>
<button id="sel">识别水产</button>
<br/><br/>
<select name="" id="">
<option value="0">香蕉</option>
<option value="1">苹果</option>
<option value="2">鸭梨</option>
<option value="3">鲤鱼</option>
</select>
</div>
</body>
<script>
var sel_btn = document.getElementById("sel");
var opt = document.getElementsByTagName("option")[3];
sel_btn.onclick = function () {
//选择鲤鱼
opt.selected = "true";
}
</script>
- 单选框全选
<body>
<table>
<thead>
<tr>
<th>
<input type="checkbox"/>
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/>
</td>
<td>地三鲜</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>西红柿炒鸡蛋</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>醋溜土豆丝</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>萝卜干炒黄豆儿</td>
<td>田老师</td>
</tr>
</tbody>
</table>
</body>
<script>
//获取input标签
var titleInput = document.getElementsByTagName("th")[0].children[0];
var inputArray = document.getElementsByTagName("tbody")[0].getElementsByTagName("input");
titleInput.onclick = function () {
for (var i = 0;i < inputArray.length;i++){
inputArray[i].checked = this.checked;
}
}
for (var i = 0;i < inputArray.length;i++){
inputArray[i].onclick = selFn;
}
function selFn() {
// var bool = inputArray.every(function (item,index,array) {
// return item.checked;
// });//伪数组没有数组的一些遍历方法
var bool = true;
for (var i = 0;i < inputArray.length;i++){
if (!inputArray[i].checked){
bool = false;
break;
}
}
titleInput.checked = bool;
}
</script>
上一篇： ZF学习之新建控制器
下一篇： js基础一