由于实际开发时基本上都是使用JavaScript的各种框架来操作，而框架中的操作方式和我们现在看到的原生操作完全不同，所以下面罗列的API仅供参考，不做要求。
功能 API 返回值 根据id值查询 document.getElementById(“id值”) 一个具体的元素节 根据标签名查询 document.getElementsByTagName(“标签名”) 元素节点数组 根据name属性值查询 document.getElementsByName(“name值”) 元素节点数组 根据类名查询 document.getElementsByClassName(“类名”) 元素节点数组
功能 API 返回值 查找子标签 element.children 返回子标签数组 查找第一个子标签 element.firstElementChild 【W3C考虑换行，IE≤8不考虑】 标签对象 查找最后一个子标签 element.lastElementChild 【W3C考虑换行，IE≤8不考虑】 节点对象
功能 API 返回值 查找指定元素节点的父标签 element.parentElement 标签对象
功能 API 返回值 查找前一个兄弟标签 node.previousElementSibling 【W3C考虑换行，IE≤8不考虑】 标签对象 查找后一个兄弟标签 node.nextElementSibling 【W3C考虑换行，IE≤8不考虑】 标签对象
功能 API 返回值 根据选择器查找一个标签 document.querySelector(“选择器”) 标签对象 根据选择器查找多个标签 document.querySelectorAll(“选择器”) 标签数组
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < inputtype = " text" id = " username" > < inputtype = " text" class = " c1" > < inputtype = " text" class = " c1" > < div> < div> </ div> < div> </ div> </ div> < script>
var elementById = document. getElementById ( "username" ) ;
var elementsByClassName = document. getElementsByClassName ( "c1" ) ;
var elementsByTagName = document. getElementsByTagName ( "input" ) ;
var children = document. getElementsByTagName ( "body" ) [ 0 ] . children;
var parentNode = document. getElementById ( "username" ) . parentNode;
var previousElementSibling = document. getElementById ( "username" ) . previousElementSibling;
var nextElementSibling = document. getElementById ( "username" ) . nextElementSibling;
var ipt1 = document. querySelector ( "#username" ) ;
var ipts = document. querySelectorAll ( "body div" ) ;
var i1 = document. querySelector ( "#username+input" ) ;
var i2 = document. querySelectorAll ( "#username~input" ) ;
console. log ( i2)
</ script> </ body> </ html> 需求 操作方式 读取属性值 元素对象.属性名 修改属性值 元素对象.属性名=新的属性值
需求 操作方式 获取或者设置标签体的文本内容 element.innerText 获取或者设置标签体的内容 element.innerHTML
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < inputtype = " text" id = " username" name = " username" /> < divid = " d1" > < h1> </ h1> </ div> < script>
var ipt = document. getElementById ( "username" ) ;
ipt. value = "张三"
var value = ipt. value;
console. log ( value)
var innerText = document. getElementById ( "d1" ) . innerText;
console. log ( innerText)
var innerHTML = document. getElementById ( "d1" ) . innerHTML;
console. log ( innerHTML)
document. getElementById ( "d1" ) . innerHTML = "<h1>hello world</h1>"
</ script> </ body> </ html> API 功能 document.createElement(“标签名”) 创建元素节点并返回，但不会自动添加到文档中 document.createTextNode(“文本值”) 创建文本节点并返回，但不会自动添加到文档中 element.appendChild(ele) 将ele添加到element所有子节点后面 parentEle.insertBefore(newEle,targetEle) 将newEle插入到targetEle前面 parentEle.replaceChild(newEle, oldEle) 用新节点替换原有的旧子节点 element.remove() 删除某个标签 element.innerHTML 读写HTML代码
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < ulid = " city" > < liid = " bj" > </ li> < liid = " sh" > </ li> < liid = " sz" > </ li> < liid = " gz" > </ li> </ ul> < script>
var liElement = document. createElement ( "li" ) ;
liElement. id = "cs"
liElement. innerText = "长沙"
var cityUl = document. getElementById ( "city" ) ;
var szElement = document. getElementById ( "sz" ) ;
cityUl. innerHTML = ""
</ script> </ body> </ html> HTML 事件是发生在 HTML 元素上的“事情”， 是浏览器或用户做的某些事情 事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。 属性 此事件发生在何时… onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onchange 域的内容被改变。 onblur 元素失去焦点。 onfocus 元素获得焦点。 onload 一张页面或一幅图像完成加载。 onsubmit 确认按钮被点击；表单被提交。 onkeydown 某个键盘按键被按下。 onkeypress 某个键盘按键被按住。 onkeyup 某个键盘按键被松开。 onmousedown 鼠标按钮被按下。 onmouseup 鼠标按键被松开。 onmouseout 鼠标从某元素移开。 omouseover 鼠标移到某元素之上。 onmousemove 鼠标被移动。
2.5.7.3.1 普通函数方式
说白了设置标签的属性
<标签 属性="js代码，调用函数"></标签>
2.5.7.3.2 匿名函数方式
< script>
标签对象. 事件属性 = function ( ) {
}
</ script> 需求: 没点击一次按钮 弹出hello…
< inputtype = " button" value = " 按钮" onclick = " fn1 ( ) " > < inputtype = " button" value = " 另一个按钮" id = " btn" > < script>
function fn1 ( ) {
alert ( "我被点击了..." )
}
let btn = document. getElementById ( "btn" ) ;
btn. onclick = function ( ) {
console. log ( "点击了另外一个按钮" )
}
</ script> 需求:给输入框设置获得和失去焦点
var ipt = document. getElementById ( "ipt" ) ;
ipt. onfocus = function ( ) {
console. log ( "获取焦点了..." )
}
ipt. onblur = function ( ) {
console. log ( "失去焦点了..." )
}
需求: 给select设置内容改变事件
< body> < selectonchange = " changeCity ( this ) " > < optionvalue = " bj" > </ option> < optionvalue = " sh" > </ option> < optionvalue = " sz" > </ option> </ select> </ body> < script>
function changeCity ( obj ) {
console. log ( "城市改变了" + obj. value) ;
}
</ script>
ipt. onkeydown = function ( ) {
}
ipt. onkeyup = function ( ) {
console. log ( ipt. value)
}
ipt. onmouseover = function ( ) {
console. log ( "鼠标移入了..." )
}
ipt. onmouseout = function ( ) {
console. log ( "鼠标移出了..." )
}
需求
代码实现 <! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < style>
table,tr,td,th {
border : 1px solid black;
width : 500px;
text-align : center;
margin : auto;
}
div {
text-align : center;
}
</ style> </ head> < body> < tablecellspacing = " 0" id = " tb" > < tr> < th> </ th> < th> </ th> < th> </ th> < th> </ th> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> < td> < buttononclick = " deletePerson ( this ) " > </ button> </ td> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> < td> < buttononclick = " deletePerson ( this ) " > </ button> </ td> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> < td> < buttononclick = " deletePerson ( this ) " > </ button> </ td> </ tr> </ table> < div> < formaction = " #" > < inputtype = " text" name = " num" id = " num" > < br/> < inputtype = " text" name = " username" id = " username" /> < br/> < inputtype = " text" name = " gender" id = " gender" /> < br/> < inputtype = " button" value = " 添加用户" onclick = " addPerson ( ) " /> </ form> </ div> < script>
function deletePerson ( obj ) {
obj. parentElement. parentElement. remove ( )
}
function addPerson ( ) {
var numElement = document. getElementById ( "num" ) ;
var num = numElement. value;
var usernameElement = document. getElementById ( "username" ) ;
var username = usernameElement. value;
var genderElement = document. getElementById ( "gender" ) ;
var gender = genderElement. value;
var trElement = document. createElement ( "tr" ) ;
trElement. innerHTML = "<td>" + num+ "</td>\n" +
" <td>" + username+ "</td>\n" +
" <td>" + gender+ "</td>\n" +
" <td>\n" +
" <button οnclick=\"deletePerson(this)\">删除</button>\n" +
" </td>"
var tb = document. getElementById ( "tb" ) ;
tb. appendChild ( trElement)
numElement. value = ""
usernameElement. value = ""
genderElement. value = ""
}
</ script> </ body> </ html>
