普通网站可以做商城,石家庄全网seo,个人免费网站制作,企业网站建设软件需求分析讲评
节点属性 nodeType 元素节点 1 大写 属性节点 2 文本节点 3 #text 注释节点 8 #comment document 9 DocumentFragment 11 nodeName是只读属性元素节点的nodeName是大写的其余的是#小写的元素节点没有nodeValue属性#xff0c;null#xff0c;是可写的其余有#xff08…讲评
节点属性 nodeType 元素节点 1 大写 属性节点 2 文本节点 3 #text 注释节点 8 #comment document 9 DocumentFragment 11 nodeName是只读属性元素节点的nodeName是大写的其余的是#小写的元素节点没有nodeValue属性null是可写的其余有属性、注释、文本…getAttributeNode获取属性节点属性节点有nodeValue、value属性nodeType只读
封装方法遍历子元素 常规 类数组
获取属性
nodeValue是可写的
bodydiv classtemp iddiv_id/divscriptvar div document.getElementsByTagName(div)[0]console.log(div.getAttributeNode(id).nodeValue) // 以下方法都可以console.log(div.getAttributeNode(id).value)console.log(div.getAttributeNode(id)) // 了解console.log(div.attributes) // 了解console.log(div.getAttribute(id) )/scripthasChildNodes
有换行就有文本节点
Document构造函数 Document.prototype上有响应获取元素的方法
但是document并不是直接继承于Document.prototypedocument HTMLDocument Document
document.__proto__ HTMLDocument.prototype
HTMLDocument.prototype.__proto__ Document.prototypeDOM结构 1.Document
dom是操作html和xml的不能操作cssDocument还有一个分支是XMLDocument
2. CharacterData
Text.prototype.__proto__ CharacterData.prototype // trueComment.prototype.__proto__ CharacterData.prototype // true
3. Element
有HTMLElement和XMLElement分支
4. Node var div document.getElementsByTagName(div)[0]
console.log(Object.prototype.toString.call(div)) // [object HTMLDivElement]DOM操作深入
Document.prototypeElement.prototype独享getELementById–独享getElementsByName–共享getElementsByTagName、getElementsByClassName、querySelector、querySelectorAll有
通配符* - getElementsByTagName 获取元素
用getElementsByTagName更好的方法是利用HTMLDocument的原型上的body、head属性直接用document.body通过原型链来访问 特document.title获取的是title标签内的文本而不是获取title元素若要选择标签则使用getElementsByTagNameDocument.prototype的documentElement可以访问到html
用document实例访问不能直接用**原型访问否则报错
原型属性HTMLDocument.prototypebody、headDocument.prototypedocumentElementhtml
练习
在原型上编程 遍历任意一个父元素 找到他的子元素节点 有数字参数 返回某一个对应子元素 没有则返回子元素集合
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodymaindivulli1/lili2/lili3/li/ulspan/span/div!-- 注释 --span/spana href/ap/p/mainscriptElement.prototype.myFindChildren function (pTagName) {var pNode document.getElementsByTagName(pTagName)[0]var idx arguments[1]if (idx) {return findChildren(pNode)[idx]} else {return findChildren(pNode)}}function findChildren(pNode) {var arr pNode.childNodes,arrLen pNode.childNodes.length,children []for (var i 0; i arrLen; i) {var item arr[i]if (item.nodeType 1) {children.push(item)}}return children}console.log(document.body.myFindChildren(main))console.log(document.body.myFindChildren(div, 1))/script
/body/html在原型上编程 找出一个元素的第n层父级元素
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodymaindivulli1/lili2/lili3/li/ulspan/span/div!-- 注释 --span/spana href/ap/p/mainscriptElement.prototype.myFindPNode function (pTagName) {var cNode document.getElementsByTagName(pTagName)[0]var num arguments[1] || 1for (var i num; i 0; i--) {cNode cNode.parentNode}return cNode}console.log(document.body.myFindPNode(li))console.log(document.body.myFindPNode(li, 4))/script
/body/html
