JavaScript快速入门(四)
网页中的交互
console.log
控制台输出alert
网页弹窗prompt
弹出输入框document.write
在网页上显示内容confirm
:确认框,返回true或false
获取网页中的元素
是document的方法
- getElementById
:通过id获取,返回单个
- getElementsByTagName
:通过标签名称获取,返回数组
- getElementsByName
:通过name属性的值获取,返回数组
获取和设置元素的属性
是元素的方法
getAttribute('attr')
:获取属性值
setAttribute('attr', 'value')
:设置属性值
DOM
DOM(Document Object Model)即文档对象模型,在此模型中定义了访问和处理 HTML 文档的标准方法。我们可以将整个 document 页面看作树型结构,每一个元素都视为一个节点,每个节点都有自身属性,可以通过这些属性改变节点的内容和样式。同时,每个节点都有一系列树型结构的属性与方法,如父子、同辈节点的遍历、节点的创建、添加、删除、替换等。
节点的属性及操作
nodeName
:节点名称nodeValue
:节点值nodeType
:节点类型innerHTML
: 属性用于获取或替换元素的内容,标签内的所有元素。innerText
: 属性用于获取或替换元素的文本内容,只有文本内容,没有其它 HTML 标签。className
:属性可以设置或返回元素的 class 属性。style
:控制节点元素的样式,可以改变width,height,color等样式属性值。
var oh = document.getElementById("ih");
oh.style.color = "red";
oh.style.width = "300px";
oh.style.backgroundColor = "#CCC";
oh.style.display = "none";//隐藏
oh.style.display = "block";
节点关系
childNodes
:孩子结点,返回数组parentNode
:父亲节点firstChild
:第一个孩子节点lastChild
:最后一个孩子结点previousSiBling
:前一个兄弟节点nextSiBling
:后一个兄弟节点
节点操作
createElement('tagName')
:创建节点。createTextNode('text')
: 创建文本节点。appendChild(o)
:在父节点末尾附加子节点 ,其中 o 为节点对象。removeChild(oP)
:删除节点。insertBefore
:这个方法的使用主体也是父节点,但他可以指定新节点插入的位置。replaceChild
:替换节点
事件
鼠标事件
onclick
:点击onmouseover
:鼠标悬停onmouseout
:移出onmouseup
:鼠标按下onmousedown
:抬起
输入框事件
onfocus
:聚焦onblur
:失焦onselect
:选中内容onchange
:改变内容
事件与方法绑定
nodename.event = funcname