1.节点Node常见的属性
1.获取节点
parentNode父节点
previousSibling前兄弟节点
nextSibling后兄弟节点
children所有节点,包括元素文本和注释
childNodes子元素节点
firstChild第一个子节点
lastChild最后一个子节点
var bodyChildNodes = document.body.childNodes
var commentNode = bodyChildNodes[0];
var textNode = bodyChildNodes[1];
var divNode = bodyChildNodes[2];
2.节点属性
1.nodetype
注释节点类型为8
文本节点类型为3
元素节点类型为1
Node.ELEMENT_NODE | 1 | 一个元素节点例如<p>,<div> |
Node.TEXT_NODE | 3 | Element或者Attr中的文字 |
Node.COMMENT_NODE | 8 | 一个Comment节点 |
Node.DOCUMENT_NODE | 9 | 一个Document节点 |
Node.DOCUMENT_TYPE_NODE | 10 | 描述文档类型的DocumentType节点 例如<!DOCTYPEhtml> |
2.nodeName(节点名称),tagName(元素名称)
1.nodename
8----#comment
3----#text
1----元素标签名(DIV,P........)
2.tagName
针对元素,获取元素标签名称。
3.data/innerHTML/textContent
1.data针对非元素的节点获取数据
2.innerHTML将标签内容都获取
例如:<h2>我是标题</h2>
<p>dawdw</p>
1.div.innerHTML ="dawd";
将div内部所有替换为dawd
2.div.innerHTML ="<h2>dawd</h2>";
添加h2标签并将dawd添加到标签中
3.textContent只获取文本
1.div.textContend = "<div>dwada</div>"
所有内容都只会被转化为文本不会转化为元素
4.outerHTML
div.outertHTML
获取本身和内部元素和内容
2.节点的其他属性
1.hidden属性(全局属性,默认false)
3.元素的属性和特性
1.元素中的属性attribute
1.1attribute分类
1.标准属性
<div id="abc" class="box" titile="sss"></div>
其中id,class,title为标准属性
2.非标准属性
<div abc="id" box="class" sss="title"></div>
其中abc,box,sss为非标准属性
1.2attribute操作
对所有的attribute访问都支持这些方法
var elem =doucument.querySelector();
1.elem.hasAttribute(name)检查特性是否存在
2.elem.getAttribute(name)获取这个特性值
3.elem.setAttribute(name)设置这个特性值
4.elem.removeAttribute(name)移除这个特性
5.attributes:attr对象的集合,具有name,value属性
elem.setAttribute用法
1.elem.setAttribute("id","cba")将属性id更改为cba(<div id="cba">)
attributes:的用法
var boxes = elem.attributes
for(var i of boes)
{
console.log(i.name,i.value)
}
attribute操作 缺点特征:
1.对大小写不敏感
2.它们的值总是字符串类型
2.对象中的属性property
由此可见property只能拿到标准属性
而非标准属性只能通过 attribute
property优点
1.可以获取到属性值和类型
4.元素Element-class的用法
1.className
var elem = document.querySelector(".box");
elem.className="abc"
用className赋值时会覆盖之前的class
2.classList
1.elem.classList.add(class):添加一个类
2.elem.classList.remove(class):添加/移除类
3.elem.classList.toggle(class)如果不存在就添加类,存在则移除这个类
4.elem.classList.contains(class)检查给定类,返回ture/false
添加class
// 方法一
var elem = document.querySelector(".box");
elem.className="abc";
// 方法二
elem.classList.add("abc");
elem.classList.add("active");
5.Element-style的用法
<div class="box" style="background-color: aqua;"></div>
console.log(elem.style.backgroundColor);
1.如果想获取style样式值需要将将属性写为小驼峰模式
2.如果一个属性值为空,则使用默认值
1.读取非内联style
<style>
.box{
font-size: 20px;
}
</style>
<body>
<div class="box" style="background-color: aqua;"></div>
</body>
<script>
var elem = document.querySelector(".box");
console.log(elem.style.backgroundColor);
console.log(elem.style.fontSize);
</script>
</html>
使用property方式读取不到style值
需要使用全局方法
console.log(getComputedStyle(elem).fontSize)
6.Dateset使用方法
<body>
<div class="box" data-age="18" data-height="180"></div>
</body>
<script>
var elem = document.querySelector(".box");
console.log(elem.dataset)
</script>
</html>
读取自定义属性