Js中的dom

Posted 2020-09-12 殷瑜泰

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Js中的dom相关的知识，希望对你有一定的参考价值。

文档对象模型
- html文件加载到内存之后会形成一颗dom树，根据这些节点对象可以进行脚本代码的动态修改(在dom树当中一切皆为节点对象)
Dom的方法和属性
- getElementById() 寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null.

Code：输出 <input type="text" name="username" value="天天学习，好好向上" id="tid" >标签value属性的值

<body>

</form>

</body>

var inputNode = document.getElementById("tid");

alert(inputNode.value);

</script>

Code：输出 <input type="text" name="username" value="天天学习，好好向上" id="tid" >标签type属性的值

<body>

</form>

</body>

//输出 <input type="text" name="username" value="IT精英培训" id="tid" >标签type属性的值

/* var inputNode = document.getElementById("tid");

alert(inputNode.type);

</script>

getElementsByName() 寻找有着给定name属性的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数。

code

<body>

</form>

</body>

//通过元素的name属性获取所有元素的引用

var inputNodes = document.getElementsByName("tname");

//测试该数据的长度

alert(inputNodes.length);

//遍历元素,输出所有value属性的值

for(var i=0;i<inputNodes.length;i++){

var inputNode = inputNodes[i];

alert(inputNode.value);

}

//为每个文本框(<input type="text">)增加chanage事件,当值改变时,输出改变的值

for(var i=0;i<inputNodes.length;i++){

var inputNode = inputNodes[i];

inputNode.onchange = function(){

alert(this.value);

};

}

getElementsByTagName() 寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数

code

<body>

</form>

</select>

</select>

<br/>

</body>

//获取所有的input元素,返回值是数组

var inputNodes = document.getElementsByTagName("input");

//测试长度

alert(inputNodes.length);

//遍历value的值

for(var i=0;i<inputNodes.length;i++){

var inputNode = inputNodes[i];

alert(inputNode.value);

}

//输出type="text"中 value属性的值不包含按钮(button)

for(var i=0;i<inputNodes.length;i++){

var inputNode = inputNodes[i];

if(inputNode.type=="text"){

alert(inputNode.value);

}

//输出所有下拉选select的option标签中value的值

var optionNodes = document.getElementsByTagName("option");

for(var i=0;i<optionNodes.length;i++){

var optionNode = optionNodes[i];

alert(optionNode.value);

}

//输出所有下拉选 id="edu"中option标签中 value属性的值

var edu = document.getElementById("edu");

var optionNodes = edu.getElementsByTagName("option");

for(var i=0;i<optionNodes.length;i++){

var optionNode = optionNodes[i];

alert(optionNode.value);

}

//点击按钮输出下拉框中被选中的值

var btn = document.getElementById("btn");

btn.onclick = function(){

var optionNodes = document.getElementsByTagName("option");

for(var i=0;i<optionNodes.length;i++){

var optionNode = optionNodes[i];

if(optionNode.selected){

alert(optionNode.value);

}

};

</script>

hasChildNodes() 该方法用来检查一个元素是否有子节点，返回值是 true 或 false.

Code:

<body>

</form>

</select>

</select>

</body>

//查看id="edu"的节点是否含有子节点

var edu = document.getElementById("edu");

alert(edu.hasChildNodes());

//查看id="tid_1"的节点是否含有子节点

var tid_1 = document.getElementById("tid_1");

alert(tid_1.hasChildNodes());

</script>

nodeName属性（nodeName是一个只读属性）
- 文档中每个每个节点都有以下属性。
- nodeName:一个字符串，其内容是给定节点的名字。
- 如果节点是元素节点，nodeName返回的是这个元素的名称
- 如果是属性节点，nodeName返回这个属性的名称
- 如果是文本节点，nodeName返回一个内容为#text的字符串
nodeType属性(nodeType是个只读属性)
- nodeType:返回一个整数，这个数值代表着给定节点的类型。
  - nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种：
    
    Node.ELEMENT_NODE ---1 -- 元素节点
    
    Node.ATTRIBUTE_NODE ---2 -- 属性节点
    
    Node.TEXT_NODE ---3 -- 文本节点
NodeValue属性
- 如果给定节点是一个属性节点，返回的是这个属性值。
- 如果给定节点是个文本节点，返回值是这个文本几点的内容。
- 如果给定节点是一个元素节点，返回值是null
- NodeValue是一个读写属性，但是不能给元素节点的nodeValue属性设置值，但可以为文本节点的nodeValue属性设置一个值。

Code：

<body>

</form>

</body>

//元素节点 id="tid_1" 输出nodeName nodeType nodeValue

var node = document.getElementById("tid_1");

alert(node.nodeName);//input

alert(node.nodeType);//1

alert(node.nodeValue);//null

//文本节点 id="pid" 输出nodeName nodeType nodeValue

var node = document.getElementById("pid");

var textNode = node.firstChild;

alert(textNode.nodeName);//#text

alert(textNode.nodeType);//3

alert(textNode.nodeValue);//明天上课

//属性节点 id="pid" 输出nodeName nodeType nodeValue

var node = document.getElementById("pid");

var p = node.getAttributeNode("id");

alert(p.nodeName);//id

alert(p.nodeType);//2

alert(p.nodeValue);//pid */

</script>

replaceChild() 把一个给定父元素里的一个子节点替换为另外一个子节点

Code：

<body>

您喜欢的城市:<br>

<ul>

</ul>

您喜欢的游戏:<br>

<ul>

</ul>

</body>

//点击北京节点，将被反恐节点替换

var bj = document.getElementById("bj");

var fk = document.getElementById("fk");

bj.onclick = function(){

var parentNode = this.parentNode;

parentNode.replaceChild(fk,this);

};

</script>

getAttribute() 返回一个给定元素的一个给定属性节点的值

Code：

<body>

您喜欢的城市:<br>

<ul>

</ul>

您喜欢的游戏:<br>

<ul>

</ul>

</body>

//<li id="xj" value="xingji">星际争霸</li>节点的value属性的值

var xj = document.getElementById("xj");

alert(xj.getAttribute("value"));

</script>

setAttribute() 将给定元素节点添加一个新的属性值或改变它的现有属性的值

Code：

<body>

您喜欢的城市:<br>

<ul>

</ul>

您喜欢的游戏:<br>

<ul>

</ul>

</body>

//给这个节点增加 name属性 <li id="xj" value="xingji" name="xingjizhengba">星际争霸</li>

var xj = document.getElementById("xj");

xj.setAttribute("name","xingjizhengba");

//测试

alert(xj.getAttribute("name"));

</script>

createElement() 按照给定的标签名创建一个新的元素节点。方法只有一个参数：将被创建的元素的名字，是一个字符串.

Code：增加城市节点 <li id="tj" v="tianjin">天津</li>放置到city下

<body>

您喜欢的城市:<br>

</ul>

您喜欢的游戏:<br>

<ul>

</ul>

</body>

//增加城市节点 <li id="tj" v="tianjin">天津</li>放置到city下

var li = document.createElement("li");

li.setAttribute("id","tj");

li.setAttribute("v","tianjin");

var txt = document.createTextNode("天津");

li.appendChild(txt);

var city = document.getElementById("city");

city.appendChild(li);

</script>

insertBefore() 把一个给定节点插入到一个给定元素节点的给定子节点的前面

code

<body>

<ul>

</ul>

</body>

// 创建新的节点 <li id="tj" name="tianjin">天津</li>

var li = document.createElement("li");

li.setAttribute("id","tj");

li.setAttribute("v","tianjin");

var txt = document.createTextNode("天津");

li.appendChild(txt);

// 在 <li id="cq" name="chongqing">重庆</li>的前面

var ul = document.getElementsByTagName("ul");

var cq = document.getElementById("cq");

ul[0].insertBefore(li,cq);

</script>

removeChild() 从一个给定元素里删除一个子节点

code

<body>

</ul>

</body>

//删除<ul id="city"> 下<li id="bj" name="beijing">北京</li>这个节点</ul>

var city = document.getElementById("city");

var bj = document.getElementById("bj");

city.removeChild(bj);

</script>

innerHTML innerHTML 属性可以用来读，写某给定元素里的 HTML 内容

code

<body>

<div id="subject">jquery</div>

</body>

//使用innerHTML读出id=subject中的文本内容

var div = document.getElementById("subject");

alert(div.innerHTML);

//将<h1>今天</h1>写到div的层中

var div = document.getElementById("subject");

div.innerHTML = "<h1>今天</h1>";

</script>

以上是关于Js中的dom的主要内容，如果未能解决你的问题，请参考以下文章

js怎么获取iframe页面中的dom元素

JS中的DOM— —节点以及操作

Shadow DOM 是不是像 React.js 中的 Virtual DOM 一样快？

JS中的DOM操作

js中的DOM操作汇总