1.在整个文档范围内查询元素节点

功能API返回值根据id值查询document.getElementById(“id值”)一个具体的元素节根据标签名查询document.getElementsByTagName(“标签名”)元素节点数组根据name属性值查询document.getElementsByName(“name值”)元素节点数组根据类名查询document.getElementsByClassName(“类名”)元素节点数组

在具体元素节点范围内查找子节点

功能API返回值查找子标签element.children返回子标签数组查找第一个子标签element.firstElementChild标签对象查找最后一个子标签element.lastElementChild节点对象

功能API返回值查找指定元素节点的父标签element.parentElement标签对象

功能API返回值查找前一个兄弟标签node.previousElementSibling标签对象查找后一个兄弟标签node.nextElementSibling标签对象

属性操作

需求操作方式读取属性值元素对象.属性名修改属性值元素对象.属性名新的属性值

需求操作方式获取或者设置标签体的文本内容element.innerText获取或者设置标签体的内容element.innerHTML

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实战

charsetUTF-8/titleDOM操作/titlescriptwindow.onload

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

input1

document.getElementsByTagName(input)console.log(input1,input1.length);//alert(input标签的个数:inputTags.length)input1[0].value

class1

document.getElementsByClassName(classTag);console.log(class1,class1.length);//alert(通过类型获取元素的个数:classTag.length)class1[0].value

children1

document.getElementById(div1).children;console.log(children1,children1);//alert(子节点个数:childrens.length)children1[1].innerHTML

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

document.getElementById(p2).previousElementSibling;console.log(previousf,previousf);//10.查找指定兄弟元素的后一个let

previousl

document.getElementById(p1).nextElementSibling;console.log(previousl,previousl);//11.获取元素属性和属性值

propertyId

document.getElementById(p1).id;console.log(propertyId,propertyId);//12

将idp1

document.getElementById(p1).id;propertyUp

p3;console.log(propertyUp,propertyUp);//13

innerText

document.getElementById(p2).innerText;console.log(innerText,innerText);//14

innserTextUp

document.getElementById(p2).innerText;innserTextUp

而我在等你;console.log(innserTextUp,innserTextUp);//15

获取iddiv1

document.getElementById(div1).innerText;console.log(innerTextD,innerTextD);//16

innerTextUp

document.getElementById(div1).innerText;innerTextUp

console.log(innerTextUp,innerTextUp);}/script/headbodyinput

typetext

idp2而我在等你,/divp炊烟袅袅升起,/pp隔江千万里./p/div/body

/html