前端需要,了解一下html-dom的内容

HTML DOM

DOM是把html里面的各种数据当作对象进行操作的一种思路

DOM把所有的html都转换为节点

例如,整个文档,元素,元素属性,元素内容,注释等

document.getElementByID("d1")例如这一个

就是获取id=d1的div标签对应的元素节点

可以通过chiildNodes获取内容节点

文档节点[object HTMLDocument]

元素节点[object HTMLDivElement]

属性节点[object Attr]

内容节点[object Text]

document.getElementById 通过id获取元素节点

getElementsByTagName 通过标签名称获取元素节点

getElementsByClassName 通过类名获取元素节点

getElementsByName 通过表单元素的name获取元素节点

attributes 获取属性节点

childNodes 获取内容节点

nodeName 节点名称

nodeValue 节点值

nodeType 节点类型

innerHTML 元素文本内容

id,value,className 元素上的属性

html-dom 样式

style.display="none" //隐藏

style.display="block" //显示

//显示和隐藏
<html>
<head>
    <title>Test1</title>
</head>
<body>

<button onclick="hide()">Hide</button>
<button onclick="show()">Show</button>

<div id="d">Hide or Show</div>
<script>
function hide(){
    var d = document.getElementById("d");
    d.style.display ="none";
}
function show(){
    var d = document.getElementById("d");
    d.style.display="block";
}
</script>


</body>
</html>

改变背景色

style.backgroundColor

这里的backgroundColor和css中的background-color有所不同

通过DOM的style修改样式是一件很麻烦的事

所以通过CSS的属性名,直接就进行修改了。比如通过这样的方式:

d1.css("background-color","green")

HTML-DOM 事件

焦点事件onfocus onblur

<html>
<head>
    <title>Test1</title>
    <meta charset="utf-8">
</head>
<body>

<input type="text" onfocus="f()" onblur="b()" id="input1" placeHolrder="">
<input type="text">
<div id="message"></div>

<script>
function f(){
    document.getElementById("message").innerHTML="获取焦点";
}
function p(){
    document.getElementById("message").innerHTML="失去焦点";
}
</script>


</body>
</html>
鼠标事件

onmousedown 鼠标按下

onmouseup 鼠标弹起

onmousemove 鼠标经过

onmouseover 鼠标进入

onmouseout 鼠标退出

键盘事件

键盘按下 onkeydown

键盘按下 onkeypress

键盘弹起 onkeyup

点击事件

单击 onclick

双击 ondblclick

提交事件-onsubmit
<html>
<head>
    <title>Test1</title>
    <meta charset="utf-8">
</head>
<body>


<form action="" onsubmit="login()">
    <input type="text" name="name">
    <input type="password" name="password">
    <input type="submit" value="Login">
</form>
<script>
function login(){
    alert("提交表单");
}
</script>


</body>
</html>

创建节点

createElement 创建元素节点

//例子
<html>
<head>
    <title>Test1</title>
    <meta charset="utf-8">
</head>
<body>


<div id="d"> Test Page</div>
<button onclick="add()">Submit</button>
<script>
function add(){
    var hr=document.createElement("hr");
    var div1 = document.getElementById("d");
    //appendChild 将hr元素节点添加到div1中
    div1.appendChild(hr);
}
</script>


</body>
</html>

createTextNode 创建文本节点

//例子
<html>
<head>
    <title>Test1</title>
    <meta charset="utf-8">
</head>
<body>

<div id="d"> Test Page</div>
<button onclick="add()">Submit</button>
<script>
function add(){
    var p=document.createElement("p");
    var text = document.createTextNode("test add text dom");
    p.appendChild(text);

    var div1 = document.getElementById("d");
    div1.appendChild(p);
}
</script>

</body>
</html>s

createAttribute 创建属性节点

//例子
<html>
<head>
    <title>Test1</title>
    <meta charset="utf-8">
</head>
<body>

<div id="d"> Test Page</div>
<button onclick="add()">Submit</button>
<script>
function add(){
    var a = document.createElement("a");
    var content = document.createTextNode("http://baidu.com");
    a.appendChild(content);

    var href = document.createAttribute("href");
    href.nodeValue="http://baidu.com";
    //setAttributeNode把href属性添加到元素节点a上面
    a.setAttributeNode(href);

    var div1 = document.getElementById("d");
    div1.appendChild(a)

}
</script>

</body>
</html>

删除节点

删除元素节点 removeChild

<html>
<head>
    <title>Test1</title>
    <meta charset="utf-8">
</head>
<body>


<div id="d">
    <div id="d1">First Delete Div</div>
    <div id="d2">Secend Delete Div</div>
</div>

<button onclick="remove()">Delete</button>

<script>
function remove(){
    var parentDiv = document.getElementById("d");
    var d2 = document.getElementById("d2");
    parentDiv.removeChild(d2);
}
</script>

</body>
</html>

删除属性节点

<html>
<head>
    <title>Test1</title>
    <meta charset="utf-8">
</head>
<body>

//将原先Baidu文本上面的链接删除
<a id="link" href="http://baidu.com">Baidu</a>
<button onclick="remove()">Delete</button>

<script>
function remove(){
    var link = document.getElementById("link")
    link.removeAttribute("href")
}
</script>

</body>
</html>

替换节点

replaceChild

<html>
<head>
    <title>Test1</title>
    <meta charset="utf-8">
</head>
<body>


<div id="parentDiv">
    <div id="d1">one</div>
    <div id="d2">two</div>
    <div id="d3">three</div>
</div>

<button onclick="replaceDiv()">Submit</button>
<script>
function remove(){
    var link = document.getElementById("link")
    link.removeAttribute("href")
}

function replaceDiv(){
    var d4 = document.createElement("div");
    var text = document.createTextNode("four");

    d4.appendChild(text);

    var d3 = document.getElementById("d3");
    var parentDiv = document.getElementById("parentDiv");

    parentDiv.replaceChild(d4,d3)
}
</script>

</body>
</html>