关于语义化的js的总结，DOM、element、text等节点的操作

/*
 * 在学习本章之前我们必须要明白node节点，其中包括document节点，characterData节点，element节点，attr节点等，接下来依次解释
 * document节点也就是一个window，一个document，
 * element节点：指示的是elements为其子节点
 * 文本节点：内容为纯文本的节点
 * attr节点：指示的是属性，并不常用
 * 
 */


//一、选择
document.getElementById("seletion");
document.getElementsByName("");
/*name的属性只有在少数的HTML元素中才是有效的，包括表单，表单元素<iframe>img元素，在IE低版本中，上述这两种方法混淆，所以尽量不要id个name相同；
 * 如果name的属性树唯一的，那么自动创建文本属性，也就是说是document属性对应的就是该元素，如果是多个，对应的属性就是element的nodelist；如下：
 * 针对于<form name="aa">
 */
document.aa;//也就是代表的该元素，当然，name数值必须是document中没有的元素
/*
 *如果下面的方法 传递的是一个*，将会放回所有的js 
 */
var ele = document.getElementsByTagName("span")[0];
//element类中也定义了上述的方法，不同的是，查找的是元素的后代节点
eles = ele.getElementByTagName("");
/*
 * 为了方便documentHtml对象创建了一些快捷属性来访问各种各样的节点，例如images,forms和links等属性指向行为类似读取数组的img form a（代表有href的a）元素的集合
 * 也就是说上面的那个aa的form可以表示为 document.forms.aa;
 * 另外还有embeds属性、plugins属性、body属性和head属性以及documentElement属性（代指html标签元素）
 * 这种便捷的索引跟我们获取有什么不同呢？
 * 首先返回的数值是不同的，前者返回的是htmlCollection对象，后者返回的是nodelist对象，他们都是只读的数组，并且这两个对象并不是静态的，而是实时的；
 */
document.getElementsByClassName("a b c")//通过css的类来选取元素，calssname可以用多个以空格隔开的classname作为筛选条件
/*
 * 现在web浏览器依赖于开头处的<!DOCTYPE>来声明的严格程度来选择怪异模式或者是标准模式方式来显示HTML文档。其中的一个怪异行为就是类标识符不区分大小写
 */
document.querySelectorAll(span [name="11"]);//这个方法可以通过css选择器来选取元素.XX表示的是类，XX表示标签 #XX表示的是ID，[XX= “”]属性选择器，+子节点选择器等
document.querySelector()//与上面的方法是类似的，返回是的是第一匹配到的元素，如果没有返回null，注意对于伪类和伪元素不会进行反应；jq将其封装为$()(上面的那个)；
/*
 * JQ的css宣其气匹配到吗已经作为一个独立的标准库提出来，并且发布，命名为了Sizzle，好处就是在所有的浏览器中都是可以使用的
 */
document.all["p"];//表示文档中的所有元素，除了text节点，现在已经废弃，被标准的方法取代；
//二、文档结构的遍历查询
/*
 * documentduixiang 、他的element对象和问的那个中的文本的text对象都是node对象；node对象有以下的属性
 */
document.parentNode;//该节点的父节点
document.childNodes;//只读的类数组nodelist对象，他的该节点的子节点的实时表示’
document.firstChild;
document.lastChild;
document.nextSibling;
document.previousSibling;
document.nodeType;//9表示的是document节点，1表示element节点，3表示text节点，8表示comment节点，11表示documentFragment节点
document.nodeName;//元素的标签名称
document.nodeType;//text节点或者comment节点的文本内容
/*
 * 2、元素树的文档可以吧文档看成是element对象树，忽略部分文档：text和comment节点
 */
var ele = document.getElementById("11");
ele.children;//返回的是一个nodelist对象，但是不用的是其中重视包含element对象，text和comment对象没有这个属性
/*
 * 三、属性获取
 */
var img = document.images[0];
img.getAttribute("width");//属性名字不区分大小写
img.setAttribute("class","xiao");
img.hasAttribute("class");
img.removeAttribute("class");
/*
 * 一下是XML文档中的操作,需要两个属性名字字符串作为参数而不是一个，第一个是命名空间的URI，第二个是本地名字；
 */
img.getAttributeNS();
img.setAttributeNS();
img.hasAttributeNS();
img.removeAttributeNS();


/*
 * 虽然有方法可以获取到非标准的属性数值，但是文档也不再是合法有效的html文档了，html5提出了解决方案，也就是说用data-开头的属性都是合法的，
 * 因此，element有一个dataset属性，用来保存以data开头的属性数值，也就是说用data-x的属性数值可以用dataset.x来获取。带连字符的属性用驼峰表示法
 * 也就是说data-jq-test用dataset.jqTest
 */
document.attributes;//node类型定期的Attributes属性，对于非element节点数值为null。对于element对象，Attribute是属性是只读的类数组对象，代表元素的
//所有的属性，该对象是实时的，可以索引枚举，
/*
 * 元素的内容
 */
ele.innerHTML;//document和element都有；返回标签内的内容
ele.outerHTML;//element有；返回的是所有的内容,包括查询元素的标签
//insertAdjacentHtml();将任意字符插入到指定字符相邻的位置，标记是第二个参数，第一参数表示位置，有beforebegin、afterbegin、beforeend/afterend,
ele.insertAdjacentHTML("beforebegin","1111");


ele.textContent = "111";//需要查询纯文本形式的元素内容，或者在文档中查询纯文本元素；也可以用于指定，可以用于获取
ele.innerText = "11 11";//这两个函数的区别在于对于空元素的处理，textContent是将后代text节点简单的连接起来，后者没有明确的行为，但是忽略空格，保留table格式，不返回Script标签的内容
//另外后者对于表格某些元素是只读的属性 table tbody tr等
/*
 * 下面讲解一下<script>标签，对于内联的，也就是说咩有src属性的标签，有一个text属性可以获取他的内容，浏览器不显示其中的内容，并且忽略尖括号和型号，所以它可以很好的
 * 嵌入到html文档中，如果设置成为“text/x-custom-data”，就是表明了脚本为不可以执行的javascript代码，如果这样做了js解析器忽略该脚本，但是元素还是存在于dom树中
 * 使用text属性依然可以返回文本。
 */
ele.nodeValue;//改变text节点内容，还可以使用node节点


/*
 * 四、创建节点，创建一个新的element节点可以使用document对象的
 */
document.createElement();//通过标签创建，还有xml的createElementNC方法
document.createTextNode("11111");//创建text节点
ele.cloneNode(true);//克隆ele节点，如果参数为true为深拷贝，false为浅拷贝；还有一个类似的方法如下：
document.importNode(ele,true);//返回一个适合文档插入的节点的副本，第二个参数是拷贝类型个


//插入节点


ele.appendChild(img);//将新节点插入到ele子节点的最后面
ele.insertBefore(img,ele.childNodes[1]);//将新节点插入到父节点的子节点的之前，如果为null，那么会插入到父节点的最后一个子节点


//删除和替换节点
ele.parentNode.removeChild(ele);//也就是说只能怪是在父节点调用删除子节点
ele.parentNode.replaceChild("[111]",ele);


//关于documentFragement,和document操作是一样的，但是唯一一个区别就是该文档的片段插入到文档中，将自动传递其所有的子节点