Python全棧開發之1五、DOM
文檔對象模型（Document Object Model，DOM）是一種用於HTML和XML文檔的編程接口。它給文檔提供了一種結構化的表示方法，能夠改變文檔的內容和呈現方式。咱們最爲關心的是，DOM把網頁和腳本以及其餘的編程語言聯繫了起來。DOM屬於瀏覽器，而不是JavaScript語言規範裏的規定的核心內容。這裏咱們主要是講用javascript操做DOMjavascript
1、查找元素
若是咱們想用js操做文檔，首先要作的即是要找到要操做的元素，查找元素有直接查找和間接查找，下面來看一下這兩類查找，html
// 直接查找 document.getElementById 根據ID獲取一個標籤 獲取的是單個標籤 document.getElementsByName 根據name屬性獲取標籤集合 注意獲取的是一個 ******數組******** document.getElementsByClassName 根據class屬性獲取標籤集合 document.getElementsByTagName 根據標籤名獲取標籤集合 // 間接查找 parentNode // 父節點 childNodes // 全部子節點 firstChild // 第一個子節點 lastChild // 最後一個子節點 nextSibling // 下一個兄弟節點 previousSibling // 上一個兄弟節點 parentElement // 父節點標籤元素 children // 全部子標籤 firstElementChild // 第一個子標籤元素 lastElementChild // 最後一個子標籤元素 nextElementtSibling // 下一個兄弟標籤元素 previousElementSibling // 上一個兄弟標籤元素
2、操做
一、內容
操做內容主要是 innerText，innerHTML和value其中前兩種比較簡單，主要是第三種在操做表單的時候，用得最多，text，password和textarea的value能夠分爲一類，checkbox，radio和select的value能夠分爲一類，下面來看下錶單中操做value的例子java
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="i1" type="text" value="123"/>
<input id="i2" type="password" value="111" />
<textarea id="i3">666</textarea>
<h1>愛好</h1>
<div id="i4">
<ul>
<li> <input type="checkbox" value="1" /> 籃球 </li>
<li> <input type="checkbox" value="2"/> 足球 </li>
<li> <input type="checkbox" value="3"/> 去球 </li>
</ul>
</div>
<div id="i5">
<ul>
<li> <input type="radio" name="interesting" value="11" /> 籃球 </li>
<li> <input type="radio" name="interesting" value="22"/> 足球 </li>
<li> <input type="radio" name="interesting" value="33"/> 去球 </li>
</ul>
</div>
<select id="i6">
<option value="11">上海</option>
<option value="22">北京</option>
</select>
<script>
// 下面三項的value值爲用戶輸入的值，也能夠經過value給其設置值
var vtext = document.getElementById('i1');
console.log(vtext.value);
var vpasswd = document.getElementById('i2');
console.log(vpasswd.value);
var vtextarea = document.getElementById('i3');
console.log(vtextarea.value);
// 下面三項的 value 爲選中後提交到後臺value
var vcheck = document.getElementById('i4');
var vli = vcheck.getElementsByTagName('input');
console.log(vli);
vli[1].checked = true; //選中複選框的第二項
console.log(vli[1].value); //選中以後值爲2
var vradio = document.getElementsByName('interesting');
console.log(vradio);
vradio[1].checked = true; //選中單選框的第二項
console.log(vradio[1].value);
var vselect = document.getElementById('i6');
console.log(vselect.value); // 默認爲第一項上海，value爲 11
var voption = vselect.children; //選中以後值爲22
voption[1].selected = true; //選中第二項北京
</script>
</body>
</html>
下面再來看一個用單選框作的全選，反選，取消的小例子。python
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="btn">
<!--<input type="button" value="全選" onclick="SAll();">-->
<!--<input type="button" value="反選" onclick="RAll();">-->
<!--<input type="button" value="取消" onclick="CAll();">-->
<input type="button" value="全選" onclick="Fun('S');">
<input type="button" value="反選" onclick="Fun('R');">
<input type="button" value="取消" onclick="Fun('C');">
</div>
<div>
<table>
<thead>
<tr>
<th>序號</th>
<th>用戶名</th>
<th>年齡</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input class="inp" type="radio" value="1"></td>
<td>jason</td>
<td>20</td>
</tr>
<tr>
<td><input class="inp" type="radio" value="1"></td>
<td>jason</td>
<td>20</td>
</tr>
<tr>
<td><input class="inp" type="radio" value="1"></td>
<td>jason</td>
<td>20</td>
</tr>
<tr>
<td><input class="inp" type="radio" value="1"></td>
<td>jason</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
<script>
function SAll() {
var tb = document.getElementById('tb');
var inp = tb.getElementsByTagName('input');
for(var i=0;i<inp.length;i++){
inp[i].checked = true;
}
}
function CAll() {
var tb = document.getElementById('tb');
var inp = tb.getElementsByClassName('inp');
for(var i=0;i<inp.length;i++){
inp[i].checked = false;
}
}
function RAll() {
var tb = document.getElementById('tb');
var inp = tb.getElementsByClassName('inp');
for(var i=0;i<inp.length;i++){
if(inp[i].checked){
inp[i].checked = false;
} else{
inp[i].checked = true;
}
}
}
// 用一個函數加上switch函數解決
function Fun(arg) {
var tb = document.getElementById('tb');
var inp = tb.getElementsByTagName('input');
switch(arg){
case 'S':
for(var i=0;i<inp.length;i++){
inp[i].checked = true;
}
break;
case 'C':
for(var i=0;i<inp.length;i++){
inp[i].checked = false;
}
break;
case 'R':
for(var i=0;i<inp.length;i++){
if(inp[i].checked){
inp[i].checked = false;
}else{
inp[i].checked = true;
}
}
break;
default:
break;
}
}
</script>
</body>
</html>
二、操做屬性
除了操做內容，還能夠操做標籤屬性，主要用到下面幾個方法編程
attributes // 獲取全部標籤屬性 setAttribute(key,value) // 設置標籤屬性 getAttribute(key) // 獲取指定標籤屬性
下面來看一下示例 數組
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="btn">
<input type="button" onclick="Func();" value="點擊" />
<div id="i1" >
<div class="c1" alex="gg" jason="hh">123</div>
<div class="c1" alex="kk">123</div>
<div class="c1">123</div>
<div class="c1" alex="kk">123</div>
<div class="c1" alex="kk">123</div>
<div class="c1">123</div>
<div class="c1" alex="kk">123</div>
<div class="c1">123</div>
</div>
</div>
<script>
function Func() {
var d = document.getElementById('i1');
var dchild = d.children;
for(var i=0;i<dchild.length;i++){
if(dchild[i].getAttribute('alex')=='kk'){
dchild[i].innerText = 456;
dchild[i].setAttribute('ko',666); // 設置屬性
console.log(dchild[i].attributes); // 獲取全部屬性
}
}
}
</script>
</body>
</html>
下面來看一個更加實用的小例子，點擊不一樣的菜單顯示不一樣的內容瀏覽器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.content{
margin: 0 auto;
width: 300px;
border: 1px solid chocolate;
}
ul{
list-style: none;
background-color: #cccccc;
}
ul li{
float: left;
display: block;
background-color: #2459a2;
padding:0 10px;
height: 50px;
line-height: 50px;
cursor: pointer;
}
.clearfix:after{
display: block;
content: '';
height: 0;
visibility: hidden;
clear: both;
}
#info{
min-height: 200px;
width: 300px;
}
.hide{
display: none;
}
.active{
background-color: white;
color: black;
}
</style>
</head>
<body>
<div class="content">
<ul class="clearfix">
<li tg="1" class="active" onclick="Func(this)">價格走勢</li>
<li tg="2" onclick="Func(this)">市場分佈</li>
<li tg="3" onclick="Func(this)">其餘</li>
</ul>
<div id="info">
<div targ="1" >conten1</div>
<div targ="2" class="hide">conten2</div>
<div targ="3" class="hide">conten3</div>
</div>
</div>
<script>
function Func(ths) {
var bot = ths.parentElement.children;
for(var i=0;i<bot.length;i++){
bot[i].classList.remove('active')
}
ths.classList.add('active');
var vtg = ths.getAttribute('tg');
var divs = document.getElementById('info').children;
for(var i=0;i<divs.length;i++){
if(divs[i].getAttribute('targ') == vtg){
divs[i].classList.remove('hide');
}else{
divs[i].classList.add('hide');
}
}
}
</script>
</body>
</html>
三、操做標籤
下面主要演示一下如何操做標籤，添加標籤有兩種方式，一種是以字符串，另一種是以添加標籤對象下面來簡單的看一下例子，向列表中添加一項內容app
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="btn">
<input type="text">
<input type="button" value="add" onclick="Addlist(this);">
</div>
<h2 id="h">sss</h2>
<div id="di">
<ul id="list">
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
<script>
function Addlist(ths) {
var v = ths.previousElementSibling.value;
ths.previousElementSibling.value = '';
var li = document.getElementById('list');
//方式1
// var str= '<li>' + v +'</li>';
// li.insertAdjacentHTML('beforeEnd',str);
var tag = document.createElement('li');
if(v.trim().length>0){
tag.innerText = v;
li.appendChild(tag);
li.insertBefore(tag,li.children[1]);
}
}
var h = document.getElementById('h');
var d = document.getElementById('di');
var neh_h= h.cloneNode(true); // 不clone的話，之前的會移除
d.appendChild(neh_h);
</script>
</body>
</html>
四、高度
高度主要有如下幾種狀況編程語言
- scrollTop: 滾動條距離頂部高度
- scrollHeight 文檔高度：自身+padding
- clientTop 邊框高度
- clientHeight 可見範圍的高度：自身+padding
- offsetTop 當前標籤距離「頂部」的高度
- 當前標籤距離「上部」定位標籤的高度
- offsetHeight 可見範圍的高度：自身+padding+border
首先來看一個返回頂部的例子ide
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.head{
height: 1500px;
}
.hide{
display: none;
}
#d1{
position: fixed;
width: 40px;
height: 40px;
right: 20px;
bottom: 20px;
background-color: chocolate;
color: white;
}
</style>
</head>
<body onscroll="F1();">
<div class="head">
<h1>he</h1>
</div>
<div id="d1" class="hide">
<a onclick="Func();">返回頂部</a>
</div>
<script>
function Func() {
document.body.scrollTop = 0;
}
function F1() {
var h = document.body.scrollTop;
var d = document.getElementById('d1');
if(h>100){
d.classList.remove('hide');
}else{
d.classList.add('hide');
}
}
</script>
</body>
</html>
下面在來看一個比較重要的佈局，隨着頁面內容相應的菜單內容也跟着變化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.header{
height: 50px;
width: 100%;
background-color: black;
}
.menu{
position: absolute;
min-height: 300px;
background-color: azure;
width: 200px;
left:150px;
}
#article{
position: absolute;
min-height: 700px;
width: 700px;
background-color: burlywood;
left: 350px;
}
ul{
list-style: none;
}
ul li{
display: block;
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
}
#article .artc{
height: 900px;
background-color: lavenderblush;
}
.fixed{
position: fixed;
top: 0;
}
.active{
background-color: #2459a2;
}
</style>
</head>
<body onscroll="Hua();">
<div class="header">
</div>
<div class="body">
<div class="content ">
<div class="menu" id="menu">
<ul>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ul>
</div>
<div id="article">
<div class="artc">
<p>content</p>
</div>
<div class="artc">
<p>sontent</p>
</div>
<div style="height: 300px" class="artc">
<p>sontent</p>
</div>
</div>
</div>
</div>
<script>
function Hua() {
var huaHeight = document.body.scrollTop;
var menu = document.getElementById('menu');
if(huaHeight>50){
menu.classList.add('fixed');
}else{
menu.classList.remove('fixed');
}
var articles = document.getElementById('article').children;
var menuitem = menu.getElementsByTagName('li');
for(var i=0;i<articles.length;i++){
var artofftop = articles[i].offsetTop;
var artoffheight = articles[i].offsetHeight;
// console.log(huaHeight,artofftop,artoffheight,i,clienthight);
if(huaHeight-48>=artofftop){
for(var j=0;j<articles.length;j++){
menuitem[j].classList.remove('active')
}
menuitem[i].classList.add('active');
}
}
var clienthight =document.documentElement.clientHeight;
if(huaHeight+clienthight == artofftop+artoffheight+50){
for(var j=0;j<articles.length;j++){
menuitem[j].classList.remove('active')
}
menuitem[articles.length-1].classList.add('active');
}
}
</script>
</body>
</html>
5、其餘操做
document.geElementById('form').submit() //表單提交
console.log 輸出框
alert 彈出框
confirm 確認框
// URL和刷新
location.href 獲取URL
location.href = "url" 重定向
location.reload() 從新加載
// 定時器
setInterval 屢次定時器
clearInterval 清除屢次定時器
setTimeout 單次定時器
clearTimeout 清除單次定時器
下面來看一下代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body >
<input type="button" value="確出框" onclick="Confirm();">
<input type="button" value="定時器" onclick="Interval();">
<input type="button" value="取消定時器" onclick="Uninterval();">
<input type="button" value="單次定時器" onclick="Mytimeout();">
<input type="button" value="取消單次定時器" onclick="Unmytimeout();">
<div id="btns">
<input type="button" value="點我">
<input type="button" value="點我">
<input type="button" value="點我">
</div>
<div id="i1">
</div>
</body>
<script>
//location.href 獲取URL
//location.href = "url" 重定向
//location.reload() 從新加載
function Confirm() {
var ret = confirm('xxxxxxx');
console.log(ret);
}
function f1() {
console.log(123);
}
function Interval() {
t1 = setInterval(f1,1000);
// t1 = setInterval(function () {
// console.log(2222)
// },1000)
}
function Uninterval() {
clearInterval(t1);
}
function Mytimeout() {
document.getElementById('i1').innerText = 'xxxxxx';
t2 = setTimeout(function () {
document.getElementById('i1').innerText = '';
},2000)
}
function Unmytimeout() {
clearTimeout(t2);
}
// 下面的代碼是兩個特殊的示例，須要特別的注意下
function f2() {
for (var i=0;i<3;i++){
setInterval((function (arg) { //當即執行，函數沒有返回值
console.log(arg);
})(i),1000)
}
}
f2();
var btns = document.getElementById('btns').children;
for(var j=0;j<btns.length;j++){
btns[j].onclick = function () {
alert(j);
}
}
</script>
</html>
6、事件
對於事件須要注意的要點：
- this
- event
- 事件鏈以及跳出
this標籤當前正在操做的標籤，event封裝了當前事件的內容。
相關文章
- 1. Python全棧開發1
- 2. Python全棧開發之1四、Javascript
- 3. Python全棧開發之1三、CSS
- 4. Python全棧開發之1六、jquery
- 5. Python全棧開發之Git
- 6. python全棧開發之路
- 7. Python全棧開發-Day1-Python基礎1
- 8. python全棧開發-第1天
- 9. Python全棧開發之併發編程
- 10. 1全棧開始之路
- 更多相關文章...
- • SQLite - Python - SQLite教程
- • C# 堆棧（Stack） - C#教程
- • PHP開發工具
- • RxJava操作符（五）Error Handling
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Python全棧開發1
- 2. Python全棧開發之1四、Javascript
- 3. Python全棧開發之1三、CSS
- 4. Python全棧開發之1六、jquery
- 5. Python全棧開發之Git
- 6. python全棧開發之路
- 7. Python全棧開發-Day1-Python基礎1
- 8. python全棧開發-第1天
- 9. Python全棧開發之併發編程
- 10. 1全棧開始之路