js中关于DOM
1.获取元素
只有id和querySelector返回的是元素，其他的返回都是数组
//通过id获取，返回的是元素 var box=document.getElementById('box') console.log(box); //通过Class属性名来获取，返回一个伪数组（HTMLCollection) var content=document.getElementsByClassName('content') console.log(content); console.log(content[0]);//访问第一个获取的元素 //通过标签名 返回伪数组 var div=document.getElementsByTagName('div') console.log(div); //通过name属性来获取元素，返回伪数组（NodeList) var nav=document.getElementsByName() console.log('nav'); //通过对应的选择器进行获取，返回伪数组（NodeList) var d=document.querySelectorAll('div')//传入的选择器为div //通过选择器获取元素，返回查找到的元素 var first=document.querySelector('div')//获取第一个元素 //创建全局内容 //返回一个元素 创建元素 var p=document.createElement('p')//传入的是一个对应的标签名 console.log(p); //返回一个属性对象 创建属性节点 var sttr=document.createAttribute('password')//默认属性值为空 //给属性对象赋值 attr.value='12345' console.log(attr); //返回文本节点对象 创建文本节点 var text=document.createTextNode('显示内容') console.log(text); //后面带NS表示的是命名空间，内声明或获取
2.Element属性
var div=document.getElementsByTagName('div')[0]//得到的是一个数组，所以值要用数组发方法取出 console.log(div); //获取父元素 console.log(div.parentElemnet);//body //获取子元素 console.log(div.childElementCount);//子元素个数 console.log(div.children);//获取子元素 （伪数组） //获取兄弟元素结点 //前一个兄弟 console.log(div.previousElementSibling); //后一个兄弟元素结点 console.log(div.nextElementSibling);
3.Element的替换
//用一个新的元素替换里面的元素 div.replaceChildren("您好")//替换所有的子节点，用传入的结点替换里面所有的子节，div里面的内容变成传入的内容 var content=document.createElement('div')//创建了一个div // 用一个新的元素替换里面所有的元素 div.replaceChildren(content)//替换所有子节点 div里面的内容都被替换成了content //replaceChild 用前面的替换后面的（一定属于本身的儿子元素） var a=document.createElement('a')//创建一个a标签 //使用新结点来替换对应的子节点，使用a这个元素来替代对应的content这个子元素 div.replaceChild(a,content)//只能替换一个子元素，a替换content
4.Element插入元素和删除元素
div.append('hello',content)//追加多个内容到此元素里面元素的后面
//appedChild 追加子元素
div.appendChild(content)//追加一个元素在当前元素的里面（追加的元素如果里面已经存在不能再添加，同一个元素只能加一次）
div.appendChild(a)//相当于把之前那个已经存在的元素删除，再添加进去
//insertBefore 插入一个元素到任意一个子元素的前面
var span=document.createElement('span')
//参数1当前需要插入的元素 参数2 对应的子元素
div.insertBefore(span,div.children[0])
//删除元素
// div.remove()//全部删除，包括自己
//清空所有内容 利用appendChild('')
5.克隆
var clone=div.childNodes//进行元素克隆 console.log(clone);//只克隆自己，不会克隆里面的内容 var clone1=div.cloneNode(true)//里面是true的情况表示深度克隆，会克隆所有的内容 console.log(clone1);
6.元素的其他属性
//元素的其他属性，所有元素都有的属性 console.log(div.style);//用于获取div里面的style属性，只能读取里面有的 console.log(div.style.width);//查看宽 可以设置div的宽 console.log(div.style.height); //设置属性值 element.style.样式名 div.style.backgroundColor='red' //className 获取对应的class名字 console.log(div.className);//返回big div.className='class' //修改class属性值 console.log(div.className);//返回class //id 获取对应的id console.log(div.id);//空值，因为没有定义id属性值 div.id='nav' //设置id属性值 console.log(div.id);//返回nav //title 获取对应的属性值 console.log(div.title);//空值，因为没有定义title属性值 div.title='element' //设置title值 console.log(div.title);//返回element
7.tagName
只读属性：获取父元素、子元素、兄弟元素、tagName
//tagName 返回的是大写的字符串 只读属性 console.log(div.tagName);//DIV console.log(a.tagName);//A
8.所有元素对本身自带属性都可以直接获取和设置出来 (元素.属性名)
//所有元素对本身自带属性都可以直接获取和设置出来 (元素.属性名) var input=document.querySelector('input'); console.log(input.placeholder);//空值 input.placeholder='请输入' console.log(input.placeholder);//请输入 console.log(input.value); input.value='用户名' console.log(input.value);//用户名 var img=document.querySelector("img"); console.log(img.src);
9.innerHTML及innerText
//innerHTML显示html所有的内容 innerText显示文本的内容 concole.log(div.innerHTML); concole.log(div.innerText); div.innerHTML="<b>hello<b>"//解析html代码 div.innerText="<b>hello<b>"//不会解析html代码
10.相关的方法
cloneNode 克隆所有节点
cloneNode(true) 表示深度克隆，会克隆所有的内容，浅克隆只会克隆标签
append() 添加节点
appendChild() 添加节点
replaceChild() 替换节点
replaceChildren() 替换所有的子节点
insetBefore() 插入节点
removeChild()
11.属性节点操作方法
setAttributeNode 设置属性节点
getAttributeNode 获取属性节点
removeAttrbuteNode 删除属性节点
12.节点类型
空文本：空格、换行及制表符都是空文本节点
nodeType 节点类型（1表示元素节点 2表示属性节点 3表示文本节点）
nodeValue 节点值 （元素节点的节点值获取不到就会返回null，属性节点的节点值：属性值 ，文本节点的节点值：文本内容）
nodeName 节点名 （元素节点的节点：标签名，属性节点：属性名，文本节点：#text
var cont1=document.createElement('a')//元素结点 cont1.innerHTML='hello' var cont2=document.createAttribute('name')//属性结点 cont2.value='张三' var text=document.createTextNode("hello")//文本结点 //nodename 节点名，元素的节点名是大写，属性节点名是小写，文本节点是#text(只读属性) console.log(cont1.nodeName,cont2.nodeName,text.nodeName);//A name #text console.log(cont1.nodeType,cont2.nodeType,text.nodeType);//1 2 3 console.log(cont1.nodeValue,cont2.nodeValue,text.nodeValue);//null '张三' 'hello'
13.节点属性
var ele=document.querySelector("a"); ele.append(text) console.log(ele.parentNode);//获取父节点 div console.log(text.parentNode);//获取父节点 a console.log(ele.childNodes);//获取所有的子节点 [text] （空格以及回车都是文本节点）不包含属性节点（元素和文本） console.log(ele.length); //获取所有属性节点 //伪数组 （key:value） 迭代器 console.log(ele.attributes);//NamedNodeMap {0: href, href: href, length: 1} console.log(ele.attributes.length);//1 //访问 console.log(ele.attributes[0]);//属性节点对象 href="" console.log(ele.attributes['href'].nodeValue); console.log(ele.attributes['href'].value);
