网站 蜘蛛,宝塔搭建wordpress访问很慢,云南旅游网站开发公司,网站建设方案标书原贴连接
1.在整个文档范围内查询元素节点
功能API返回值根据id值查询document.getElementById(“id值”)一个具体的元素节根据标签名查询document.getElementsByTagName(“标签名”)元素节点数组根据name属性值查询document.getElementsByName(“name值”)元素节点数组根据类…原贴连接
1.在整个文档范围内查询元素节点
功能API返回值根据id值查询document.getElementById(“id值”)一个具体的元素节根据标签名查询document.getElementsByTagName(“标签名”)元素节点数组根据name属性值查询document.getElementsByName(“name值”)元素节点数组根据类名查询document.getElementsByClassName(“类名”)元素节点数组
2 在具体元素节点范围内查找子节点
功能API返回值查找子标签element.children返回子标签数组查找第一个子标签element.firstElementChild标签对象查找最后一个子标签element.lastElementChild节点对象
3 查找指定元素节点的父节点
功能API返回值查找指定元素节点的父标签element.parentElement标签对象
4 查找指定元素节点的兄弟节点
功能API返回值查找前一个兄弟标签node.previousElementSibling标签对象查找后一个兄弟标签node.nextElementSibling标签对象
5 属性操作
需求操作方式读取属性值元素对象.属性名修改属性值元素对象.属性名新的属性值
6 标签体的操作
需求操作方式获取或者设置标签体的文本内容element.innerText获取或者设置标签体的内容element.innerHTML
7 DOM增删改操作
API功能document.createElement(“标签名”)创建元素节点并返回但不会自动添加到文档中document.createTextNode(“文本值”)创建文本节点并返回但不会自动添加到文档中element.append(ele)将ele添加到element元素中element.appendChild(ele)将ele添加到element所有子节点后面parentEle.insertBefore(newEle,targetEle)将newEle插入到targetEle前面parentEle.replaceChild(newEle, oldEle)用新节点替换原有的旧子节点element.remove()删除某个标签
8.doc实战
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8/titleDOM操作/titlescriptwindow.onload function(){//1.根据ID获取元素信息let p1 document.getElementById(p1);console.log(p1,p1)//2.根据name属性获取元素信息let name1 document.getElementsByName(name1);console.log(name1,name1.length);//alert(inputNames.length)name1[0].value aabbcc;//3.通过input标签获取元素let input1 document.getElementsByTagName(input)console.log(input1,input1.length);//alert(input标签的个数:inputTags.length)input1[0].value 112233;//4.通过class类型获取数据let class1 document.getElementsByClassName(classTag);console.log(class1,class1.length);//alert(通过类型获取元素的个数:classTag.length)class1[0].value oooooo;//5.查找指定元素的子元素let children1 document.getElementById(div1).children;console.log(children1,children1);//alert(子节点个数:childrens.length)children1[1].innerHTML nihai;//6.获取第一个子元素let firstP document.getElementById(div1).firstElementChild;console.log(firstP,firstP);//7.获取最后一个子节点let lastP document.getElementById(div1).lastElementChild;console.log(lastP,lastP);//8.根据指定元素,查找父节点let parentP document.getElementById(p1).parentElement;console.log(parentP,parentP);//9.查找指定兄弟的 前一个let previousf document.getElementById(p2).previousElementSibling;console.log(previousf,previousf);//10.查找指定兄弟元素的后一个let previousl document.getElementById(p1).nextElementSibling;console.log(previousl,previousl);//11.获取元素属性和属性值 获取idp1的ID值let propertyId document.getElementById(p1).id;console.log(propertyId,propertyId);//12 将idp1 修改为p3let propertyUp document.getElementById(p1).id;propertyUp p3;console.log(propertyUp,propertyUp);//13 获取标签体的内容let innerText document.getElementById(p2).innerText;console.log(innerText,innerText);//14 修改idp2标签体的内容let innserTextUp document.getElementById(p2).innerText;innserTextUp 而我在等你;console.log(innserTextUp,innserTextUp);//15 获取iddiv1 的标签体内容let innerTextD document.getElementById(div1).innerText;console.log(innerTextD,innerTextD);//16 修改iddiv1的内容let innerTextUp document.getElementById(div1).innerText;innerTextUp 窗前明月光,疑似地上霜,举头望明月,低头思故乡.; console.log(innerTextUp,innerTextUp);}/script/headbodyinput typetext namename1 idid classclassTagdiv iddiv1div idp1天青色等烟雨,/divdiv idp2而我在等你,/divp炊烟袅袅升起,/pp隔江千万里./p/divhr/div iddemo2/div/body
/html
9.F12效果 10.创建一个无序和有序列表 let demo2 document.getElementById(demo2);let ul document.createElement(ul);let li1 document.createElement(li);let li2 document.createElement(li)let li3 document.createElement(li)let li4 document.createElement(li)li1.innerText 产品设计;li2.innerText UI设计;li3.innerText WEB前端开发;li4.innerText JAVA后端开发;ul.append(li1);ul.append(li2);ul.append(li3);ul.append(li4);let ol document.createElement(ol);let li5 document.createElement(li);let li6 document.createElement(li)let li7 document.createElement(li)let li8 document.createElement(li)li5.innerText 产品设计;li6.innerText UI设计;li7.innerText WEB前端开发;li8.innerText JAVA后端开发;ol.append(li5);ol.append(li6);ol.append(li7);ol.append(li8);demo2.appendChild(ul)demo2.appendChild(ol)
11.效果图
