W3school——javascript笔记

js改变其背景颜色

function changeBgClr(value)
{
document.body.style.backgroundColor=value
}

this的话还可以调用本身节点的属性

节点的基本操作

 var newParagraph = document.createElement("p");

如何在节点的文本框中加入字符串

创建节点

createTextNode

插入和添加节点

insertBefore
insertAfter
appendChild

复制节点

cloneNode()

删除和替换节点

removeChild
replaceChild

w3school网站
需求
查找HTML元素
ById;ByTagName;ByClassName
未找到则什么都不返回,或者返回null把
为什么要查找元素，查找元素有什么用么，要知晓数据库中有无数据先查找
通过类名查找不适用于ie8及更早版本

通过CSS选择器查找HTML元素

querySelectorAll()

通过HTML对象选择器查找HTML对象

书上没有
.标签名['name属性']，并不是name属性，而是form的id号，html对象也神奇；name属性也可以，但必须是forms
并不是标签名 forms啥，表单复数

改变HTML元素

innerHTML可用在自身查找的返回是列表元素中
innerHTML;attribute
serAttribute;style.property

添加和删除元素

createElement;removeChild
appendChild;replaceChild
document.write(xxx)
一般的事件处理程序既是.onclick点击标签事件

查找HTML对象

a-u
https://www.w3school.com.cn/js/js_htmldom_document.asp
tips:alert而不是alter

DOM文档

document.write()直接写入HTML输入流
千万不要在文档加载后使用 document.write()。这么做会覆盖文档。

JavaScript表单

基本概念：
表单域(fname)
js表单验证
表单验证的验证函数直接写在表单中（form中）,更确切的是form中的onsubmit属性
那为什么要写return呢，直接调用函数名不行么
还可用let来定义变量

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}
</script>
</head>
<body>

<h1>JavaScript 验证</h1>

<form name="myForm" action="/demo/html/action_page.php" onsubmit="return validateForm()" method="post">
  Name: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>

</body>
</html>

js验证1-10之间的输入

function myFunction() {
  // 获取 id = "numb" 的输入字段的值
  let x = document.getElementById("numb").value;
  // 如果 x 不是数字或小于 1 或大于 10
  let text;
  if (isNaN(x) || x < 1 || x > 10) {
    text = "输入无效";
  } else {
    text = "输入没问题";
  }
  document.getElementById("demo").innerHTML = text;
}

required可以验证HTML属性可以提交表单，若表单字段(fname)为空，则提醒

改变CSS

HTMLDOM动画

JavaScript 动画是通过对元素样式进行渐进式变化编程完成的。
计数器
setInterval函数有什么作用
clearInterval函数呢

var id = setInterval(frame, 5);

function frame() {
    if (/* 测试是否完成 */) {
        clearInterval(id);
    } else {
         /* 改变元素样式的代码 */
    }
}

onclick有2种用法

1.直接嵌在button标签中，或者input的button类型中
2.获取对应的元素对象，然后再使用.onclick属性=xxx函数名

检测浏览器是否启用Cookie

function checkCookies() {
  var text = "";
  if (navigator.cookieEnabled == true) {
    text = "Cookie 已启用";
  } else {
    text = "Cookie 未启用";
  }
  document.getElementById("demo").innerHTML = text;
}

onchange事件

onchange 事件经常与输入字段验证结合使用

function myFunction() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}

请输入您的名字：<input type="text" id="fname" onchange="myFunction()">

onmouseover和onmouseout事件可用于当用户将鼠标移至HTML元素上或移出时触发某个函数

<div onmouseover="mOver(this)" onmouseout="mOut(this)" 
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
请把鼠标移上来</div>

<script>
function mOver(obj) {
  obj.innerHTML = "谢谢您"
}

function mOut(obj) {
  obj.innerHTML = "请把鼠标移上来"
}
</script>

onmousedown, onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。

首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。

javaScript HTML DOM事件监听程序

语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型（比如 "click" 或 "mousedown"）。
第二个参数是当事件发生时我们需要调用的函数。
第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。
可引用外部命名函数和内部命名函数

内部命名函数

element.addEventListener("click", function(){ alert("Hello World!"); });

外部命名函数

element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}

向相同元素添加多个事件处理程序

addEventListener() 方法允许您向相同元素添加多个事件，同时不覆盖已有事件：

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

您能够向相同元素添加不同类型的事件：

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

向Window对象添加事件处理程序

添加当用户调整窗口大小时触发的事件监听器：

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

传递参数

element.addEventListener("click", function(){ myFunction(p1, p2); });

来自W3school的事件监听程序
https://www.w3school.com.cn/js/js_htmldom_eventlistener.asp

事件冒泡还是事件捕获

事件传播是一种定义当发生事件时元素次序的方法。假如div元素内有一个<p>，然后用户点击了这个<p>,应该首先处理那个元素'click'事件？
在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理<p>元素的点击事件，然后时<div>元素的点击事件。在捕获中，最外侧元素的事件会首先被处理，然后是更内测的.
在addEventListener(event,function,useCapture)中
useCapture默认值时false，将使用冒泡传播，如果将该值设置为true,则事件使用捕获传播。

removeEventListener() 方法

removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序：

element.removeEventListener("mousemove", myFunction);

节点树导航

js访问一个节点的方法就有3种，让人难受

# 1文本节点的值能够通过节点的 innerHTML 属性进行访问：
var myTitle = document.getElementById("demo").innerHTML;
# 2访问 innerHTML 属性等同于访问首个子节点的 nodeValue：
var myTitle = document.getElementById("demo").firstChild.nodeValue;
# 第3种方法
var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

节点与节点之间的关系

和爬虫里的类似
父、子和同胞，

parentNode,childNodes[nodenumber]
firstChild
lastChild
nextSibing
previousSibling

以上都是属性，可以直接使用，一般加在获取的元素节点之后。
如使用getElementById获取了元素节点，再次基础上进行操作

DOM根节点

有两个特殊属性允许访问完整文档

document.body -文档的body
document.documentElement-完整文档

可打印处本html页面的所有代码

 alert(document.body.innerHTML);
alert(document.documentElement.innerHTML);

nodeName属性

nodeName属性规定节点的名称

nodeName 是只读的
元素节点的 nodeName 等同于标签名
属性节点的 nodeName 是属性名称
文本节点的 nodeName 总是 #text
文档节点的 nodeName 总是 #document

nodeValue 属性

nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined
文本节点的 nodeValue 是文本文本
属性节点的 nodeValue 是属性值

nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。
返回的只有数字
ELEMENT_NODE 1 <h1 class="heading">W3School</h1>
ATTRIBUTE_NODE 2 class = "heading" （弃用）
TEXT_NODE 3 W3School
COMMENT_NODE 8
DOCUMENT_NODE 9 HTML 文档本身（的父）
DOCUMENT_TYPE_NODE 10 <!Doctype html>

JavaScript HTML DOM 元素（节点）

就算有参考手册我也不知道它属于什么模块，有什么可以搜索的，从他这个方法就可以搜索到什么属性，直接搜把，有空再看，做东西把

posted @ 2021-11-30 08:43 索匣阅读(196) 评论(0) 编辑收藏举报

刷新页面返回顶部

心若有她便……

个人博客网站 http://101.42.141.145/