节点的分类
1.元素节点(重点) --
2.注释节点 -- 3.文本节点 -- 文本部分 4.文档节点 -- document 5.声明节点 -- DOCTYPE 获取标签元素对象方式 1.nodeName.getElementById(name) 获取nodeName节点下的id名为name的元素, 节点对象(只有一个)
2.nodeName.getElementsByClassName(name) 获取nodeName节点下的类名为name的所有元素 节点对象(返回值是数组,一个或多个元素节点对象)
3.nodeName.getElementsByTagName(name) 获取nodeName节点下的标签名为name的所有 元素节点对象(返回值是数组,一个或多个 元素节点对象)
4.nodeName.querySelector(name) 获取nodeName节点下的(标签名或者类名或者id名) 第一个元素节点(只有一个) 5.nodeName.querySelectorAll(name) 获取nodeName节点下的符合name (标签名或者类名或者id名)要求的所有 元素节点(返回值是数组,一个或多个 元素节点对象) 特殊标签 -
- 文档节点
document 声明节点
doctype body 节点
body head 节点
head title 节点
title 节点之间的关系
1.父节点
2.子节点
3.兄弟节点 获取节点 以 ul 为例 id 名为 ul1 - - 获取子节点 ul1.childNodes 获取父节点
ul1.parentNode 获取第一个子节点
firstChild 获取最后一个节点
ul1.lastChild 下一个相邻兄弟节点
ul.1nextSibling 上一个相邻兄弟节点
ul1.previousSibling 获取第一个子元素节点
ul1.firstElementChild 获取所有的子元素节点
ul1.children 获取最后一个子元素节点
ul1.lastElementChild 获取上一个相邻兄弟元素节点 ul1.previousElementSibling 获取下一个相邻兄弟元素节点 ul1.nextElementSibling 节点的属性 节点值: nodeValue. console.log(###,nodeValue) 若###为文本节点或者注释节点,则打印内容; 若###为元素节点,则输出null;
节点类型
元素节点 ------ 1 文本节点 ------ 3 注释节点 ------ 8 文档节点 ------ 9 声明节点 ------ 10 节点名称 nodeName 1.文本节点 ---- #text 2.注释节点 ----- #comment 3.元素节点 ----- 输出该标签名的大写 往元素节点中添加内容(获取该元素节点的内容)
1.innerHTML 获取该元素节点里的所有内容(开始标签到结束标签之间的内 容), 包括文本节点,注释节点,元素节点
2.innerText 获取该元素节点里的所有文本节点 console.log(contentDiv.innerHTML); 设置节点的属性 - - 删除属性 removeAttribute('value') 创建节点
createElement('div') 插入节点
appendChild(div3) 将元素节点a插入到元素节点b之间
insertBefore(a,b) 将a和b节点进行替换
replaceChild(a,b) 删除标签 removeChild(a);
总结出来的。
热门评论
排版有点乱........................................................