在 html dom （文件物件模型）中，每個部分都是節點。 節點是dom結構中最基本的組成單元，每乙個html標籤都是dom結構的節點。 文件是乙個 文件節點 。 所有的html元素都是 元素節點 所有 html 屬性都是 屬性節點 文字插入到 html 元素是 文字節點 注釋是 注釋節點。 最基本的節點型別是node型別，其他所有型別都繼承自node，dom操作往往是js中開銷最大的部分，因而nodelist導致的問題最多。要注意：nodelist是『動態的』，也就是說，每次訪問nodelist物件，都會執行一次查詢，雖然這樣增加了開銷，但可以保證我們新新增的節點都能在nodelist中訪問的到。 所有的元素節點都有共用的屬性和方法，讓我們來詳細看一看：1. element.id 設定或返回元素的 id。 2. element.innerhtml 設定或者返回元素的內容，可包含節點中的子標籤以及內容 3. element.innertext 設定或者返回元素的內容，不包含節點中的子標籤以及內容 4. element.classname 設定或者 返回元素的類名 5. element.nodename 返回該節點的大寫字母標籤名 6. element.nodetype 返回該結點的節點型別，1表示元素節點 2表示屬性節點…… 7. element.nodevalue 返回該節點的value值，元素節點的該值為null 8. element.childnodes 返回元素的子節點的nodeslist物件，nodelist類似於陣列，有length屬性，可以使用方括號 [index] 訪問指定索引的值(也可 以使用item(index)方法)。但nodelist並不是陣列。 9. element.firstchild/element.lastchild 返回元素的第乙個/最後乙個子節點(包含注釋節點和文字節點) 10. element.parentnode 返回該結點的父節點 11. element.previoussibling 返回與當前節點同級的上乙個節點(包含注釋節點和文字節點) 12. element.nextsibling 返回與當前節點同級的下乙個節點(包含注釋節點和文字節點) 13. element.chileelementcount : 返回子元素(不包括文字節點以及注釋節點)的個數 14. element.firstelementchild /lastelementchild 返回第乙個/最後乙個子元素(不包括文字節點以及注釋節點) 15. element.previouselementsibling/nextelementsibling 返回前乙個/後乙個兄弟元素(不包括文字節點以及注釋節點) 16. element.clientheight/clientwidth 返回內容的可視高度/寬度（不包括邊框，邊距或滾動條） 17. element.offsetheight/offsetwidth /offsetleft/offsettop 返回元素的高度/寬度/相對于父元素的左偏移/右偏移(包括邊框和填充,不包括邊距) 18. element.scrollheight/scrollwidth/scrollleft/scrolltop返回整個元素的高度（包括帶滾動條的隱蔽的地方）/寬度/返回當前檢視中的實際元素的左邊緣和左邊緣之間的距離/上邊緣的距離 19. element.style 設定或返回元素的樣式屬性,。示例：element.style.backgroundcolor 注意，與css不同，style的屬性要去掉橫槓，第二個單詞 首字母要大寫 20. element.tagname 返回元素的標籤名(大寫) 瀏覽器顯示結果：
還有某些專屬屬性專屬屬性指那些專屬於某種標籤的屬性。比如 標籤，有href和target屬性。 有src屬性;有entype以及action屬a_element.href 返回當前節點指向的超連結
var a=document.getelementbyid('first_form');
複製**
var a=document.getelementbyid('first_form');console.log(a.getattribute('name')) //控制台輸出name的值
複製**
var a=document.getelementbyid('first_form');
console.log(a.getattributenode('name')) //控制台輸出name屬性節點
複製**
var a=document.getelementbyid('first_form');
console.log(a.getelementsbytagname('input')) //控制台輸出
複製**
var a=document.getelementbyid('first_form');
console.log(a.hasattribute('name')) //控制台輸出
複製**
var a=document.getelementbyid('first_form');
var inputlist=document.getelementsbytagname('input');
var newnode=document.createelement('input');
var newnode2=document.createtextnode('天馬流星拳');
var br=document.createelement('br');
newnode.type='radio';
newnode.name='gongfa';
newnode.value='tmlxq';
a.insertbefore(newnode,inputlist[2]);
a.insertbefore(newnode2,inputlist[3]);
a.insertbefore(br,inputlist[3]);
複製**
var a=document.getelementbyid('first_form');
a.removeattribute('name');
console.log(a.hasattribute('name'))
複製**
var a=document.getelementbyid('first_form');
a.removechild(a.childnodes[3]);
複製**
10. element.setattribute(attrname,attrvalue) 把指定屬性設定或更改為指定值。 js示例**：
var a=document.getelementbyid('first_form');
a.setattribute('name','shaolinsi');
console.log(a.name)
複製**
var a=document.getelementbyid('first_form');
var attr = document.createattribute('id');
attr.value='the_first';
a.setattributenode(attr);
console.log(a.id)
複製**
var a=document.getelementsbytagname('input');
console.log(a.item(2))
複製**
JS節點屬性
屬性 attributes 儲存節點的屬性列表 唯讀 childnodes 儲存節點的子節點列表 唯讀 datatype 返回此節點的資料型別 definition 以dtd或xml模式給出的節點的定義 唯讀 doctype 指定文件型別節點 唯讀 documentelement 返回文件的根元素 ...
js 常用的節點和屬性
childnodes 獲取所有的子節點 children 獲取所有的元素子節點 parentnode 獲取父親節點 previoussibling 獲取上乙個哥哥節點 nextsibling 獲取下乙個弟弟節點 firstchild 獲取所有的子節點中的第乙個 lastchild 獲取所有子節點中的...
DOM節點基本方法和屬性
1 dom document object model 是由w3c規範 已接觸標準組織 ecma w3c 已經到dom4了 dom.0是出現規範之前的方法 兩大陣營 支援 dom瀏覽器 chrome opera firefox safari 2 節點 node 1 tree 常用節點型別 元素節點 ...