day16 Dom選擇器以及內容文字操作

1、dom：文件物件模型

查詢：直接查詢：var obj=document.getelementbyid('i1')

間接查詢：innertext，獲取當前的文字，僅僅獲取文字

innerhtml，獲取全部內容

value：

input，value獲取當前標籤的值

select，獲取選中的value值；selectindex

textarea，value獲取當前標籤中的值

（1）id="i1"

"

i1        
谷歌    

a）obj=document.getelementbyid('i1');

"d）obj.innerhtml='wu'; （可以賦值）

"wu"

e）obj.innertext='wu';

"wu"

在控制台執行，將obj.innertext賦值，在頁面出現的是乙個文字，如下：

​b）obj.value    //輸入框最開始是空的

""c）obj.value    //當在輸入框中輸入python時，可以獲取到

"python"

d）obj.value="asdfg"     //當給輸入框的內容賦值asdfg，這時發現輸入框的內容已經變成了該值

"asdfg"

（3）id="i3"

i3">

"11">北京1"12
">北京2"13
">北京3
select>

​​北京1​​​北京2​​​北京3​​​

b）obj.value

"11"

c）obj.value="12"      //當修改value為12時，選擇框中選擇為 北京2

"12"

d）obj.selectedindex  //可以理解為這是下拉框中的序號，從0開始排

1e）obj.selectedindex='2' //當該值修改為2時，顯示的是下拉框的第3個值

"2"（4）id="i4"

a）obj=document.getelementbyid('i4');

​b）obj.value     //當前輸入框中為空，輸出為空

""c）obj.value="12"   //給當前輸入框中賦值12，這時輸入框中顯示12

"12"

2、下面有乙個搜尋框的示例

（1）先簡單來說，有乙個輸入框，當游標移動到輸入框中時，控制台輸出1；當游標移動到輸入框外時，控制台輸出2

"

width:600px;margin:0 auto
">
"i1" onfocus="
focus();
" onblur="
blur();
" type="
text
" value="
請輸入關鍵字
"/>

"

width:600px;margin:0 auto
">
"i1" onfocus="
focus();
" onblur="
blur();
" type="
text
" value="
請輸入關鍵字
"/>
"text
" placeholder="
請輸入關鍵字
"/>   //另一種表達方式，不需要script便可以呈現一樣的效果，但是對瀏覽器有要求

Web前端認識day 16（DOM）

8 dom 8.1 dom概念 dom document object model 文件物件模型 通過開發者工具可以看到 整個文件是由一系列的節點物件組成的一棵樹 節點 node 包括元素節點 1 屬性節點 2 和文字節點 3 th1代表乙個元素節點 nodetype 1 nodename是標籤名 ...

jquery選擇器和dom選擇器區別

1.jquery選擇器css file loading css visibility visible 2.dom選擇器stylrdocument.getelementbuyid file loading style.visibility visible 因為jquery沒有.css屬性 3.jque...

jQuery選擇器 內容過濾選擇器

前一章介紹了基本過濾選擇器，今天我們學習一下jquery的內容過濾選擇器。選擇器 contains text 描述 匹配包含給定文字的元素 返回值 元素集合 示例 div.mini contains div 是dom元素集合，contains div 是過濾條件選擇器 has selector 描述...