11.47 DOM操作
查找节点：
11.471 直接查找
document.getElementById //根据ID获取唯一一个标签 document.getElementsByClassName //根据class属性获取一系列标签 document.getElementsByTagName //根据标签名获取一系列标签
11.472 间接查找
| 语法 | 含义 |
|---|---|
| childNodes | 获取所有的子节点，除了元素还有文本等 |
| children | 获取所有元素子节点，不包含文本 |
| parentNode | 获取父节点 |
| previousSibling | 获取上一个兄弟节点，不包含文本 |
| previousElementSibling | 获取上一个兄弟元素节点，包含文本 |
| nextSibling | 获取下一个兄弟节点，不包含文本 |
| nextElementSibling | 获取下一个兄弟元素节点，包含文本 |
| firstChild | 获取第一个子节点，不包含文本 |
| firstElementChild | 获取第一个子节点，包含文本 |
| lastChild | 获取最后一个子节点，不包含文本 |
| lastElementChild | 获取父元素最后一个元素节点，包含文本 |
11.473 增加节点
1、创建新节点 var divEle = document.createElement(‘div‘); 2、追加一个子节点（放到最后） 父节点.appendChild(新的子节点)； 3、插入一个子节点（插入到某个节点前） 父节点.insertBefore(新的子节点,某个节点); 4、克隆节点 要复制的节点.cloneNode(); //括号里不带参数和带参数false：只复制节点本身，不复制子节点。 要复制的节点.cloneNode(true); //带参数true：既复制节点本身，也复制其所有的子节点。
11.474 删除、替换节点
父节点.removeChild(要删除的子节点)； 父节点.replaceChild(新的子节点, 某个子节点);
11.475 修改/设置节点属性
1、获取文本节点的值：
var divEle = document.getElementById("d1")
divEle.innerText //只查看所有标签内的文本
divEle.innerHTML //查看所有子标签，包括文本和子标签
2、设置文本节点的值：
var divEle = document.getElementById("d1")
divEle.innerText="1" //先清空节点内容，再添加文本(字符串:‘<h1>我是h1</h1>‘)
divEle.innerHTML="<p>2</p>" //先清空节点内容，可识别文本内的html标签(标签:‘<h1>我是h1</h1>‘)
3、attribute操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
4、自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."
11.476 获取元素的值
适用于input、select、textarea标签 var x=document.getElementById(‘input‘) var y=document.getElementById(‘select‘) var z=document.getElementById(‘textarea‘) x.value y.value z.value
11.477 class操作
var x=document.getElementById(‘div1‘) ? x.classList.remove(‘col1‘) //x.classList里删除class=‘col1‘ x.classList.add(‘col1‘) //x.classList里添加class=‘col1‘ x.classList.contains(‘col1‘) //x.classList里是否有class=‘col1‘ x.classList.toggle(‘col1‘) //没有就添加，返回true，有就删除，返回false
11.478 css操作
obj.style.backgroundColor="red" //此处设置的是行内样式 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
11.479 事件
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时执行一段JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
1、常用事件
onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 ? onfocus 元素获得焦点。 // 输入框 onblur 元素失去焦点。 //应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 //应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动） ? onkeydown 某个键盘按键被按下。 //应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 ? onselect //在文本框中的文本被选中时发生。 onsubmit ///确认按钮被点击，使用的对象是form。
2、绑定方式
方式一：
行内绑定：直接通过div被点击来修改自身样式：
<body>
<div id="div1" onclick="changeColor(this)"> 我是div，点我 </div>
<script> //this是实参，表示触发事件的当前元素
function changeColor(ths) {
ths.style.backgroundColor="green"; //函数定义过程中的ths为形参
}
</script>
</body>
通过button被点击来修改另一个div标签样式：
<body>
<input type="button" id="b1" value="开关" onclick="change()">
<div class="c1 bg-red"></div>
<script> //<script>必须放在div定义后，可以放在body里
function change() {
var c1Ele = document.getElementsByClassName("c1")[0]; // 找到c1这个标签
c1Ele.classList.toggle("bg-green"); // 修改classList
}
</script>
</body>
方式二：
直接绑定匿名函数：直接通过div被点击来修改自身样式：
<body>
<div id="div1">来，点亮我的绿</div>
<script>
var oDiv = document.getElementById(‘div1‘);
oDiv.onclick = function() {
this.style.backgroundColor = ‘red‘;
}
</script>
</body>
通过button被点击来修改另一个div标签样式：
<body>
<input type="button" id="b2" value="开关">
<div class="c1 bg-red"></div>
<script>
function change() {
var c1Ele = document.getElementsByClassName("c1")[0]; // 找到c1这个标签
c1Ele.classList.toggle("bg-green"); // 修改classList
}
var b2Ele = document.getElementById("b2"); // 通过JS代码绑定事件
b2Ele.onclick = ()=>{
change();
}
</script>
</body>
方式三：
先单独定义函数，再绑定
<div id="box1" ></div>
<script>
var div1 = document.getElementById("box1");
div1.onclick = fn; //注意，这里是fn，fn代表的是整个函数,fn()指的是返回值。
function fn() { //单独定义函数
alert("我是弹出的内容");
}
</script>
11.4791 定时器
<body>
<input type="button" id="b1" value="开始">
<input type="button" id="b2" value="停止">
<input type="text" id="i1">
<script>
var t;
function showTime() {
var now = new Date(); // 将当前时间填写到i1中
var i1Ele = document.getElementById("i1");
i1Ele.value = now.toLocaleString();
}
showTime(); //1找到开始按钮,给它绑定事件,点击后每隔1秒执行一次showTime()
var b1Ele = document.getElementById("b1");
b1Ele.onclick = function () {
if (!t){
t = setInterval(showTime, 1000);
}
};
var b2Ele = document.getElementById("b2");//2找到停止按钮，给它绑定事件，点击之后就清除定时器
b2Ele.onclick = function () {
clearInterval(t); // 清除的是定时器，
console.log(t);
t = undefined; //t只是一个普通的变量，它保存了定时器的id值,清除定时器后t中还有值
};
</script>
</body>
定时器
11.4792 输入框聚焦
<body>
<input type="text" id="i1" value="海飞丝">
<input type="text" id="i2" value="辣条" onfocus="f1(this);" onblur="f2(this);">
<script> //this指的是当前事件的标签对象
//方式一
function f1(ths) {
ths.value = "";
}
function f2(ths) {
ths.value = "辣条";
}
?
//方式二
var i1Ele = document.getElementById("i1");
i1Ele.onfocus = function () { // 给i1设置获取光标的事件
this.value = "";
};
i1Ele.onblur = function () {
this.value = "海飞丝"; // 给i1设置失去光标的事件
}
</script>
</body>
11.4793 select联动
<body>
<select id="province">
<option>请选择省:</option>
</select>
<select id="city">
<option>请选择市:</option>
</select>
<script>
var s1Ele = document.getElementById("province");
var s2Ele = document.getElementById("city");
var data = {"上海": ["黄浦区", "静安区"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
for (let k in data) { // 将省直辖市数据填充到第一个select中
//console.log(k);
let tmp = document.createElement("option");
tmp.innerText = k;
s1Ele.appendChild(tmp); // 将创建的tmp添加到第一个select中
}
s1Ele.onchange = function () { // 当第一个select框的值发生变化之后才去更新第二个select框
s2Ele.innerHTML = ""; //第二次选择区时清空第二个select框的option选项
let p = document.createElement("option");//恢复默认选项‘请选择省市‘
p.innerText = "请选择市";
s2Ele.appendChild(p);
//console.log(this.value);
let provine = this.value; //拿到选择的省或直辖市
?
// 将province对应的区信息 填充到第二个select中
for (let i = 0; i < data[provine].length; i++) {
let tmp = document.createElement("option");
tmp.innerText = data[provine][i];
s2Ele.appendChild(tmp);
}
}
</script>
</body>
原文地址：https://www.cnblogs.com/mylu/p/11380035.html
时间： 2024-10-09 03:21:36