python 之前端开发（ DOM操作）

唐老丫 發表於 2019-8-19 22:02:00

<h4 class="md-end-block md-heading md-focus">11.47 DOM操作</h4>
查找节点：
<h5 class="md-end-block md-heading">11.471 直接查找</h5>
<div class="cnblogs_code">
<pre>document.getElementById //根据ID获取唯一一个标签
document.getElementsByClassName //根据class属性获取一系列标签
document.getElementsByTagName //根据标签名获取一系列标签</pre>
</div>
<h5 class="md-end-block md-heading">11.472 间接查找</h5>
<table class="md-table">
<thead>
<tr class="md-end-block"><th>语法</th><th>含义</th></tr>
</thead>
<tbody>
<tr class="md-end-block">
<td>childNodes</td>
<td>获取所有的子节点，除了元素还有文本等</td>
</tr>
<tr class="md-end-block">
<td>children</td>
<td>获取所有元素子节点，不包含文本</td>
</tr>
<tr class="md-end-block">
<td>parentNode</td>
<td>获取父节点</td>
</tr>
<tr class="md-end-block">
<td>previousSibling</td>
<td>获取上一个兄弟节点，不包含文本</td>
</tr>
<tr class="md-end-block">
<td>previousElementSibling</td>
<td>获取上一个兄弟元素节点，包含文本</td>
</tr>
<tr class="md-end-block">
<td>nextSibling</td>
<td>获取下一个兄弟节点，不包含文本</td>
</tr>
<tr class="md-end-block">
<td>nextElementSibling</td>
<td>获取下一个兄弟元素节点，包含文本</td>
</tr>
<tr class="md-end-block">
<td>firstChild</td>
<td>获取第一个子节点，不包含文本</td>
</tr>
<tr class="md-end-block">
<td>firstElementChild</td>
<td>获取第一个子节点，包含文本</td>
</tr>
<tr class="md-end-block">
<td>lastChild</td>
<td>获取最后一个子节点，不包含文本</td>
</tr>
<tr class="md-end-block">
<td>lastElementChild</td>
<td>获取父元素最后一个元素节点，包含文本</td>
</tr>
</tbody>
</table>
<h5 class="md-end-block md-heading">11.473 增加节点</h5>
<div class="cnblogs_code">
<pre>1、创建新节点
var divEle = document.createElement('div');
2、追加一个子节点（放到最后）
父节点.appendChild(新的子节点)；
3、插入一个子节点（插入到某个节点前）
父节点.insertBefore(新的子节点,某个节点);
4、克隆节点
要复制的节点.cloneNode(); //括号里不带参数和带参数false：只复制节点本身，不复制子节点。
要复制的节点.cloneNode(true); //带参数true：既复制节点本身，也复制其所有的子节点。</pre>
</div>
<h5 class="md-end-block md-heading">11.474 删除、替换节点</h5>
<div class="cnblogs_code">
<pre>父节点.removeChild(要删除的子节点)；
父节点.replaceChild(新的子节点, 某个子节点); </pre>
</div>
<h5 class="md-end-block md-heading">11.475 修改/设置节点属性</h5>
<div class="cnblogs_code">
<pre>1、获取文本节点的值：
var divEle = document.getElementById("d1")
divEle.innerText //只查看所有标签内的文本 
divEle.innerHTML //查看所有子标签，包括文本和子标签
2、设置文本节点的值：
var divEle = document.getElementById("d1")
divEle.innerText="1" //先清空节点内容，再添加文本(字符串:'<h1>我是h1</h1>')
divEle.innerHTML="2" //先清空节点内容，可识别文本内的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="..."</pre>
</div>
<h5 class="md-end-block md-heading">11.476 获取元素的值</h5>
<div class="cnblogs_code">
<pre>适用于input、select、textarea标签
var x=document.getElementById('input')
var y=document.getElementById('select')
var z=document.getElementById('textarea')
x.value
y.value
z.value</pre>
</div>
<h5 class="md-end-block md-heading">11.477 class操作</h5>
<div class="cnblogs_code">
<pre>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</pre>
</div>
<h5 class="md-end-block md-heading">11.478 css操作</h5>
<div class="cnblogs_code">
<pre>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</pre>
</div>
<h5 class="md-end-block md-heading">11.479 事件</h5>
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时执行一段JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
1、常用事件
<div class="cnblogs_code">
<pre>onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。

onfocus 元素获得焦点。 // 输入框
onblur 元素失去焦点。 //应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 //应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown 某个键盘按键被按下。 //应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。

onselect //在文本框中的文本被选中时发生。
onsubmit ///确认按钮被点击，使用的对象是form。</pre>
</div>
2、绑定方式
方式一：
行内绑定：直接通过div被点击来修改自身样式：
<div class="cnblogs_code">
<pre><body>
<div id="div1" onclick="changeColor(this)"> 我是div，点我 </div>
<script> //this是实参，表示触发事件的当前元素
function changeColor(ths) {
ths.style.backgroundColor="green"; //函数定义过程中的ths为形参
}
</script>
</body></pre>
</div>
通过button被点击来修改另一个div标签样式：
<div class="cnblogs_code">
<pre><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"); // 找到c1这个标签 
 c1Ele.classList.toggle("bg-green"); // 修改classList
 }
</script>
</body></pre>
</div>
方式二：
直接绑定匿名函数：直接通过div被点击来修改自身样式：
<div class="cnblogs_code">
<pre><body>
<div id="div1">来，点亮我的绿</div>
<script>
var oDiv = document.getElementById('div1');
oDiv.onclick = function() {
 this.style.backgroundColor = 'red';
}
</script>
</body></pre>
</div>
通过button被点击来修改另一个div标签样式：
<div class="cnblogs_code">
<pre><body>
<input type="button" id="b2" value="开关">
<div class="c1 bg-red"></div>
<script>
function change() {
 var c1Ele = document.getElementsByClassName("c1"); // 找到c1这个标签
 c1Ele.classList.toggle("bg-green"); // 修改classList
 }
var b2Ele = document.getElementById("b2"); // 通过JS代码绑定事件
b2Ele.onclick = ()=>{
 change();
}
</script>
</body></pre>
</div>
方式三：
先单独定义函数，再绑定
<div class="cnblogs_code">
<pre><div id="box1" ></div>
<script>
var div1 = document.getElementById("box1");
div1.onclick = fn; //注意，这里是fn，fn代表的是整个函数,fn()指的是返回值。
function fn() { //单独定义函数
 alert("我是弹出的内容");
}
</script></pre>
</div>
<h6 class="md-end-block md-heading">11.4791 定时器</h6>
<div class="cnblogs_code"><img id="code_img_closed_cc783a56-2c7a-4426-8f7c-630bd8ef75e1" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_cc783a56-2c7a-4426-8f7c-630bd8ef75e1" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_cc783a56-2c7a-4426-8f7c-630bd8ef75e1" class="cnblogs_code_hide">
<pre><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></pre>
</div>
定时器</div>
<h6 class="md-end-block md-heading">11.4792 输入框聚焦</h6>
<div class="cnblogs_code"><img id="code_img_closed_05480e13-8195-4f7d-b2e3-9beb6f164027" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_05480e13-8195-4f7d-b2e3-9beb6f164027" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_05480e13-8195-4f7d-b2e3-9beb6f164027" class="cnblogs_code_hide">
<pre><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></pre>
</div>
View Code</div>
<h6 class="md-end-block md-heading">11.4793 select联动</h6>
<div class="cnblogs_code"><img id="code_img_closed_c6abdbaf-a70a-4b74-a5e8-71ba9a7be5dd" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_c6abdbaf-a70a-4b74-a5e8-71ba9a7be5dd" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_c6abdbaf-a70a-4b74-a5e8-71ba9a7be5dd" class="cnblogs_code_hide">
<pre><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.length; i++) {
 let tmp = document.createElement("option");
 tmp.innerText = data;
 s2Ele.appendChild(tmp);
 }
}
</script>
</body></pre>
</div>
View Code</div> 
来源：https://www.cnblogs.com/mylu/p/11380035.html

頁: [1]

琼殿技术论坛's Archiver

python 之 前端开发（ DOM操作）

python 之前端开发（ DOM操作）