DOM:

1.查找元素：

1.直接查找

2.間接查找

1.節點 (所有內容)

2.元素 (被括號括起來的內容)

比如：

111

1

節點包括111和1，元素只有1

2.操作元素：

1.ID

1.獲得標簽內容

1.通過ID查找到標簽：t=document.getElementById("")

2.通過標簽得到間接尋找相關節點：t.childNodes、t.parentNode

3.獲得標簽的值： t.value

4.獲得標簽的文本內容：t.innertext、t.innerHTML(

如：一111二)

t.innertext ————>一111二

t.innerHTML ————> 一111二

2.修改標簽內容

t.value = "66"

2.class

1.尋找標簽,獲得標簽列表：t=document.getElementsByTagName("div")

2.切片，對目的對線進行操作：(當然，如果知道ID，就找得更快了)

t[0].classList、t[0].classList.add('c4')、t[0].classList.remove()

3.樣式

同理：也可以對標簽的其他樣式進行修改：

如t.style.color="red"，如果帶-：如background-color就變成t.style.backgroundColor

4.屬性(

)

t.getAttribute(name) 獲得屬性

t.setAttribute("name","xixi") 修改屬性

t.removeAttribute("name") 移除屬性

可以用來控制選擇框的是否選中，即控制checked

Title

序號用戶名密碼

111112222233333

var t1= document.getElementById("tb");

var t2=t1.children;for(var i=0;i

{

t3=t2[i].firstElementChild.firstElementChild;

t3.setAttribute("checked","checked");

t3.checked=true;

}

}

function CancleALL() {

var t1= document.getElementById("tb");

var t2=t1.children;for(var i=0;i

{

t3=t2[i].firstElementChild.firstElementChild;

t3.removeAttribute("checked")

t3.checked=false

}

}

function ReverseALL() {

var t1= document.getElementById("tb");

var t2=t1.children;for(var i=0;i

{

t3=t2[i].firstElementChild.firstElementChild;

var val=t3.getAttribute("checked");if ((t3.checked==true || val=="checked" )&&t3.checked!=false){t3.checked=false;t3.removeAttribute("checked")}else{t3.checked=true;t3.setAttribute("checked","checked");}

}

}

例子

PS：當在網頁上勾選單選框時，不會在標簽中增加 checkde=checked，所以不能通過獲取屬性來判斷，而是直接用

對象.checked == true or false 來改變單選框的是否選中

最后一點，因此兩個方法都能改變，所以兩種方法要同時兼顧。

當然，最好的方法就是統一使用 對象.checked 來改變

3.使用的例子：

搜索框

1.創建輸入框

2.給輸入框綁定事件

3.在script上定義事件的內容

Title

//onfocus表示鼠標的焦點在對話框 onblur鼠標的焦點移出對話框

var t=document.getElementById("i1");

var val=t.valueif (val=="請輸入內容"){t.value=""}

}

function f2() {

var t=document.getElementById("i1");

var val=t.value;//去空格，看字符長度if (val.trim().length==0){t.value="請輸入內容"}

}

View Code

彈出框

Title

margin: 0;

}

.bj{

height: 2000px;

width:100%;

background-color: #9E9EA6;

}

.hide{

display: none;!important;

}

.shade{

position: fixed;

top:0;

bottom: 0;

left: 0;

right: 0;

background-color: #5ab2ce;

z-index: 100;

}

.modal{

width: 400px;

height: 400px;

position: fixed;

background-color: white;

top:50%;

left:50%;

margin-top:-200px ;

margin-left: -200px;

z-index: 101;

}

取消

var t1= document.getElementById("shade");

var t2= document.getElementById("modal");

t1.classList.remove("hide");

t2.classList.remove("hide");

}

function f2() {

var t1= document.getElementById("shade");

var t2= document.getElementById("modal");

t1.classList.add("hide");

t2.classList.add("hide");

}

View Code

4.標簽操作

1.創建標簽

方法一：創建對象

var tag = document.createElement('a')

tag.innerText = 'haha'

tag.className = 'c1'

tag.href = "http://www.baidu.com"

方法二：創建字符串

var tag = "haha"

2.添加標簽

方法一：創建對象

xx.appendChild(tag)? ? ? ? ? ? ? ? ? ? ? ? ? ? ?默認加到最后

xx.insertBefore(tag,xx.children[1])? ? ? ? 加到任意位置

xx.insertAdjacentElement("afterBegin",document.createElement('p'))

方法二：創建字符串

xx.insertAdjacentHTML("beforeEnd",tag); 當成標簽傳進去

xx.insertAdjacentText("beforeEnd",tag);? ? 當成文本傳進去

第一個參數只能是

“beforeBegin”在標簽外面的前面添加，與標簽同級；

“afterEnd”在標簽外面的后面添加，與標簽同級；

“beforeEnd”在標簽里面的最后面添加，是標簽的子級

總結

以上是生活随笔為你收集整理的python操作dom_Python Dom 的介绍和使用day1的全部內容，希望文章能夠幫你解決所遇到的問題。

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