點我

常見事件

(2)對標簽值的操作

innerText

//設置文本

var oDiv=document.getElementById('box');

oDiv.innerText='哈哈哈'

innerHTML

//既可以設置文本 又可以設置標簽 設置 set 獲取 get 點語法(set方法和get方法)

oDiv.innerHTML='

嘿嘿嘿

'

(3) 獲取標簽內容值

//只獲取所有(當前標簽和子標簽)文本內容

console.log(oDiv.innerText);//獲取父標簽中所有標簽元素(子標簽,空格,換行,文本)

console.log(oDiv.innerHTML);

(4)對表單控件value的操作

//設置value值 只適應于表單控件元素

document.getElementById('user').value = 'alex';

console.log(document.getElementById('user').value);

(5)對標簽的css操作(樣式操作)

xxx.style.css的屬性key='值'

盒子顏色的切換

var oDiv = document.getElementsByClassName('box')[0];var isRed = true;

oDiv.οnclick= function() {if(isRed) {//this 誰做的事件操作 this指向誰

this.style.backgroundColor = 'green';this.style.width = '400px';

isRed= false;

}else{this.style.backgroundColor = 'red';

isRed= true;

}

}

(6)對標簽屬性的操作

var oDiv = document.getElementsByClassName("box")[0];var oBtn = document.getElementById("btn");var isShow = true;

oBtn.οnclick= function() {if(isShow){

oDiv.id= "box1";

oDiv.title= "hhhh";

console.log(oDiv.className);//box

oDiv.className = oDiv.className+"active";

isShow= false}else{

oDiv.className= "box";

isShow= true}

}

DOM的操作(創建,追加,刪除)

js中的面向對象

定時器

1. DOM的操作(創建,追加,刪除)

(1)DOM節點的獲取

parentNode 獲取父級標簽

nextElementSibling 獲取下一個兄弟節點

children 獲取所有的子標簽

var oP = document.getElementById("wuxia");

console.log(oP.parentNode);//父級div標簽下的所有內容

console.log(oP.nextElementSibling.innerText); //蕭峰

console.log(oP.nextSibling.innerText); //IE瀏覽器

var a = oP.nextElementSibling||oP.nextSibling;

console.log(a);

console.log(oP.parentNode.childen);

(2) DOM的增刪操作

創建 createElement()

//既可以創建已有的標簽,還可以創建自定義的標簽

var oDiv = document.createElement('div')

追加 appendChild() 父子標簽操作

父.appendChild(oDiv);

刪除 removeChild()

父.removeChild(子節點);

自己.parentNode.removeChild(自己)

插入insertBefore()

父.insertBefore(新的子節點,要參考的節點)

利用創建刪除實現隱藏代碼示例

var oBtn = document.querySelector("#btn");var oDel = document.querySelector("#del");var oFather = document.querySelector(".father");var oP = null;var oA = null;

oBtn.οnclick= function(){//創建 dom p標簽

oP = document.createElement("p");

oA= document.createElement("a");//追加到父級標簽中

oFather.appendChild(oP);

oFather.insertBefore(oA,oP);//設置對象屬性值

oA.href = 'http://www.baidu.com';//設置值

oA.innerText="百度";

oP.innerHTML= "alex";

oP.setAttribute("class","active")

};

oDel.οnclick= function(){//如果oP對象存在就結束程序

if (!oP){return;// }else{

console.log(oFather);//將增加的p標簽移出

oFather.removeChild(oP)

}

}

使用js模擬hover選擇器

Title

*{

padding:0;

margin:0;

}

ul{

list-style: none;

}

ul{

width: 600px;

height: 80px;

line-height: 80px;

text-align:center;

overflow:hidden;

}

ul li{float:left;

margin:010px;

width: 80px;

height: 80px;

background: darkturquoise;

color: #fff;

}

ul li.active{

background: red;

}

舉

頭

望

明

月

var lists = document.getElementsByTagName("li");for(var i =0;i

lists[i].οnclick= function(){//在修改當前盒子樣式之前,現將所有盒子的類名置空

for(var j=0; j

lists[j].className="";

}this.className = "active"; //修改當前 鼠標進入盒子的樣式

}

}

選項卡

Title

*{

padding:0;

margin:0;

}

ul{

list-style: none;

}

#tab{

width: 480px;

margin: 20px auto;

border: 1px solid red;

}

ul{

width:100%;

overflow: hidden;

}

ul li{float: left;

width: 160px;

height: 60px;

line-height: 60px;

text-align: center;

background-color: #cccccc;

}

ul li a{

text-decoration: none;

color:black;

}

li.active {

background-color: darkcyan;

}

p{

display: none;

height: 200px;

text-align: center;

line-height: 200px;

background-color: darkgrey;

}

p.active{

display: block;

}

首頁

新聞

圖片

首頁內容

新聞內容

圖片內容

var lists = document.getElementsByTagName("li");var oPs = document.getElementsByTagName("P");//var i;

//i=3 變量提升 會導致 變量 是一個全局作用域

//var 聲明變量 全局作用域,存在變量提升

for(var i= 0; i

lists[i].currentIndex =i;

console.dir(lists[i]);

lists[i].οnclick= function(){for(var j = 0; j

lists[j].className= "";

oPs[j].className= '';

}this.className = "active";

oPs[this.currentIndex].className = 'active'}

}

2.js中的面向對象

(1)使用Object或對象字面量創建對象

//構造函數方式創建對象

let person = newObject();

person.name= 'alex';

person.fav= function() {

console.log(this);

}//字面量方式創建 使用最多

var person2 ={

name:'wusir',

age:19,

fav:function() {

alert(this.age);

}

}

person2.fav();

3.定時器

事件點擊案例

Title

提交

確認

大海啊,全是水

functionf1(ths) {

ths.style.color= 'red';vardiv1=document.getElementById('xxx');

div1.style.color= 'yellow';

}varbtn2=document.getElementById('btn2');

btn2.οnclick= function() {this.style.color= 'blue';

}

總結

以上是生活随笔為你收集整理的pythonjs设置_python dom操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。