交易网站开发文档,郴州网站开发,哈尔滨网站建设赚钱么,广告创意与设计一、什么是节点
DOM模型是树状结构模型#xff0c;二组成这棵树的就是一个个点#xff0c;在网络术语中称之为节点。 节点是一个模型中最基本的组成单位。DOM模型是由一个个节点组成的#xff0c;DOM节点也有其不同的类型。
二、节点类型
DOM节点分为5种类型#xff1a;…
一、什么是节点
DOM模型是树状结构模型二组成这棵树的就是一个个点在网络术语中称之为节点。 节点是一个模型中最基本的组成单位。DOM模型是由一个个节点组成的DOM节点也有其不同的类型。
二、节点类型
DOM节点分为5种类型
文档节点就是整个HTML文档也就是document对象元素节点注释节点在HTML文档中写的注释属性节点文本节点
1、元素节点
我们看到的一个个标签元素在DOM节点树中就是元素节点它是我们操作节点的核心即使我们要操作属性节点和文本节点也要先找到它们的元素节点
DOM中element对象的三个属性
nodeType属性可以显示节点的类型 1表示元素节点 2表示属性节点 3表示文本节点nodeName属性可以显示节点的名字显示的名字是大写形式nodevalue属性可以显示节点的值元素节点没有值显示null 2、属性节点
// 每个标签元素都有自己的一些属性这些属性就是属性节点。
!DOCTYPE html
html
headmeta charsetUTF-8title知数SEO_专注搜索引擎优化和品牌推广/title
/head
body
h2让推广显而易见/h2
p idnode没有推广不了的产品/p
ulli知数网络/lili知数SEO/li
/ul
/body
scriptvar pObj document.getElementById(node); // 获取p元素节点var p_id pObj.getAttributeNode(id); // 获取id属性节点console.log(p_id); // 打印p的id属性 nodevar p_id_type p_id.nodeType; // p元素的节点类型console.log(p_id_type); // 打印节点类型 2var p_id_name p_id.name; // p元素节点的名字console.log(p_id_name); // idvar p_id_value p_id.value; // p元素节点的值console.log(p_id_value); // node/script
/html
// 代码中我们使用getAttributeNode()方法获取属性节点它和getAttribute()方法的区别在于后者得到的属性值而不是对象3、文本节点
// 我们写在标签中的文本内容就是文本节点在浏览器中呈现给用户的内容就是一个文本节点。
!DOCTYPE html
html
headmeta charsetUTF-8title知数SEO_专注搜索引擎优化和品牌推广/title
/head
body
h2让推广显而易见/h2
p idnode没有推广不了的产品/p
ulli知数网络/lili知数SEO/li
/ul
/body
scriptvar pObj document.getElementById(node); // 获取p元素节点var p_text pObj.firstChild;console.log(p_text);var p_text_type p_text.nodeType;console.log(p_text_type); // 3var p_text_name p_text.nodeName;console.log(p_text_name); // #textvar p_text_value p_text.nodeValue;console.log(p_text_value); // 没有推广不了的产品/script
/html4、节点类型、节点名字、节点值
4.1、节点类型
可以通过nodeObject.nodeType属性获取
节点类型节点说明元素节点每个HTML标签就是元素属性节点元素节点的属性如id class name src等文本节点元素节点或属性节点的文本内容如p标签内容是文本节点/p注释节点文档的注释文档节点整个html文档DOM树中的根html标签
4.2、节点名字
不同DOM节点有不同的名称可以通过nodeObject.nodeName属性得到节点的名称
节点类型节点名字元素节点HTML标签的名称大写如p元素节点是P属性节点属性的名称文本节点永远是text注释节点永远是#comment文档节点永远是#document
4.3、节点值
节点的值可以通过nodeObject.nodeValue属性获取
节点类型节点的值元素节点没有值属性节点属性的值就是属性节点的值文本节点文本内容就是文本节点的值注释节点注释内容就是注释节点的值文档节点没有值
三、通过文档对象方法获取节点
我们相操作某个节点第一步就是获得这个节点。
1、通过id属性获取节点
通过document读喜庆提供的 getElementById() 方法接收一个标签元素的id属性值就可以获取到对应id的标签元素
2、通过标签名字获取节点
*getElementsByTagName()*方法
!DOCTYPE html
html
headmeta charsetUTF-8title知数SEO_专注搜索引擎优化和品牌推广/title
/head
body
h2让推广显而易见/h2
p idnode没有推广不了的产品/p
ulli知数网络/lili知数SEO/li
/ul
/body
scriptvar lis document.getElementsByTagName(li); // 获取所有li标签元素console.log(lis); // 打印li元素集合console.log(lis[0]); // 打印第一个li元素/script
/html
// getElementsBytagName()不仅是document对象的方法也是element对象的方法3、通过类名获取节点
*getElementsByClassName()*方法
!DOCTYPE html
html
headmeta charsetUTF-8title知数SEO_专注搜索引擎优化和品牌推广/title
/head
body
div春雨惊春清谷天/div
div classbgcolor夏满芒夏暑相连。/div
div秋处露秋寒霜降/div
div classbgcolor冬雪雪冬小大寒。/div
/body
scriptvar bgcolors document.getElementsByClassName(bgcolor);console.log(bgcolors);console.log(bgcolors[0]);
/script
/html4、通过name属性获取节点
还可以通过表单中的name属性值来获取到指定的input标签元素 *getElementsByName()*方法接受一个name值就可以获取到对应的input标签元素,它返回一个数组这个数组存放着所有name值等于我们传到函数中的那个值
!DOCTYPE html
html
headmeta charsetUTF-8title知数SEO_专注搜索引擎优化和品牌推广/title
/head
body
form idmyForm actioninput typetext nameusernamebrinput typeradio namesex value男男brinput typeradio namesex value女女br/form
/body
scriptvar sex document.getElementsByName(sex);console.log(sex);console.log(sex[0]);
/script
/html四、通过层级关系获取节点
HTML文档在浏览器中被解析成DOM树状结构模型而且这种树状结构模型非常方便我们寻找该节点相关的一些关系我们可以通过层级关系来找到对应的节点。
1、子节点childNodes
// 一个节点可以有一个或多个子节点通过DOM提供的方法我们可以操作这个节点的所有子节点
!DOCTYPE html
html
headmeta charsetUTF-8title知数SEO_专注搜索引擎优化和品牌推广/title
/head
body
div idcontentp知数/pspan专注搜索引擎优化和品牌推广/spanp一个懂技术的seoer/pa hrefhttps://www.zhishunet.com知数SEO/a
/div
/body
script// 获取div标签元素节点对象var divobj document.getElementById(content);// 获取该div下的所有子节点var childs divobj.childNodes;// 打印获得的所有子节点console.log(childs);// 打印获得的所有子节点的个数console.log(childs.length);
/script
/html// firstChild属性可以获得第一个子节点
// lastChild属性可以获得最后一个子节点2、父节点parentNode
!DOCTYPE html
html
headmeta charsetUTF-8title知数SEO_专注搜索引擎优化和品牌推广/title
/head
body
div idcontentp知数/pspan专注搜索引擎优化和品牌推广/spanp idp_node一个懂技术的seoer/pa hrefhttps://www.zhishunet.com知数SEO/a
/div
/body
script// 获取标签元素节点对象var p_obj document.getElementById(p_node);// 获取p元素的父节点var parent p_obj.parentNode;console.log(parent);
/script
/html3、兄弟节点
// 所谓的兄弟节点就是同级节点
// nextSibling属性可以获取某个节点的下一个节点
// previousSibling属性可以获取某个节点的上一个节点
!DOCTYPE html
html
headmeta charsetUTF-8title知数SEO_专注搜索引擎优化和品牌推广/title
/head
body
div idcontentp知数/pspan专注搜索引擎优化和品牌推广/spanp idp_node一个懂技术的seoer/pa hrefhttps://www.zhishunet.com知数SEO/a
/div
/body
script// 获取标签元素节点对象var p_obj document.getElementById(p_node);// 获取p元素的下一个节点var nextNode p_obj.nextSibling;console.log(nextNode);
/script
/html五、节点的其他操作
1、添加节点
!DOCTYPE html
html
headmeta charsetUTF-8title知数SEO_专注搜索引擎优化和品牌推广/title
/head
body
div idcontent/div
/body
script// 创建一个a元素节点var a document.createElement(a);// 设置a元素节点的属性节点a.setAttribute(href,https://www.zhishunet.com);// 创建新的文本节点var text document.createTextNode(知数SEO);// 将文本节点插入到新创建的a元素节点中a.appendChild(text);// 找到要插入新节点到某个父节点下var parent document.getElementById(content);// 向这个父节点尾部插入新创建的节点parent.appendChild(a);
/script
/html// 还可以使用createTextNode()方法来创建文本节点 还可以使用textContent属性来设置元素节点的文本内容
!DOCTYPE html
html
headmeta charsetUTF-8title知数SEO_专注搜索引擎优化和品牌推广/title
/head
body
div idcontent/div
/body
script// 创建一个a元素节点var a document.createElement(a);// 设置a元素节点的属性节点a.setAttribute(href,https://www.zhishunet.com);// 设置或修改a元素节点的文本内容a.textContent 知数;// 找到要插入新节点到某个父节点下var parent document.getElementById(content);// 向这个父节点尾部插入新创建的节点parent.appendChild(a);
/script
/html// 还可以使用innerHTML属性来设置或获取元素节点的所有内容
!DOCTYPE html
html
headmeta charsetUTF-8title知数SEO_专注搜索引擎优化和品牌推广/title
/head
body
div idcontent/div
/body
script// 找到要插入的父节点var parent document.getElementById(content);// 向这个目标节点插入需要的内容parent.innerHTML a hrefhttps://www.zhishunet.com知数SEO/a;
/script
/html2、删除节点
// 删除节点和替换节点有些相似必须先找到父节点才能删除这个父节点下的某个子节点
!DOCTYPE html
html
headmeta charsetUTF-8title知数SEO_专注搜索引擎优化和品牌推广/title
/head
body
divp idp_node这个需要删除/pp宝剑锋从磨砺出/pp梅花香自苦寒来/p
/div
/body
script// 找到要删除的节点var delNode document.getElementById(p_node);// 得到要删除的节点的父节点var parent delNode.parentNode;// 通过父节点的removeChiled()方法删除目标节点parent.removeChild(delNode);
/script
/html3、修改节点
// 我们可以使用elment对象的replaceChild()方法来替换子节点
!DOCTYPE html
html
headmeta charsetUTF-8title知数SEO_专注搜索引擎优化和品牌推广/title
/head
body
div iddiv_nodep这个需要替换的/pp宝剑锋从磨砺出/pp梅花香自苦寒来/p
/div
/body
script// 创建一个a元素var a document.createElement(a);// 设置a元素的属性节点a.setAttribute(href,https://www.zhishunet.com)// 创建新的文本节点var text document.createTextNode(知数SEO)// 将文本节点插入到新创建的a元素节点中a.appendChild(text);// 找到目标父节点div元素节点var parent document.getElementById(div_node);// 找到第一个p元素节点var oldNode parent.childNodes[1];// 替换内容parent.replaceChild(a,oldNode);
/script
/html六、自封装函数库
原始的DOM操作需要很多代码才能得到我们想要的效果还有就是浏览器的兼容问题。所以我们要写很多代码来解决这些问题如果每次操作DOM都要写很多重复的代码就不符合开发的思想不要重复造轮子。
script
// 自定义DOM函数库
function MyDom(obj){this.obj obj; // 设置对象为传递过来的节点对象this.getChildList function(){}; // 获取所有子元素节点的方法this.getFirstChild function(){}; // 获取第一个子元素节点的方法this.getLastChild function(){}; // 获取最后一个子元素节点的方法this.getNextNode function(){}; // 获取下一个元素节点的方法this.getPreNode function(){}; // 获取上一个元素节点的方法this.appendChild function(){}; // 添加子节点的方法this.removeChild function(){}; // 删除元素节点的方法this.bind function(){}; // 绑定事件的方法this.html function(){}; // 获取或者设置元素节点内容的方法
}
/script// 也可以先创建一个空对象然后通过修改她的prototype属性来设置对象的属性和方法
script
// 自定义DOM函数库
function MyDom(obj){this.obj obj;
};MyDom.prototype {this.obj obj; // 设置对象为传递过来的节点对象this.getChildList function(){}; // 获取所有子元素节点的方法this.getFirstChild function(){}; // 获取第一个子元素节点的方法this.getLastChild function(){}; // 获取最后一个子元素节点的方法this.getNextNode function(){}; // 获取下一个元素节点的方法this.getPreNode function(){}; // 获取上一个元素节点的方法this.appendChild function(){}; // 添加子节点的方法this.removeChild function(){}; // 删除元素节点的方法this.bind function(){}; // 绑定事件的方法this.html function(){}; // 获取或者设置元素节点内容的方法
}
/script
