javaweb 复习笔记

DOM编程——选择指定的标签

docunment.getElementById():通过标签id属性查找

eg:查找id为a1的标签并设置其href属性

var myElement=document.getElementById("a1");

myElement.href="https://i.cnblogs.com/";

</script>

document.getElementsByClassName():通过标签类名属性查找

eg:查找类a中第3个标签(第一个为0，第二个为1，第三个为2)并更改其中包含的文本

var myElement=document.getElementsByClassName("a")[2];

myElement.innerText="hello world!";//innerText为标签所包含的文本

</script>

document.getElementsTagName("标签名"):通过标签名查找

eg:查找第二个div标签中第2个a标签

var myElement=document.getElementsByTagName("div")[1].getElementsByTagName("a")[1]

document.querySelectorAll():获取所有文本元素

eg:获取所有的p

<body>

<p>你需要获得的元素是我</p>

　　var pElement=document.querySelectorAll("p");

console.log(pElement);//console.log()在控制台输出信息

</script>

</body>

节点树的操作

创建并插入节点document.createElement("li");.appendChild(newNode);

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

newNode.innerText="Canada";

var node1=document.getElementsByTagName("ul")[0].appendChild(newNode);

var out = document.getElementsByTagName("li")[2];

console.log(out.innerText);

</script>

删除节点.removeChild(child);

<body>

<li id="chrome">Chrome</li>

<li id="firefox">Firefox</li>

<li id="opera">Opera</li>

<li id="safari">Safari</li>

</ol>

var parent=document.getElementById("browser");

var child=document.getElementById("opera");

parent.removeChild(child);

</script>

</body>

替换节点 parent.replaceChild(newChild,old);

<body>

<a id="old" href="https://www.google.com">Google</a>

</ol>

var newChild = document.createElement("a");

newChild.innerText = "eduCoder";

newChild.href = "https://www.educoder.net";

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

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

parent.replaceChild(newChild,old);

</script>

</body>

节点标签.lastElementChild;

eg:把下拉菜单中的黄色变为绿色

<body>

</div>

</select>

</div>

var cl2 = document.getElementById("div1").lastElementChild;//div1标签的最后一个子节点

var myElement=cl2.children[0].children[1];//cl2节点的第一个子节点--<select>的第二个子节点--<option>黄</option>

myElement.innerText = "绿";

</script>

</body>

属性值的获取

document.getElementById("div1").getAttribute("href")

document.getElementById("div1").href

使用第二种方法不可以用.class，要用.className

属性值的设置

myElement.setAttribute("method","post");

posted @ 2020-07-17 11:09 headdag 阅读(93) 评论(0) 收藏举报

刷新页面返回顶部

headdag

javaweb 复习笔记

公告