DOM的相关操作
什么是DOM
DOM (document object model) 文档对象模型，是W3C 组织推荐的处理可扩展标准语言的标准编程接口。 是HTML和XML文档的编程接口。DOM是独于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
认识 DOM
DOM可以将任何HTML描绘成一个由多层节点构成的结构。节点分为12种不同类型.每个节点都拥有各自的特点、数据和方法，也与其他节点存在某种关系。节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。 (节点类型一共有12种)
HTML文档可以说由节点构成的集合，DOM节点:（常用的3种）
- 元素节点(Element)：上图中<html>、<body>、<p>等都是元素节点，即标签。
- 文本节点(text): 向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
- 属性节点(Attr): 元素属性，如 <a> 标签的链接属性href="http://www.baidu.com"。
DOM 操作
节点至少包括nodeType、nodeName、nodeValue 三种基本属性
-
nodeType 返回节点类型的常数值
元素节点 Node.ELEMENT_NODE(1) 属性节点 Node.ATTRIBUTE_NODE(2) 文本节点 Node.TEXT_NODE(3) CDATA节点 Node.CDATA_SECTION_NODE(4) 实体引用名称节点 Node.ENTRY_REFERENCE_NODE(5) 实体名称节点 Node.ENTITY_NODE(6) 处理指令节点 Node.PROCESSING_INSTRUCTION_NODE(7) 注释节点 Node.COMMENT_NODE(8) 文档节点 Node.DOCUMENT_NODE(9) 文档类型节点 Node.DOCUMENT_TYPE_NODE(10) 文档片段节点 Node.DOCUMENT_FRAGMENT_NODE(11) DTD声明节点 Node.NOTATION_NODE(12) console.log(Node.ELEMENT_NODE) // 1 - nodeName 返回该节点的大写字母标签名
-
nodeValue 返回和设置当前节点的值
let span = document.getElementById("span") console.log(span.nodeName) console.log(span.nodeType) console.log(span.nodeValue)
获取DOM节点
-
原生js获取
- document.getElementById("id") // 通过id获取单个标签
- document.getElementsByClassName("classname") // 返回带有指定类名的NodeList。
- document.getElementsByName("name") // 返回带有指定名称的NodeList。
- document.getElementsByTagName("tagname") // 通过 标签名 获得 NodeList。
- document.getElementsByTagNameNS("d",title) // 返回带有指定名称和命名空间的所有元素的 NodeList。xml
- jquery 获取
var $p_dom=$("p"); // 获取p节点
$p_dom.attr("title"); // 输出p节点的title属性
var $li_2=$("ul li:eq(1)"); // 获取第2个li节点
$li_2.attr("title"); // 第2个li节点的title属性
$li_2.html(); // 第2个li节点的文本内容
创建DOM节点/属性
- 原生创建
var div = document.createElement('div') // 创建一个节点
var id = document.createAttribute('id') // 创建一个指定名称的属性
id.value = "hui"
document.getElementById("box").setAttributeNode(id)
text = document.createTextNode("text"); //创建文本节点
div.appendChild(text)
document.body.appendChild(div)
- jquery 创建
$li1=$("<li></li>") // 创建元素节点
$li1=$("<li>text</li>") // 创建文本节点
$li3=$("<li title='榴莲'>榴莲</li>"); // 创建属性节点
$("ul").append($li3); // 新建节点添加到DOM树中 。append 添加dom节点
添加节点
-
原生添加
- jQuery.insertBefore(要插入的节点，指定节点)
- jQuery.appendChild(要添加的节点) 追加
div.insertBefore(span,p) // 将span插入到div中的p前面 div.appendChild(span) // span添加到div的最后面 -
jquery 添加
- before() 和 insertBefore
- after() 和 insertAfter()
- prepend()、prependTo()
- append()、appendTo()
组内的区别 ： 返回的jquery对象不同。
var li = $("<li>被添加的元素</li>") $("#box").before(li) li.insertBefore($("#box")) $("#box").after(li) li.insertAfter($("#box")) $("#box").append(li) li.appendTo($("#box")) let b = $("#box").prepend(li) // 返回的是$("#box")对象，其他组一样 let c =li.prependTo($("#box")) // 返回的是li对象 ，其他组一样其他组一样 b.css("background","red") c.css("background","red")
删除节点
-
原生删除
- removeChild() // box.removeChild(p) box中删除p元素
-
jquery删除
- remove()
- empty()
$span = $("span").remove("span[id='span']") // 返回值为所有的span元素 $("#box").empty() // 清空所有的内容
节点的修改操作
-
原生
- cloneNode() 参数true 表示复制元素时也复制元素行为
- node.replaceChild(newnode,oldnode)
-
jQuery 操作
- 复制元素 clone() // 参数true 表示复制元素时也复制元素行为
- 包裹节点
- wrap()
- wrapAll()
- wrapInner()
$("p").wrap("<div></div>") // 每个p标签外面都被一个div元素包裹， $("p").wrapAll("<div></div>") // 所有的p标签都被包裹到一个div元素中 $("p").wrapInner("<div></div>") // 每个p标签包裹一个div元素，p元素中的内容放在div中。 和wrap相反 -
替换节点
- repalcewith()
- repalceAll()
// div代替所有的p标签，写法不同 $("p").replaceWith($("<div>new</div>")) $("<div>new</div>").replaceAll("p")
查找节点(父节点，子节点，兄弟节点 等等)
-
原生
-
childNodes
childNodes 返回的是子节点的集合，是一个数组的格式。他会把换行和空格也当成是节点信息。 - children
-
firstChild
- firstChild 浏览器解析的时候会把他当换行和空格一起解析，其实你获取的是第一个子节点，只是这个子节点是一个换行或者是一个空格而已
- firstElementChild
- lastChild 和firstChild有一样的问题
- lastElementChild
- parentNode (w3c的标准) parentElement (ie的标准)
- offsetParent 获取所有的父节点
-
previousSibling，previousElementSibling 获取上一个兄弟节点
previousSibling 会匹配字符，包括换行和空格，而不是节点。previousElementSibling则直接匹配节点。 - nextSibling，nextElementSibling 获取下一个兄弟节点 不同点和上面类似
-
childNodes
-
jquery 查找
jQuery.parent(selector) 获取父节点
jQuery.parents(selector) 获取祖先元素
jQuery.children(expr) 查找所有子元素，只会找到直接的孩子节点，不会返回所有子孙
jQuery.contents() 查找下面的所有内容，包括节点和文本。
jQuery.prevAll() 查找所有之前的兄弟节点
jQuery.next() 查找下一个兄弟节点，不是所有的兄弟节点
jQuery.prev() 查找上一个兄弟节点，不是所有的兄弟节点
jQuery.nextAll() 查找所有之后的兄弟节点
jQuery.siblings() 查找兄弟节点，不分前后
-
jQuery.find(expr)
$("p").find("span")等于$("p span") 跟jQuery.filter(expr)完全不一样，jQuery.filter(expr)是从初始的 jquery.filter() 将匹配元素集合缩减为匹配指定选择器的元素 // $("span").filter(":even") 或:odd
其他操作 属性及样式，文本操作
-
原生
-
元素的其他操作
- element.id 设置或返回元素的 id。
- element.className 设置或者 返回元素的类名
- element.tagName 返回元素的标签名(大写)
- element.style 设置或返回元素的样式属性,
- element.clientHeight/clientWidth 返回内容的可视高度/宽度（不包括边框，边距或滚动条）
- element.offsetHeight/offsetWidth /offsetLeft/offsetTop 返回元素的高度/宽度/相对于父元素的左偏移/右偏移(包括边框和填充,不包括边距)
- element.scrollHeight/scrollWidth/scrollLeft/scrollTop 返回整个元素的高度（包括带滚动条的隐蔽的地方）/宽度/返回当前视图中的实际元素的左边缘和左边缘之间的距离/上边缘的距离
-
文本操作
- element.innerHTML 设置或者返回元素的内容，可包含节点中的子标签以及内容
- **element.innerText ** 设置或者返回元素的内容，不包含节点中的子标签以及内容
- element.value
- 属性操作
element.createAttribute() 创建属性
element.setAttributeNode() 修改指定属性节点
element.setAttribute(attrName,attrValue) 把指定属性设置或更改为指定值
element.getAttribute(para) 返回元素节点的指定属性值
element.getAttributeNode(para) 返回指定的属性节点
element.attributes 返回所有的属性
node.hasAttributes()
element.hasAttribute(para) 如果元素拥有指定属性，则返回true，否则返回 false。
element.removeAttribute() 从元素中移除指定属性。
element.removeAttributeNode(attributenode) 方法用来删除指定的属性
-
元素的其他操作
-
jQuery
-
属性操作
- jQuery.attr("title") 获取title属性 attr("title","aaa") 设置属性
- jQuery.removeAttr("title") 删除属性
- 样式操作
- jQuery.addClass() 添加类名
- jQuery.removeClass() 移除类名
- jQuery.hasClass() 判断是否存在某个类名
-
文本操作
- jQuery.html() 获取所有的内容，包括文本和子标签
- jQuery.text() 只获取元素的纯文本内容
- jQuery.val() 设置和获取元素的值
-
属性操作
